Have you ever planned to add an image to your sidebar widget in WordPress? Due to the ease of use of WordPress and being open source, WordPress always makes it simple to upload as well as add images in any places on your site based on WordPress.
In the following article, we are to display you how to add an image to your sidebar widget in WordPress. There are server different ways to do this, and we choose four popular and simple ones to explain the process, so that you can use one of them according to your preference and demands.
Use The Image Widget to Add an Image in WordPress Sidebar Widget
This first and also the easiest method of adding an image in your WordPress sidebar widget is to use the default widget “Image”. You just need to visit “Appearance”>> “Widgets” page on which you will see various available widgets. You can find “Image” widget among these, and you can simply select it to add “Image” to your WordPress sidebar.
Then, this “Image” widget expands, and its settings will appear in the right field. To configure “Image” settings, the first thing is to add a title for the widget. Next, click on “Add Image” button. Now a WordPress media uploader will come in front of you, and you can use it to upload images. All you have to do is to press “upload files” button to select one you already uploaded or directly upload one image you stored on your device.
After you upload the target image, you can find the image settings in right column. In the image settings section, you are able to give a title or ALT text for your image, offer a description of it, choose a size for it, or attach a link to it.
Once you make every setting value proper, you can just click on “Add to Widget” button to store your settings. At present, you can have a preview of this image just uploaded and configured in the settings section of the Image widget.
Note that you have to press the “Save” button to keep this image widget just added. Then, you can go to your site to check out the image showed on your WordPress site’s sidebar.
Use Text Widget to Add an Image in WordPress Sidebar
We have introduced the easiest way of adding an image to WordPress sidebar widget, but if necessary, you also need to add it with formatted text or custom HTML when using this method. In this case, using Text widget to add image to WordPress sidebar will be better.
Firstly, you need go to “Appearance” >> “Widgets”, and choose “Text” widget from different available widgets on this page to add it to the sidebar. When choosing the “Text” widget, you can find the widget settings section in the right column, too. Here you can see “Add Media” button in the middle place.
Just like the “Image” widget, there will be a media uploader once you clicked on that button. This media uploader allows you to upload new image or select an image you ever uploaded and stored in WordPress media library.
Once you decide the image, you can press “Insert into Post” button. This move will make you see the image preview in its settings part.
Besides, you are allowed to add more text or other elements to this text widget. You can find some primary formatting tabs in toolbar in text editor.
Now, you have done all changes, and the last thing is to save your widget settings by clicking on “Save” button. After that, you can go to your website to view the image just added in sidebar.
Manually Add an Image in WordPress Sidebar
Sometimes, the process needs you to add extra HTML code to the image. If you are using Text widget, you are able to add very basic HTML. When you need add advanced formatting or HTML, The Text widget is enough for you. Our third method is to manually add an image to sidebar, which allows adding advanced HTML.
Differently, This method requires you upload your image to your site at first. For this, visit “Media” >> “Add New” and then upload that image file complete new image uploading to your site. After that, you just click on “Edit” link to go on.
The “Edit” link will take you to “Edit Media” page on which you can find the “File URL” of this image on the right. The URL is needed, so you need to copy it and then paste into a text editor.
Now, visit “Appearance” >> “Widgets” again. Find “Custom HTML” widget among various options to add it to your WordPress sidebar in which you are to display your image.
Next, you need use the code as following to add the image in the widget’s text box field.
In this code, you can see “img” tag used in HTML, which is to show images. Normally, the “img” tag consists of 2 attributes: the 1st one is “src” that defines the location of the image file. Also, it is the place to paste the image file URL just copied.
Well, the 2nd one is the “alt” to offer an alternate text for your image. Here is an example of the final “img” tag:
Now, you just need to save your changes by using “Save” button. After that, you can go to yout site to see the preview of the image added in sidebar.
Add an Image in WordPress Sidebar with a Plugin
The final way we want to introduce you is to use a plugin to do this. It will give you more options as well as a clean interface. For Beginners, it is will easier to use.
Naturally, you need install as well as activate Image Widget plugin at first. Upon activation, directly visit “Appearance” >> “Widgets” page. Now, you can find a new “Image Widget” in the available widgets filed. Just drag the widget and drop it to your sidebar where you plan to show an image.
Then, press “Select Image” button to select an image from your media library or directly upload a new one. Next, click on “Insert to Widget” which will offer you the preview of the image under the widget settings.
To configure the settings, you are able to add alt text, a title, or a caption for it. Besides, you can also decide the image size from the available options.
After you make every setting right, you can save them with “Save” button. Now you can go to your site to check out the image added in the sidebar.
These four methods are easy to use, you can choose one to follow as you like. If you have more questions about WordPress, you can visit our WordPress Tutorial, or leave your problems in comments.
This is so detailed that I could follow step by step. The author has showed each part and each step clearly. As I practiced the technique, I did not feel confused at all. Thank to this good guide, I learned a new skill to show personalized image in sidebar widget. For newbies, this tutorial is real good.
This is so detailed that I can follow step by step. For newbies, the authors shows each part and each step very clearly. As I practiced the technique talked in this guide, I did not feel confused. Thank to the guide and author, I learned a new skill to use image in sidebar widget to display more personalized image on my site. It is awesome.