Last Updated:
There comes a time when you may want to:
- Add a custom image to your WordPress sidebar as a clickable image that can lead to a downloadable document or a web page destination or
- Have an image on your sidebar to display your profile picture or
- You might want to promote some product and give a hyperlink to the image which can take your visitors to the product download page.
Did any of the above points express your current situation? If yes, you will have your answer in this post.
How to add an image in WordPress sidebar widget
Though you have to work with a little bit of HTML tags here, don’t worry we’ll try and make it as simple as possible.
What are the HTML tags and attributes used to show an image on the WordPress sidebar?
- “a” tag,
- “href” attribute,
- “target” attribute,
- “img” tag,
- “src” and “alt” attributes.
These are the 6 HTML nuts and bolts required for our setup.
The ‘img’ tag has 2 attributes: ‘src’ and ‘alt’. ‘src’ will take in the hyperlink to your image and ‘alt’ takes care of the alternate name for the image. And, the ‘a’ tag takes care of the hyperlinking (clicking on image) part wherein ‘href’ will handle the hyperlink part and the ‘target’ attribute will ensure that the destination link is opened in a new or separate tab or window.
Before we begin, get the image you want, uploaded and ensure you have a direct hyperlink to it. If you don’t know how to do that, here is a post I have written on how to use Dropbox to host your images. Else, see the blue box below on how to add media to your WordPress blog. I prefer the Dropbox way as it is more effective in terms of page speed and also I need not fill my hosting service provider with images and keep filling my hosting space.
Go to Media > Add New to upload your image. After uploading, click on ‘Edit’ – then you can give your file name, alt and caption attributes. Now, copy the hyperlink to your uploaded image from the right side of the screen.
On your WordPress widget area, click on the widget you want to use to display your image – it could be your sidebar, header or footer area. For this post, we will use the sidebar area.
Use the below code: Just insert the hyperlinks as applicable to you. Only change text that are given in bold. Leave the rest as is.
<a href=”insert your hyperlink here” target=”_blank”><img src=”insert your image URL here” alt=”sample image”/></a>
We hope this article helped you in solving your problem on adding an image to your WordPress sidebar. If you liked it, please share it with your colleagues and friends using ‘sharing’ options given in this page.
