Wordpress Tutorials by kharawolfdesign.com

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.

create a wordpress sample page

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.

format your content in sample page
When you are ready, click “text” and it will switch over to the HTML Editor. Copy the whole thing. 
edit your content in wordpress visual editor

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.

add text to side widget

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).
Widget Photo Blog: Featured Image

Stay in touch!

Be the first to know about upcoming classes, workshops, and free marketing tips. I will never sell or share your information with third parties. 

* indicates required