How to Add an Image to Your WordPress Sidebar

by on January 21, 2010 · 87 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.

Like what you read?

If so, please join over 10,000 people who receive exclusive weekly online business and blogging tips, and get a FREE COPY of my eBook, 10 Steps to Free Website Traffic! Just enter your name and email below:

Subscribe Now

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 278 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

{ 87 comments… read them below or add one }

Charlotte February 27, 2013 at 5:28 am

Thank you! so so helpful!:)

Reply

Bernie March 14, 2013 at 2:12 am

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

Reply

Tina March 20, 2013 at 5:26 pm

Thank you so much!

Reply

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!

Reply

Abhishek April 25, 2013 at 5:16 am

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

Reply

Jacky April 29, 2013 at 6:35 am

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

Reply

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

Reply

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: http://note.io/12KJV4M

Reply

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?

Reply

Don Campbell June 19, 2013 at 11:26 am

Hi rhonda, take a look at this screenshot to see how to add the link: http://note.io/12KJV4M

Reply

George June 18, 2013 at 12:31 am

Great stuff. You make it so simple to follow

Reply

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!

Reply

sarah June 19, 2013 at 11:18 am

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

Reply

Don Campbell June 19, 2013 at 11:26 am

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

Reply

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!!

Reply

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.

Reply

Ronald September 19, 2013 at 4:18 am

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

Reply

Ronald September 19, 2013 at 4:30 am

Hi again Don!

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

Reply

Lorin September 28, 2013 at 12:21 am

Thanks you so much – loved this tutorial!

Reply

Jackie October 14, 2013 at 3:24 pm

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

Reply

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.

Reply

robin November 14, 2013 at 9:18 am

Thanks! I am off to give it a try!

Reply

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.

Reply

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.

Reply

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.

Reply

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 :)

Reply

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?

Reply

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.

Reply

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!

Reply

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?

Reply

Leave a Comment

Previous post:

Next post: