How to Make a Banner Ad Clickable

Of course, the WordPress editor has an option for clickable images. You can easily add an affiliate link to the image (or link to another page or article). But here is a simple way to do it with simple custom HTML to add to a widget.

If you’re unsure where your image is hosted online and therefore don’t know where to find the File URL, or if you prefer to deal with less HTML, here’s another option.

Here is the process to make the image clickable

These instructions are for WordPress, but a similar process could be used with Blogger too. The idea is simply to create a new post, add a photo and link it and then grabbing the HTML to be used elsewhere. Here’s what I mean…

Step 1: Save the image to your computer

If you have not already saved the image to your computer, do this first. Right-click (command-click on a Mac) on the image and “Save image as…”

Step 2: Open a new WordPress post/article

(even if you’re going to put the image somewhere else on your site like your sidebar)

From your WordPress Dashboard open a new Post (Posts –> Add New).

Step 3: Upload your image

Make sure you’re in the Visual tab (indicated in the top right of the post box). Click the Add Media button (top left of the post box).

Step 4: Add your image to your post

While in the Upload Files tab (top left), you can either drag and drop your image into this screen or click the Select Files button to find the image on your computer.

In the Media Library select your file

Once you’ve selected your file, you should be automatically switched to the Media Library tab. In this window, do the following:

1. Make sure the image you want to work with is checked.

2. The title will automatically be inserted. Did you rename your image before you uploaded it? A good title will help with SEO so make sure you rename your image before uploading. (If you need to start over, you can delete this image by clicking Delete Permanently next to the thumbnail image on the right.) You can also resize it with the edit button.

3. Fill in the Alt Text. Again, this helps with SEO. I just usually make it the same as the title without hyphens.

4. Do you want your image to be aligned in a certain way? Centered, right, left, or none? Select your preference from the drop-down.

Here is where you make your image clickable

5. Here’s where you make it clickable! Select the Custom URL from the dropdown menu. Enter the URL of the webpage you want this image to link to. So, in my example, I’ll enter https://amylynnandrews.com/how-to-blog/ so it will match my image and link to my How to Blog Step By Step Guide.

6. Do you want your image to be a different size than what you uploaded? (You can control these options are in Settings –> Media.)

7. Click the Insert into post button.

Your image will now appear in your post window like so:

Step 5: Do you want your image to open in a new window when someone clicks?

Many people like the link attached to their image to open in a new window, especially for an affiliate link or when they’re sending people to a different site.

1. If that’s the case, click on the image to highlight it. It’ll gray out a bit.

2. Then, click on the link icon (looks like a chain link).

3. In the small window that pops up, check the box that says Open link a new window/tab.

4. Click Update.

Step 5: Grab the HTML

Click the Text tab in the top right corner.

This tab shows you the HTML for your image. Simply copy that whole bit of code and paste it wherever HTML is accepted (like in a sidebar widget).

If it is an affiliate link make it “no follow”

Step 6 (optional): If this is an affiliate link, make the link nofollow

If you link your image to an affiliate link, you should make it nofollow. Tagging it nofollow will tell search bots not to follow those links when it’s indexing your site. You can read more about why this is important in my post How to Add the NoFollow Tag to A Link.

To add the nofollow tag, simply add this bit of code in the HTML right before the closing tag (>) of the first link:

rel=”nofollow”

I’ve inserted it below. See the highlighted text.

Now you can grab this HTML and paste it wherever you’d like the clickable image to appear (like in a widget of your sidebar – choose a custom HTML widget and drag it over to the sidebar or footer).