Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add an Image in WordPress Sidebar Widget

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add an image to a sidebar widget in WordPress?

By default, WordPress makes it easy to upload and add images anywhere on your website. You can add them to sidebar widgets just as easily as you can to pages or blog posts.

In this article, we will show you how to easily add an image to your WordPress sidebar widget.

How to add an image in WordPress sidebar widget

We will share multiple methods so you can use one that works best for your WordPress site.

Simply click the links below to jump ahead to your preferred section:

Adding an Image in WordPress Using Image Widget Block

You can use an image widget block to add images to your site’s sidebar.

The widgets block editor was introduced in WordPress 5.8, and it replicates the experience of using the WordPress content editor. You can use different blocks to add forms, related posts, pictures, and other elements to the widgets area using blocks.

To start, you will need to visit the Appearance » Widgets page from your WordPress dashboard. After that, simply click the ‘+’ button and add an image widgets block.

Add an image widgets block

Next, you can add an image in the widget block using 3 ways.

For instance, you upload an image, choose an existing image from your WordPress media library, or insert the image from a URL.

Upload image in widget block

In the widget block editor, you’ll also get options to change the style, add an alt-text, and edit the image size.

There are settings to change the image border and other advanced settings.

Edit image widget block settings

When you’re done, don’t forget to click the ‘Update’ button.

Next, you can visit your website and see the image in the sidebar.

View image in sidebar

Adding an Image in WordPress Classic Widget Area

If you are using an older version of WordPress or you’ve disabled widgets blocks, then you can also easily add an image to the sidebar.

Simply go to the Appearance » Widgets page from your WordPress admin panel and add the ‘Image’ widget to your sidebar. If you haven’t used widgets before, then see our guide on how to add and use widgets in WordPress.

Add image widget

The widget will expand, and you will be able to see its settings.

The first option is to add a title to the image widget. After that, click on the ‘Add Image’ button to continue.

This will bring up the WordPress media uploader, where you can click on the upload files button to upload your image or select an image you have previously uploaded.

Image settings

After uploading the image, you will see the image settings in the right column. From here, you can provide a title or alt text for the image, add a description, select size, or even add a link.

Once you are done, you can click on the ‘Add to Widget’ button to save your changes. You will now see a preview of the image inside the widget settings area.

Widget preview

Don’t forget to click on the ‘Save’ button to save your image widget.

You can now visit your website to see the image displayed on your WordPress blog’s sidebar.

Sidebar image preview

Manually Adding an Image in WordPress Sidebar Widget

In some cases, you may need to add additional HTML code to your image. The default text widget allows some very basic HTML, but it may not work with advanced HTML or formatting. In that case, you will need to manually add an image to your blog’s sidebar.

First, you need to upload the image to your WordPress site. Simply go to Media » Add New and upload your image file.

After uploading the image, you need to click on the Edit link next to the image.

Edit uploaded image

WordPress will now take you to the ‘Edit Media’ page, where you will see the image file URL on the right side of the screen.

You need to copy this URL and paste it into a text editor like Notepad.

Copy image file URL

Next, you need to go to the Appearance » Widgets screen from your WordPress dashboard.

After that, you can add the ‘Custom HTML’ widget block to your sidebar where you want to display the image.

Add custom html widget block

In the text box area of the widget, you need to add your image using this code:

<img src="Paste The File URL Here" alt="Strawberries" />

The img tag is used in HTML to display images. It needs two attributes. The first one is src , which defines the image file location. This is where you will paste the URL you copied earlier.

The second one is alt which is used to provide an alternate text for the image. Your final image tag will look something like this:

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

You need to click on the ‘Update’ button to store your widget settings and then preview your website.

Adding an Image in WordPress Sidebar Using a Plugin

Are you wondering how to add a photo widget using a WordPress plugin?

Another way to add images to your WordPress sidebar is by using a plugin. This will give you a few more options and a simple interface, which some beginners may find easier than the default ‘Image’ widget.

First, you need to install and activate the Image Widget plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, simply go to the Appearance » Widgets page and add the ‘Image Widget’ block.

Add image widget block

Next, click on the ‘Select Image’ button to upload an image or select one from the media library.

After that, you need to click on the ‘Insert to Widget’ button, and you will see the image preview under the widget settings.

Select an image from library

You can add a title or alt text, as well as a link and caption for the image.

You can also choose an image size from the list of available options, edit the alignment, and more.

Add title and alt text

Once you are satisfied, simply click on the Update button to save the image widget. That’s all. You can now go to your website and see the image displayed in your sidebar.

We hope this article helped you add an image to the WordPress sidebar widget. If you come across a problem, don’t forget to look at our guide on how to fix common image issues in WordPress and the best design software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

51 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Holly says

    Hi,

    I just submitted a question about my image only showing up on the home page and not other pages on the site. I resolved my issue and wanted to share the solution in case it helps someone else. I was trying to use the Custom HTML widget to SHOW a couple of images to my Content Sidebar and when I specifically configured the addition of the pages I wanted to show, (leaving “Match all” UNchecked), the images only showed up on the Home page.

    The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages. :-)

    Thank you,
    Holly

  3. Holly says

    Hi,

    I got the custom HTML widget working on the home page but the images are not showing up on the other static pages. I configured the settings to “Show if” my desired pages are selected but the image only shows up on the home page. I’ve tried deleting and re-adding the widget and removing and re-adding pages. Any ideas?

    Thank you!
    Holly

    • WPBeginner Support says

      Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show :)

      Admin

  4. Alice says

    Hi, I am trying to add the picture and have it show up in the upper left corner of the post. When I add it and preview everything is there but when I publish it is not there. Any ideas?

  5. Kathy Turner says

    I have added an image to my footer and in Chrome on a desktop it appears and then immediately disappears. I have reduced the size, I have tried adding it as an image in html but nothing solves the problem. On chrome on my mobile it is fine. I don’t have adblock on my desktop. The problem also occurs with Firefox but Microsoft Edge all works fine. Any ideas?

  6. harika says

    hi i have created blog in wordpress but posting content language is telugu.i want to change the font style of telugu post how?

  7. Micky says

    Hi there,

    I’ve tried both mehods listed in this video, and still the sidebar image is not showing up at all.

    Any ideas on how I could trouble shoot this?

    Thanks!

  8. Krishna says

    Is there any way I can set the image so that the image is displayed only on the start / home page?

  9. Rebecca Claxton says

    Thanks for always being top of random searches I do for WordPress stuff – and thanks for the useful info suitable for everyday folk using WP!

  10. Karthik Marripoodi says

    Thanks for writing about this in detail. I want to put my ads on the widget section. This method will perfectly suit my requirement. But I just have one problem. How to add different image for different blog posts. Is there a way to do that?

  11. Mark says

    I believe the video said “Alt tag”. That wouldn’t be the correct terminology – it would be the Alt Attribute of the tag.

  12. Victoria says

    Love this tutorial, however I am skeptical to download the image widget because it says that it is untested with my version of WordPress. Will there be updates coming soon or how does it get tested with my version of WordPress?

  13. melessa says

    Hi, I hope I didn’t overlook it somewhere in the comments, but how do you put a circular or oval instead of square image for the about me in side bar? I’m using divi by elegant themes.

  14. Rod says

    Hi,

    Any idea why bullet points wouldn’t show up in the sidebar widgets despite having taken off “list-style-type: none” from the css file and replaced it with the following code and it still doesn’t work:

    .widget ul li { list-style: circle }

  15. David says

    wow! spot on. The visual text is too much work for just a plain image. I have been looking for a plugin that does exactly this. thanks a lot

  16. Jana says

    Hi,
    I have a couple of questions. First, I am having trouble installing the Widget Image plugin for some reason. I’ve installed plugins before but I can’t seem to do this one. Granted, I’m a beginner and I added them almost a year ago so maybe I’ve forgotten something. Can you give me any tips?

    Also, believe it or not, I got a picture on my widget using the html coding! (Surprised I could code, but you made it very easy and understandable) The only problem I have is that it is full size and I’m hoping to have thumbnails. Is there code for that? If so, I don’t need to install the plugin.
    Thanks!

  17. James McAllister says

    I had a read at this to try and update the image I have on a widget on my blog.

    Are you guys on the same planet as the rest of us? Have a read at what you wrote – you’d have to be a Philadelphia lawyer crossed with Steve Jobs to understand the instructions.

    Anyway – back to trying to change the image, I’m sure the trick is in there somewhere.

  18. Marvis says

    Thank you so much for this info. But i really need to know how to display google ads on my posts and sidebar as well. I have an approved adsense account already and i have generated the ad code. But the next step to take is what i don’t get. I need help please.

  19. Abbie says

    Either I have overlooked many things you have talked about or the site has changed. I do see an option for an image widget which you state does not exist. I do not see any media or gallery to which I can upload an image file.

    So, where do I upload the file so I can get a URL to put in the necessary place on the form to set up the image widget?

  20. Erica says

    Hi there. I know how to get the images in the sidebar, but they take up too much space so I am trying to do a click-through gallery here. I get the little click-through box, but no images show. I was also able to do an auto-slideshow, but it is very distracting so I don’t want that. I just want the photo gallery that you click through to the next image, but I can’t find anything on how to fix this here.

  21. Giulia says

    Hi,

    I am having an issue adding image widgets. When I try adding a new one (after having deleted one too) the changes don’t save, the page stops loading, and when I try to access the site (admin and normal) it says can’t connect to server – so basically my site is down. I restarted my computer and installed updates and this solved it the first time, but when I tried adding the widget again the same thing happened, except restarting doesn’t seem to help anymore!

    Please help! I would really appreciate it!

    Thanks in advance!

  22. Gregor Egan says

    Hi, Thanks for that, it works a treat. I have a question; I don’t want the same image to appear on every page so how to I restrict it to a particular page so that I can use a different image on subsequent pages.

    Regards,

    Gregor

  23. Lee says

    Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful. :-)

  24. Sheryl Anderson says

    I have the image in the widget – what I want to know is how to point that widget to an opt-in form – how do you add that code

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.