How to Add an Image in a WordPress Sidebar

A very common question amongst WordPress bloggers & site owners is “How do I add an image to my WordPress sidebar?” For a platform that makes publishing content so easy, you’d think there was an easy answer.

Up until now, there were basically two options:

• install a plugin
• learn a little bit of HTML code

As of WordPress 4.8, you can now add an image to your WordPress sidebar using the new image widget. No additional plugins. No coding required.

In this article, I’m going to include instructions for all 3 methods. For most sites, I recommend using the new WordPress image widget. However, if you want advanced control over the styling of your image, you might want to consider one of the other options.

3 Options

There are 3 ways to add an image to your WordPress sidebar:

• The WordPress image widget
• The WordPress text widget
• Use a WordPress plugin

The WordPress image widget is recommended in most cases, especially if you are not that technical, and just want something basic.

The WordPress text widget is for those who understand basic HTML code and/or would like more advanced control.

Using a WordPress plugin could be beneficial for a number of specific use-cases. Image slideshows, image lightboxes, etc. I’ll talk about a few good options later on in the article.

01 Using the WordPress Image Widget

The WordPress image widget was introduced in WordPress 4.8 (alongside the video & audio widgets). It uses the default WordPress media library. If you’ve ever added an image in one of your posts, you should feel very comfortable with this process.

I’m going to use the WordPress Customizer, which allows you to preview your site in real-time. However, you could perform all of the following steps from the Appearance > Widgets page, as well.

In a hurry? Watch our video on how to use the new WordPress image widget:

• Navigate to Appearance > Customize

• In the left sidebar, click on Widgets

You might have more than one option to choose from here. Each theme can create as many sidebar areas as they’d like. It is common for most themes to have a main sidebar, and 1-4 footer sidebar areas. Hopefully, they are labeled appropriately. If not, this is where the Customizer comes into play. You’ll be able to see exactly where each of your sidebars is located within your theme.

• Click on the sidebar in which you want to add an image

• Click the “Add a widget” button

You can use the search box at the top and type “image,” or just scroll down until you see the image widget. When you find it, simply click on it.

• (optional) Provide a title for your image. The title will appear above the image, typically in a larger font size.
• Click the “Add Image” button to open your Media Library

Now you have 3 different ways you can add an image:

• use an existing image you’ve already uploaded to your Media Library
• upload a new image from your computer
• add an image from another website by using its URL

Warning: Be careful adding images from other websites. At any time, that website could remove the image without you knowing, which would make it disappear from your site as well. And doing so actually costs the other website money because you are using its server resources instead of your own. It’s a best practice to ask for permission, then download the image, upload it to your own site, and provide a link back to the site in which you found it.

Use an existing image from your Media Library

The media popup should default to displaying all the images in your Media Library.

• Simply click on any image
• Then click the “Add to Widget” button

Upload a new image

• In the top-left corner, click on the “Upload Files” tab
• Drag & drop an image onto the screen -or- click “Select Files” and choose an image from your computer
• Then click the “Add to Widget” button

Add an image from a URL (not recommended)

• In the left sidebar, click on the “Insert from URL” link
• Enter the URL to the image
• You can leave the other options blank for now. I’ll show you how to adjust them in the next step.
• Then click the “Add to Widget” button

The final step is to publish your changes. Look for a button in the top-left corner of the Customizer that says Save & Publish. Click that button to make your image live.

That’s the bare minimum to add an image to your WordPress sidebar. However, I recommend you set the following options to optimize your image.

WordPress Image Widget Options

You should see a nice preview of your image right there in the widget.

• Click “Edit Image” to access a few options

Let’s go over the available options:

• Caption (optional): A small caption that will appear directly below the image.
• Alternative Text (recommended): A description of the image, most commonly used by screen readers to read aloud to vision impaired users.
• Size: The width & height of the image. Most themes will prevent the image from overflowing outside of the sidebar area, however, you might want to choose a smaller size.
• Link To (optional): If you want the image to link somewhere, you have a few options.
  • None: No link
  • Media File: This will open the original, full-size image
  • Attachment Page: Most themes do not utilize attachment pages, so this option will rarely be used. I’ll probably only confuse you if I try to explain it.
  • Custom URL: Use this to link to another page on your website, or any other site on the web
• Advanced Options: These are for advanced users. If you don’t know what they mean, it’s best to leave them blank. But I’ll quickly go over them.
  • Image Title Attribute: Adds an HTML title="" attribute to the <img> tag
  • Image CSS Class: Adds a class to the <img> tag. Ex: <img class="rounded" src="" />
  • Open link in a new tab: Adds target="_blank" to the <a> tag, which will open the link in a new tab
  • Link Rel: Adds an HTML rel="" attribute to the <a> tag
  • Link CSS Class: Adds a class to the <a> tag

02 Using the WordPress Text Widget

Using the text widget to insert an image into your WordPress sidebar allows for more control and customization over the HTML code. If you need to add extra HTML, data attributes, or manipulate the code in another way, this is the way to go.

You’ll follow the same steps as above, but this time, instead of choosing the Image widget, you’ll search for and choose the Text widget.

You’ll need to switch over from the Visual tab to the Text tab.

And now you can enter the custom HTML code to insert your image.

For just a standard image…

<img src="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg" alt="Describe your image" />

For an image that links to another page or website…

<a href="https://www.google.com/"><img src="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg" alt="Describe your image" /></a>

For an image that links to the original, full-size image…

<a href="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg"><img src="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg" alt="Describe your image" /></a>

You can switch back to the Visual tab to see a preview of the image. This will let you know that your HTML code is correct.

If you are looking to do something else (not mentioned above) with an image in your WordPress sidebar, let me know in the comments, and I’ll try to provide you with a code sample.

03 Using a WordPress Plugin

The previous two methods cover a large majority of the functionality that most sites need, in terms of adding an image to your sidebar. I highly recommend using one of the previous options over installing a plugin.

However, if you’re looking to do something really advanced with the images in your sidebar, I’ll talk about one of the best plugins for the job—Image Widget Plus by Modern Tribe.

Image Widget Plus features include:

• insert a slideshow of images in your sidebar
• open sidebar images in a lightbox
• display a different/random image on each page load

And here are some screenshots of the plugin in action:

I have to mention that Image Widget Plus is a premium plugin. As of May 2017, it costs $29. But if you’re looking for any of the features mentioned above, I don’t think you’ll find a more high quality plugin than this one. The folks at Modern Tribe produce great work, and have developed several other popular and well-respected plugins, most notably The Events Calendar.

Get Image Widget Plus

That covers the 3 main ways to add an image to your WordPress sidebar.

Did I leave out a method you’re currently using? Please let me know in the comments.