Wrapping Text Around a Photo in a Side Widget with No Code
If you are working with a WordPress website, the side widget is a great place to add extra content. The native WordPress side widgets offer two options, “image” and “text”. However, if you want to be able to wrap your text around the image (inside the same widget), this can get a little tricky. Here is how I do it without writing any code!
If you want to learn a little more about WordPress sidebars, check out “what is a Sidebar”.
Step 1: Create a sample page
Creating a sample page can be helpful for testing just about anything in your website before you publish. Go to Pages -> New. Name your page “sample page” and be sure to leave it in draft format! This will make sure it is only visible to you.
Step 2: Format your image and text in your sample page like your normally do
Use the “visual editor” just like you normally would to create your content. Here you can use the WordPress tools to resize your image, set the alignment, and make it clickable to a URL.
When you are ready, click “text” and it will switch over to the HTML Editor. Copy the whole thing.
Step 3: Add your content to your widget
Now head back over to your Widgets. Choose the “text” widget and place it in your sidebar. Just copy and paste all the code from your sample page! Be sure to press the “save” button on your widget and check out the results that are now live on your page.
Here is what the HTML photo code will look like in your widget
I don’t have any text in this example, but you can see the html code on the right and then how it looks live on the page inside the righthand sidebar (it’s the top photo).