Sometimes you want to make an image clickable, meaning, you want someone to be able to click on an image and be taken to a page you specify. In other words, you want the image itself to be a link.
Making a clickable image using HTML is not as complicated as it sounds. There are several ways to do this, but this is probably the easiest (even if it’s a bit of a hack).
Step 1: Save the image to your computer
If you have not already saved the image to your computer, do this first.
Step 2: Open a new post (even if you’re going to put the image somewhere else on your side 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 (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
Make sure you’re in the Upload Files tab (top left of your screen).
You can either drag and drop your image into this screen, or click the Select Files button to find it on your computer. Once you’ve selected your file, you should be automatically switched to the Media Library tab. In this window, do the following:
- Make sure the image you want to work with is checked.
- 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.)
- Fill in the Alt Text. Again, this helps with SEO. I just usually make it the same as the title without hyphens.
- Do you want your image to be aligned in a certain way? Centered, right, left or none? Select your preference from the dropdown.
- Here’s where you make it clickable! Select 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 http://amylynnandrews.com/how-to-blog/ so it will match my image and link to my How to Blog Step By Step Guide.
- Do you want your image to be a different size than what you uploaded? (These options are controlled in Settings –> Media.)
- 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.
- If that’s the case, click on the image to highlight it. It’ll gray out a bit.
- Then, click on the link icon (looks like a chain link).
- In the small window that pops up, check the box that says Open link a new window/tab.
- Click Update.
Step 6: 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).
Step 7 (optional): If this is an affiliate link, make the link nofollow
Affiliate links should be nofollow links which means Google won’t follow those links when it’s indexing your site.
Simply add this bit of code in the HTML right before the closing tag (>) of the first link:
I’ve inserted it below. See the highlighted text.
How to manually write the HTML for your clickable image
From your Dashboard, go to Media –> Add New in the left column. Drag and drop or click the Select Files button to upload your image from your computer. (Once the image is uploaded successfully, you can always find it by going to Media –> Library.)
Click the Edit link next to the image in the list at the bottom of the screen. You will need the whole File URL located in the right column. (Double click in the field when you’re ready to copy it.)
To create your HTML you’ll need two bits of info:
- The landing page URL. This is the address of the page/post/site where you want the user to land when they click on the image.
- File URL. The URL specifying where the image is located (that you obtained above).
Switch out the bolded URLs below with the two pieces of information from above. Simply paste the URLs between the quotation marks. (Be very careful not to accidentally delete the quotation marks in the process and don’t duplicate the http://.)
<a href="http://LandingPageURL.com"><img src="http://FileURL" /></a>
To make the link open in a new window, you would simply add “target=”_blank” to the first piece like so:
<a href="http://LandingPageURL.com" target="_blank"><img src="http://FileURL" /></a>