How to Add an Image to Your WordPress Sidebar

by on January 21, 2010 · 90 comments

Here is something I get asked a lot – how can I add an image to my WordPress sidebar?

This video shows you how:

In the video, I’ll show you how to upload the widget using the WordPress Media Library, grab the URL for the uploaded image, and then use a WordPress Text Widget to display your image in the sidebar.

In this case I’m using the Expand2Web SmallBiz WordPress theme, but this tip will work with any WordPress theme that is widget enabled.

Here is the code snippet I used in the video for the sidebar widget:

<a href="#"><img src=" " /></a>

Just put the URL of your image in between the quotes of the image source tag.

Note: You should resize the image to the width of your sidebar before uploading. In this case the image is 200px wide. The width of the sidebar will depend on your WordPress theme.

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, the SmallBiz WordPress Theme and the GetFiveStars Customer Feedback and Reviews service.

Don has written 284 articles on Expand2Web

Author Connect » Twitter | | Facebook |

How The SmallBiz Theme Makes Your Business Website Way Better

If you're building a business website these days, you're in luck.

WordPress has revolutionized the ease and power of what a website can do and be. Now you can quickly create a website that is optimized for top search results, and update it yourself whenever you want.

As you'll see in a moment, the SmallBiz Theme is much more than a mere WordPress theme. It's a complete solution for your business web presence including a Website, Blog, Facebook Page and Mobile Website.

Let's take a look at each of these, and how they help you generate new business from the web…

Click to continue...

See my disclosure about advertising and affiliate links

{ 90 comments… read them below or add one }

Charlotte February 27, 2013 at 5:28 am

Thank you! so so helpful!:)


Bernie March 14, 2013 at 2:12 am

Thanks Don,
After days of frustration, I did it with you help.
You’re a star!


Tina March 20, 2013 at 5:26 pm

Thank you so much!


Jason Cameron April 16, 2013 at 7:14 pm

yup… just the best answer out there. My only change would be to refer people sooner to your blog (I found the video on You Tube). This would help as the text wasn’t clear enough from the video and I missed a space between characters. Once I went to the blog it was a simple cut and paste. Your post saved my marriage as I was getting so frustrated at my inability to make code work!


Abhishek April 25, 2013 at 5:16 am

Thankyou Sir,For such a great article. Video helps lot and save time also.


Jacky April 29, 2013 at 6:35 am

Thank you very much for your sharing. It is working.


Jacky April 29, 2013 at 7:38 am

Thank you for sharing. If I also want to add a link on this image I added at sidebar, how can I do it? Thanks


Don Campbell June 19, 2013 at 11:24 am

Hi Jacky,
You can just wrap the image with a hyper link. Here is a screenshot that shows what I mean:


rhonda June 10, 2013 at 12:42 pm

I really appreciate your videos, and in this one you indicated that we could add a link to this as well, but I didn’t get exactly how. Could you please explain. Also, I added the Text to the side bar but the image isn’t showing up on my webpage. Any ideas?


Don Campbell June 19, 2013 at 11:26 am

Hi rhonda, take a look at this screenshot to see how to add the link:


George June 18, 2013 at 12:31 am

Great stuff. You make it so simple to follow


sarah June 19, 2013 at 11:15 am

Hi! Your video helped me get my photo into the sidebar. Thanks so much! However, now the sidebar has gone to the bottom of my posts. Can you help me get it back to the side at the top? Thanks!


sarah June 19, 2013 at 11:18 am

Hi! I figured it out, but will be watching more of your videos! Thanks!


Don Campbell June 19, 2013 at 11:26 am

That’s great sarah – your website is very nice.


Nadine Herring August 5, 2013 at 1:09 pm

Hi Don, thank you so much for posting this extremely helpful post; your instructions were extremely easy to follow and took me about 5 minutes to do!!


Vanessa September 18, 2013 at 8:14 pm

Thank you! I found this very helpful, and I succeeded in adding an image to my sidebar.


Ronald September 19, 2013 at 4:18 am

Where do I get the html ‘snippet’ you mentioned? What is it supposed to look like?


Ronald September 19, 2013 at 4:30 am

Hi again Don!

Sorry about that! I found where you had left the ‘snippet’. Thanks!


Lorin September 28, 2013 at 12:21 am

Thanks you so much – loved this tutorial!


Jackie October 14, 2013 at 3:24 pm

Thanks so much! After lots of searching for the right code, I found it here!


Michael Kelly November 4, 2013 at 9:19 am

Worked great. I had a feeling this was the way, but was not sure if WP would strip the HTML away! Thanks.


robin November 14, 2013 at 9:18 am

Thanks! I am off to give it a try!


Kalen Delaney December 28, 2013 at 7:04 pm

Thank you!!!! I was able to follow along as you described the process, and by the time you were done, I had my image at the top of my sidebar. This solution was very easy to find with an online search also.


Ashleigh January 22, 2014 at 6:26 pm

I’m making a website for a friend who is a singer and thanks to Don’s help in a previous video I now know how to add the link but I think I am still missing something because I am struggling to add the image to that link. I have the twitter image in this case saved and I think I copied the correct URL to go with it. Then I have to “Just put the URL of your image in between the quotes of the image source tag” but where is the image source tag? Thanks guys. P.S. Thanks for uploading videos Don, you’re very helpful.


Don Campbell January 22, 2014 at 10:00 pm

Hi Ashleigh,
Where is your image stored? You can upload the image to WordPress in the Media Gallery, and then grab the URL from there.


Ruby February 28, 2014 at 9:54 am

The first few times, I realized I had to resize my image first.
Worked like a charm! Thanks so much :)


Cynthia Smith March 28, 2014 at 12:03 pm

It worked, thanks! Now, how do I just add the sidebar picture to my blog page, and not every page?


Marti April 23, 2014 at 8:55 am

Thanks so much! Being a non-techie person, I would have never figured this out on my own. Thank you for sharing.


maya May 2, 2014 at 5:41 pm

Mines not working? I followed the instruction but when i saved the widget there was no picture? Just the URL link from the picture? I copied the snippet and pasted it into it as well and i resized the image but it still isn’t working, please help!


kate May 15, 2014 at 2:03 pm

how do I adjust the code so that when they click on the image it opens up another webpage?


phil June 24, 2014 at 1:55 pm

really good and simple explanation. thanks!


Camille October 16, 2014 at 12:08 pm

For some reason, when I hit SAVE after adding the text and image URL, the image URL is deleted from the text. Weird. The title remains, so on my site, only the title appears, not the image. How can I prevent that?


MartiDIY January 2, 2015 at 10:34 pm

Thanks Don, that did just what I needed.


Leave a Comment

Previous post:

Next post: