Sidebars are an integral part of your website design. The amount of vital information, advertisements or product previews you can place them can impact your website’s viewer reception quite a lot. Similarly, Images placed on your sidebar can serve various purposes and are quite versatile. Thus, your website can benefit from a lot if you were able to insert relevant images in sidebar widgets.
However, users might find themselves at a loss trying to enable this function. We can’t expect everyone to be a tech-savvy, not when the WordPress industry has become this huge encompassing pool of various kinds of content makers, designers and bloggers.
As so, Beautiful Themes presents you with this detailed guide made to help you add an image to WordPress sidebar using WordPress image widgets.
In this tutorial, we will provide you with two different methods to insert images onto the sidebar:
1. Using the default WordPress Image Widget
By default, WordPress provides you with a native Image widget to place images onto your sidebar. Thus, by using the default image widget, we can enable sidebar pictures and images. To place this widget on your sidebar simply click or hover over the Appearance listing on your WordPress dashboard. Then click on Widgets to open the widget management page.
Here on the column on the left, search for a widget named ‘Image.’ Once you find it, click on it and then click on Sidebar on the options provided. Then click on Add Widget to insert the widget onto the sidebar.
Now click on the Image widget that has been added to the sidebar on the right. Here you can insert the Image’s title and upload an Image from your website’s Gallery.
Simply click on the Image section that may say “No image selected” to insert the image and once you have the image selected click on Add Image. Once the image has been added and the Title has been set, click on Done to set up the image widget.
As an additional reminder, you can also arrange the Widgets on the sidebar widgets as well. Simply drag your image widget or any other widget to the required location. You can learn more about WordPress widgets and how to manage them here.
2. Adding Images to the sidebar using WordPress Plugins:
While placing an Image on the sidebar using the native method is quite easy, you can streamline the process even more by using dedicated plugins. These plugins and widgets are created for the sole purpose of adding Images to the sidebar and add more features such as Image resizing and alignment, adding Description and more. Some plugins even add additional features such as Advertisement images, Call to action buttons, image sliders and Shortcodes features.
These plugins are extremely easy to use and do not require any HTML code understanding to customize. Some of our personal recommendations regarding WordPress image widgets are:
Simple Image Widget
Like its name suggests, Simple Image Widget is a free widget that can help you add an image to WordPress sidebars. The plugin itself is highly versatile and has extensive options that allow you to add more to your sidebar images. This includes hyperlinking using images along with link texts, description texts and size management.
The widget itself is extremely lightweight and is built to be compatible to any kind of sidebar or theme design. The clean and ‘simple’ widget is definitely a choice if you just want a functional Sidebar image widget that doesn’t require a lot of settings modification.
- Extremely easy to enable and insert images on sidebars
- Adds extensive options such as Image hyperlinks, description texts and image Titles
- Allows resizing to fit the sidebar perfectly.
Swifty Image widget
This powerful WordPress image widget tool lets users place multiple images onto the sidebar or other preferred positions and provide more modifications to the image compared to the native image widget. This includes caption text, defined image sizes, hyperlink on images with no follow tags. You are free to add multiple images using this single widget manage their positions by simply dragging and dropping the images.
- Allows users to place multiple images, Image banners and Adblock bypassing advertisements
- Provides settings to set defined image sizes based on theme and custom image sizes for resizing
- Tons of image modification and extension settings such as image resizing, image alignment, captions, links, and more.
Widget Content Blocks
Widget Content Blocks is more versatile and multidimensional than a sidebar image widget. The plugin allows you to create widget blocks as if you were making a post with the various WordPress editor settings. This allows you to place dynamic images with more content on them and edit their style using WordPress’ visual editor. Easily enable blockquotes, lists, textual content and more alongside your sidebar images using Widget content blocks.
Of course, the plugin also allows you to hyperlink the blocks with inner pages and posts if necessary. Shortcodes can also be used inside the widget blocks and the entire plugin is extremely easy to use.
- Provides Widget blocks for adding images, blockquotes, listings, paragraphs, and more.
- Easily modifiable image features using the WordPress visual editor.
- Extremely lightweight and doesn’t require HTML knowledge to use and modify.
Using the Third party WordPress Image Widget:
While all these plugins are completely viable options and work flawlessly, for this tutorial we will be using Swifty Image widget as the widget provides tons of cool features while still remaining user-friendly.
Adding an image widget box:
So first, you need to install the Plugin to start. To learn how to do so, consider reading this article that explains how to install WordPress plugins.
Once the plugin is installed, open the Widgets customization page by hovering over Appearance and clicking on Widgets.
Then, look for the Swift Image Widget on the left column of Widget options. Click on it and choose the Sidebar option. Clicking on Add widget after this should add the Widget to the sidebar Widget list on the right.
Check the Sidebar column on the right and expand it, if needs be, by clicking on the Drop-down button. Users can then find the Swifty image widget listing on the column. You are free to drag this Widget to any position on the Sidebar by simply dragging and dropping the widget.
Adding images to the widget
Now before you insert the image, enter the Title for the image and set the size for the image to be displayed on the sidebar.
Swifty Image widget allows you to use an already defined image size provided by your theme. If you don’t find the right size settings here, you can also add your own preferred image size by clicking on Custom size on the drop-down list.
Choose the appropriate Image alignment and then click on Add new image to insert an Image box. Click on Add image and then choose the required image from your Image Gallery and click on Use this image to set it.
As additional settings, the Widget also lets you place an Image link as well as Caption if required. We suggest our users check out these features as well. Simply enter the appropriate links and caption text which will then show up accordingly on your sidebar. As a further note, you can also set whether your image link will open the link on a new tab and contains No-follow attribute.
We previously discussed this but Swifty Image widget also lets you place multiple images under a single widget box setting. To add new images, simply click on Add new image and repeat the image upload step as above.
Click on Done once you are finished with modifying your Image widget and the images should appear on your website sidebar accordingly.
Thus by using the default Image widget or using designated Third-party plugins, you add images to WordPress sidebars. Remember that these images might require some editing and modifications to fit your sidebars. Consider the appropriate size for the images and optimize them for better results.
Similarly, if you want to learn more about WordPress widgets and add more nifty elements to your website, check out some of our other articles:
- How to add a Print button to your WordPress website
- Beginner’s guide to turning the WordPress header into an image slideshow
- How to add Social Media Icons to WordPress