PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add an Image to WordPress Sidebar Widgets

How to Add an Image to WordPress Sidebar Widgets

As sidebar widgets are a very important function for WordPress websites that makes your site more attractive and information highlighted, you may want to add images to them to increase the functionality. For those who are not knowledgeable enough about how to manage and customize WordPress sidebar with images, we now prepare this tutorial for help.

As for the approaches to add an image to sidebar widgets, there are two ways: manual adding and adding though Image Widget plugin. And this tutorial will introduce the two ways step by step.

Adding Images Manually

Adding an image manually sounds time-consuming and low-efficient, but actually, it does not. Just through the few steps presented below, you can get the task done easily.

Upload Images

In order to add images to a widget, first of all, you need to upload an image to the website. When you log in your dashboard, you may find many sections under “Dashboard”, one of which is “Media”. Then, you should click “Media” and select “Add New”, through which you can drop an image to upload. But all websites have file size limitation, you should have that in mind. If your image is larger than the maximum file size, it cannot be uploaded.

Upload Images

When the image file is uploaded successfully, you can find an “Edit” link on the upload page. Clicking on the link, you can see detailed information about this image including file name, title and so on. But you should focus on “URL” because that is the location of the image, which plays the similar role as your ID card. Through the URL information, your website can find that particular image and makes it show along with the widget. Now, just copy that URL. Make sure that you have copied the complete URL information.

Image URL

Add the Image to a Sidebar Widget

Now, you should go to “Appearance” under “Dashboard” and choose “Widgets “. Then you need to select “Text” under “Available Widgets” and drag it to the sidebar. In the text box, you should use the code below to display your image.

<img src="ImageURL" alt="eCommerce" />

This code consists of src and alt tags. The former tag is used to locate your image and you should paste the URL you copied to replace “ImageURL”. The later one is used to describe the image. For example, this example image is used to state that this image is about eCommerce, so the alt tag is “eCommerce”. After editing the text widget, you just need to click “Save” and then your image is added to that widget.

Add an Image to Text Widget

Add the Image Through Image Widget Plugin

If you do not like the manual adding process, that’s OK. Just let the Image Widget plugin help to ease procedures. There are less steps through plugins and quick to reach the goal.

Install and Activate Image Widget Plugin

If you want to save trouble by using plugin, you can install the plugin in the WordPress dashboard directly. You need to go to “Plugins” under “Dashboard”. Click “Add New” and search the plugin. Then, you just need to click “Install Now”, and you can find the plugin is installed successfully.

Install Image Widget Plugin

Add an Image Widget

After activation, when you go to “Appearance”, you can find an “Image Widgets” under “Available Widgets”. Just drag that widget to sidebar, which is the same as manually adding.

Image Widget

Upload Images

Now, things are much easier. You don’t need to go to “Media” to upload image and copy URL. Right under “Image Wiget”, you can upload images through “Select An Image”.

Select Image

After that, your image is previewed on the page with some settings under the image. Here you can add the image title, alt tag, caption, and give some other configurations. Just set your image and click “Save” then. Done!

Image Settings


Both approaches are easy to use. After all, they are not as complicated as web hosting technologies. Just a few steps, your image is added to sidebar widgets. So, you just need to choose an approach that suits you better.