How to Add an Image in WordPress Sidebar Widget 2022

Last Updated on August 28, 2022 by Muhammad Tabish

How to Add an Image in WordPress Sidebar Widget or in any widget 2022? – Well, Adding an image in the blog article is easy. Although, adding banners or images outside of your blog post like in the widget and footer is not that straightforward for new bloggers. When I was a new blogger, I also wonder about how to add a clickable banner in the WordPress widget while I visit someone else website and see beautiful banners in the header, sidebar, and footer that they were using to promote a special LP, Blog post or an affiliate offer.

You see, by default, WordPress doesn’t have an image widget that we can use to promote an affiliate offer or a Blog post. So as to add an image with a link, a blogger needs to add the HTML code by hand.

In this blog post, I’ll demonstrate you, how to add an image in WordPress sidebar widget Step-By-Step.​

Video Guide Step-By-Step:

If you do not want to the watch video or need more advice, then carry on reading.

How to Add an Image in WordPress Sidebar Widget Step-By Step?

First thing first, to add an image in WordPress sidebar widgets you need the link/URL of the image which may look like so:

Examples:

https://www.imagename.jpg

https://www.imagename.gif

https://www.imagename.png

.jpd, .gif, and .png are the types of images, like .gif image means an animated image. There more types of images but think about them, at least now because you just need of image link/URL that you want to add in WordPress sidebar widgets.

​There are two ways to get image link:

#1- Images outside of your blog:

Here you do not need to download that image ( if you think that image does not need to edit), just right click on it with your mouse an select the option “Open image in New Tab” , the image will be open in the new tab just copy its link from the address bar as shown in the screenshot.

#2- Upload images in the Blog:

If you want add a custom image from your computer then you can upload it in your WordPress site, Just follow the steps:

Step-1: Just go to Media » Add New and upload the image file you want. After uploading the image you can see the image URL at the right side. Now, you require to copy this link/URL and paste it in a text editor like Notepad.

Now you have to go to Appearance » Widgets screen and drag-drop a text widget to your sidebar/header/footer or where you want to display the image.

In the text box area of the widget, you have to add your image link using this code:

<img src=”Paste The Image URL Here” alt=”Here write image alternate name” />

The img is the HTML tag used to display images. It consists of two attributes, the first one is src which describes the image file location. This is where you have to paste the image URL you copied before.

The second one is alt which is also the HTML tag used to provide an alternate text for the image which will be only shown when your image won’t load due to any reason. Your final img tag will look something like this:

 <img src=”https://blogrankseo.com/wp-content/uploads/2017/12/copy-image-link.jpg  alt=”Girl-with-magic” />

Almost done, just click on the Save button to save your widget and then preview your website.

How to add Clickable Banner in the WordPress sidebar or any widget?

Above you see how to add an image in WordPress sidebar step-by-step and now if you wondering how to add a clickable image in WordPress sidebar or even if you’re using Blogger platform then you can employ this technique to add a linked image with the affiliate link, blog post or any landing page.

As you see in the screenshot of my blog’s footer are the banner I added is of One of the best WordPress web hosting that I use for this blog and when you’ll click on it it’ll redirect to web hosting website that because of the image is linked with the hosting site URL (it’s an affiliate link/URL).

Video Guide Step-By-Step:

If you do not want to the watch video or need more advice, then carry on reading.

By making use of above HTML code we just added a simple image without link and in order to add an image with link to affiliate product or anything you just need to use below steps and HTML code to make it happen smoothly.

 <a href=”Here Paste the link of affiliate or blog post” target=”_blank”><img src=”Paste the Image link here” alt=”Alternate name of image” /></a>

The HTML code is consist of two parts first one is of the link you want to add with image (when someone will click on image the user will redirect to the page you want to send, the link could be of anything, for example affiliate product, video or any downloadable file such as PDF), and the second part is of image link that we already learned earlier.

Okay!

Now, lets see what are the meanings of tags used in the 1st part of HTML code to add a link.

<a href>  </a>

The href attribute specifies the link’s destination:

<a href=”URL”>Just Text Or Image source</a>

This is the exact same code that gets applied when you link to your another blog post with a keyword in your blog post that also called Interlink.

For example,

You want to link www.google.com with the keyword “Go to Google” then code will looks like:

<a href=”www.google.com”>Go to Google</a>

Result of Code:

Go to Google

You see!

But, if you want to link an image you must need to add the image code we’ve learned before which for why footer affiliate banner looks like:

 <a href=”https://blogrankseo.com/recommends/bluehost/” target=”_blank” rel=”nofollow “><img src=”https://blogrankseo.com/wp-content/uploads/2017/01/bluehost-300×250.png?x44963″ width=”300″ height=”250″ alt=”Bluehost-Web-Hosting” /></a>

Have you noticed?

There are more tags used inside the code I’m using here they and their reasons I used them:

Target

The target attribute specifies where to open the linked document.

<a href=”URL” target=”_blank”>Visit BlogRankSEO</a>

I used target=”_blank” so that affiliate link will open in a new tab. It’s good practice for SEO. I strongly recommend you to use it whether are you are linking to an affiliate offer or your blog post.

Advantage of using it that the page visitor was reading and clicked on the image/banner won’t redirect to other page, and he’ll get another tab opened. this helps in reducing bounce rate.

rel=”nofollow “

The rel attribute shows the relationship between the current document and the linked document.

Only used if the href attribute is present.

<a href=”URL” rel=”nofollow”>Just text or Image source</a>

I used rel=”nofollow” just because of affiliate link, it is SEO practice. You can’t give a do-follow backlink to the affiliate link, it’ll harm your blog’s/website’s ranking.

If you are linking to your blog post then don’t use this attribute.

Hint: Only use rel=”nofollow” for such links that harm your blog such as affiliate offer or someone else blog/website has bad spam score.

width=”300″ height=”250″

The width and height attributes specifies the dimension of image/banner:

<img src=”smiley.gif” height=”42″ width=”42″ alt=”Smiley face”>

This needs no expatiation. I just used them to adjust the size of image/banner.

The Final HTML Code You Can Use To Add Clickable Banner in WordPress Sidebar or Anywhere:

 <a href=”URL of website or  affiliate link” target=”_blank” rel=”nofollow “><img src=”Image or Banner URL” width=”300” height=”250” alt=”Alternate name of image” /></a>

Things needs to be replace:

1- Change the Green color values with yours.

2- Don’t use rel=”nofollow” tag if you are linking to your blog post.

How to image in sidebar without HTML code? – by WordPress Plugin

So, there is also an easy way to add images in WordPress Sidebar with link!

Of Course!

You can also add just image or clickable image with a WordPress Plugin.

I am not a stupid that I didn’t tell you this first. The reason is when you use a plugin it slow down a few loading speed of your website. The HTML code is lightweight.

In case you don’t want to use the code and need easy ways then follow steps below:

How to Add an Image in WordPress Sidebar Using Image Widget WordPress Plugin?

An effortless technique to add images to your WordPress sidebar is by making use of a plugin. First you’ve to install and activate the Image Widget plugin.

After activation, just go to Appearance » Widgets. There you will see a new Image Widget in your existing widgets. Just drag and drop this image widget to your WordPress sidebar or anywhere you wish for displaying an image.

Now you do not require to write down any HTML in any way. just use the media uploader to upload the images right from the image widget plugin.

When you upload an image, the image widget will expand to confirm a preview of uploaded image. It’ll also give you several settings that you can arrange for the widget. You can write a title, alt text, and a caption for the uploaded picture. There you can adjust the image size from the list of existing options as well.

In the end, just the hit the Save button to save the image widget and settings. That’s it; now go and check your site and make sure the image is shown in your sidebar.

I hope this blog post is helpful for you to add an image in WordPress sidebar widget. If you face any problem, don’t hesitate to leave the comment below…

Share if you like Because

Sharing is Sexy!

SY Abuzar

So, This is another Boring Author Box Below Each and Every post, Where I have to write about Myself that I am a Blogger and all that. Lets make it simple, Visit About ME page to know About Me. Circle me on Google+