Do you want to add an image to the WordPress sidebar widget? Don’t ignore this article, we bring you a step-by-step guide with various methods. Keep reading.
Introduction
Sidebars are regarded as one of the important parts of your website design. At this position, you can add a lot of vital information, advertisement, as well as products previews to draw visitors’ attention. And images are no exceptions, WordPress also allows you to add images on your sidebar to meet your various purposes. However, many users still don’t take advantage of this feature to boost their website’s development.
For this reason, in today’s tutorial, we teach you how to add an image to the WordPress sidebar widget with many versatile methods. Now, don’t waste your time, let’s go over the following ways.
How to add an image to the WordPress sidebar widget?
Method 1: Using the default WordPress image widget
Using the default image widget is the simplest way to help you add an image in WordPress.
Firstly, you just go to the Appearance > Widgets page from your dashboard menu. Then simply add the “Image” widget to your sidebar.
Immediately, the widget will expand and you will see the “Add image” button. First of all, you need to give your image widget a title and then click on the “Add Image” button to upload an image from your computer or choose one from existing images in the WordPress media library.
After uploading your image to the WordPress media library, let’s take a look at the right column. From here, you can add a title and alt text for your image, add a caption, add a description, select a size, and add a link.
Once you are finished, simply click on the “Add to widget” button to save your changes. Now, the preview of the image will be displayed in the widget settings area.
Once you are done, don’t forget to click on the “Save” button and go to your site to see the result.
Method 2: Using the custom text widget
Sometimes, if you want to add an image with custom HTML or text with formatting, this method is a perfect choice for you.
To use this custom text widget, similarly, you need to go to the Appearance > Widgets page and drag the “Text” widget from a list of available widgets to your sidebar.
Under the text widget, there is an “Add Media” button, let’s click on this button to move to the media uploader where you upload or choose an image from available images in your media library.
Next, click on the “Insert into Post” button and then you will see the preview of your selected image in the text widget settings.
Now, you can add your text as well as other elements to the text widget. Have a look at the toolbar above the text editor, you will see some basic formatting buttons. You can use them to format your text.
Once you are completed, don’t forget to click on the “Save” button to save your widget settings.
Now, it’s time for you to visit your website and see the sidebar image in action.
Method 3: Using the Image Widget plugin
Instead of using the default image and text widget, you can also use the Image Widget plugin. This tool is one of the useful WordPress widget plugins that allows you to add an image to your sidebar easily without requiring any coding knowledge. Moreover, it also comes with a wide range of cool features.
Initially, to use this tool, you need to install and activate it.
Simply go to Plugins > Add New and then type the plugin’s name on the search bar. Once the plugin appears, quickly click on the “Install Now” button and Activate it.
Upon activation, now there is a new image widget added to your list of available widgets. Simply drag it to your sidebar.
Then, click on the “Select image” button to upload an image from your computer or choose one from your media library. These steps are similar to the process of using the default image widget.
After clicking on the “Insert to Widget” button, you will see the image preview under widget settings.
From here, you can add a title, alt text, and type a caption for your image.
Keep scrolling down the widget settings, there are other options such as turning the image into a link, changing the size, align the image.
Once you are done, don’t forget to click on the “Save” button.
Now you should be able to see your image in the sidebar of your site.
Method 4: Manually adding an image in WordPress sidebar widget
The final measure will be suitable for those who want to add additional HTML code to your image.
First of all, you need to upload the image to your WordPress media library. You can go to Media > Add New to do that.
Once the image has been uploaded yet, simply click on the “Edit” link displayed next to the image.
This takes you to the “Edit Media” page where you can get the image URL on the right column of the page. Let’s copy this URL to use for the next steps.
Now, you need to go to the Appearance > Widgets page and add the “Custom HTML” widget to your sidebar.
In the content area of the widget, you need to add your image using the following code.
<img src="here is your image URL" alt="Design Background" />
The “img” tag in the code is used to display images. Additionally, this code also includes two attributes that are “src” and “alt“. You need to replace the alternate text in the code with your own alt.
Your final img tag will look something like this:
<img src="http://167.99.78.217/blog/vy/wp-content/uploads/2021/12/design-background.jpg"
alt="Design Background" />
Finally, don’t forget to click on the “Save” button before leaving the widget page and then visit your site to see the result.
Final thoughts
We have provided you with the 4 easiest methods to easily add an image to the WordPress sidebar widget. Hopefully, you can choose your favorite measure to handle your problems. Additionally, if you have any questions or queries, don’t forget to leave a comment below, we will support you as soon as possible.
Furthermore, you can spend a little time visiting our Free WordPress Themes to explore massive modern, professional designs for your website.
- What are joomla tags and how are the used? - November 3, 2024
- Why and how to create hidden menu items in Joomla? - October 31, 2024
- How to publish smartslider 3 to joomla 4? - October 31, 2024
Recent Comments