If you want to add an image to your sidebar and link it to a web page (to promote your product or service you recommend for example), here’s how to do it.
In this tutorial, i’ll show you two methods to add a clickable image to your blog’s sidebar: one using a Text widget, the other using a plugin.
Manually creating the image link using WYSIWYG editor
(If you are one of those who don’t prefer to use a plugin for doing such simple task, then this method is for you.)
Manually creating the HTML for your clickable image might seem like a daunting task if you’ve never done it before, but once you’ve done it you’ll find it’s very simple and easy. Just follow the steps below to get the job done easily.
Step 1: In order to add image to a text widget, you will need to have your image uploaded to your WordPress blog first. In your dashboard, create a new post and drag your image from your computer to the post editor.
(If you want to use an image that already exist in your media library, click the Add media button, then select an image you want to display from your media collection, and click Insert into post.)
Step 2: Once your image is inserted, click on the image and then click on the pencil icon (see below) to launch the image settings interface.
Step 3: When the popup box appears, enter the URL of the page you want to link to. If you want the linked image to open in a new window or tab when a visitor clicks on it, check the box Open link in a new window/tab. Then click Update.
Step 4: Now click on the Text tab at the top right of the editor, and copy the entire block of HTML code.
The code snippet should look something like this:
Step 5: Now you need to paste this code into a text widget. Navigate to Appearance > Widgets and drag a text widget into the sidebar of your choice. Now paste the block of code into the body of that text widget.
Step 6: Click on the Save button. Now visit your site and click on the linked image to verify that the link works as expected.
This quick video shows how easy it is to add a clickable image to the WordPress sidebar.
Using the Image Widget Plugin
Probably the easiest way to add a clickable image to your sidebar is by using Image Widget plugin.
This plugin uses the native WordPress media manager to add image widgets to your site, so you don’t have to deal with any code at all. So let’s get started.
Step 1: Install and activate the plugin.
Step 2: Go to Appearance > Widgets.
Step 3: Under the “Available Widgets” area, you should now see a new widget labeled ‘Image Widget’. Click and drag it over to your desired sidebar or widget area , and it’ll expand automatically.
Step 4: Click on “Select an Image,” to upload/insert an image you want to include in your sidebar.
Step 5: Once your image is inserted, you will be given the widget settings to add a title, alt text, caption and a link for your image. Fill in the widget settings to your requirements.
Step 6: When you’re finished, click Save. Now that you have easily added the clickable image widget to your blog’s sidebar.
[stextbox id=”info”]If your image is linked to another website, you should add ‘nofollow’ tag to the link to ensure you don’t hurt your blog’s SEO. Basically, by adding rel=”nofollow” attribute to a link, you’re telling the search engine bots to ignore that link when it’s indexing your site.[/stextbox]
In order to make it nofollow, simply add rel=”nofollow” so that the link will looks like this:
That’s it! Hope this tutorial helped you to display a clickable image link in your sidebar. If you have any questions, please leave a comment below.