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.
Several people have asked me how to make images in their sidebar clickable. Here's how…
Photo by Yandle.
Step 1: Create (or Save) the Image
If you have not already saved the image to your computer, do this first. (If you need to create an image, check out my video tutorial on my blog button post. It shows you an easy way to create simple images.)
Step 2: Upload the Image to Your Server
Using WordPress, you can upload the image via FTP, or, upload the image via your Dashboard. Here's how:
- While logged into your Dashboard, click Media (in the left column).
- Choose Add New from the submenu.
- On the new page, click Select File. A window will pop up allowing you to navigate to the place where your image is stored on your computer.
- Once the image is uploaded successfully, copy the "File URL" (which is automatically assigned). The "File URL" field is located at the bottom of the upload window so just scroll down until you see it. This is your image location URL.
Step 3: Insert the HTML in a Widget
You will need two pieces of information for this step:
- 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.
- Image Location URL. The URL specifying where the image is located (that you obtained in Step 2 above).
To insert the image and make it clickable, slide a Text Widget into your sidebar. (Here's how to use widgets in WordPress).
Paste the following code into the Text Widget. Once it's in there, switch out the bolded URLs below with the two pieces of information you have on hand. Simply paste the URLs between the quotation marks. (Be very careful not to accidentally delete the quotation marks in the process.)
<a href="http://LandingPageURL.com"><img src="http://ImageLocationURL" /></a>
To make the link open in a new window…
If you want the new page to 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://ImageLocationURL" /></a>
Now isn't that weird…just yesterday I added a clickable image to my blogger design, but when I went to do the same thing on WordPress blog I was lost.
Thank you so very much!!!
Good tip & explanation! Thanks for sharing!
I have found in ONE morning what I could not find in a YEAR elsewhere !!!
Amy – I want to throw you the biggest party EVER…because you just saved me!
I spent all morning reading your blog and it just keeps going and going with every next question I have had for which you have all the answers !!
I am your biggest, newest fan and I will be here daily to take in the ton of info you provide !!
Sick of all the forums where the instructions are vague and people have a "more or less similar' problem on a different platform!!
SOOOOOOO happy to have found your blog. GREAT step-by-step easy to follow posts !! Thanks again.
You are makin' my day lize! I'm so glad to hear it's helpful! Woot!
I just have to say a huge "THANK YOU"! I was wondering how to do that!:) I'm really a big fan of your blog … its my "go to" blog when I need questions answered about blogging and html, etc!
Thank you! Glad it helped.
Told you I would be back every day now!!
Just did this and VOILA… worked perfectly !!
Thanks SOOOOOOO much.
Woot!
The end result is not what I'm going for at all, your instructions worked PERFECTLY! Now to "pretty" up my image a bit.
Thanks again Amy ~love the way you explain things!!!
Whoops – I forgot a word..
HOWEVER….your instructions worked PERFECTLY!
i do it the semi lazy way– i open up a new blog post. pop in the photo. add the link to it and then…..i click on source. that takes you from the viewed page to the html code. i copy that and then stick it in the widget!!! works perfectly. if you want it centered to the sidebar, center the photo before going to the source code.
very useful information….very helpful to the newbies like me
thanks
I may be missing it in your archives but if you could direct me to how to make your button both a clickable image and have the "grab my button" box showing the code I will be ever so grateful.
Here ya go: How to Make a Blog Button.
Well thank you for taking the time to help out. Got it working!
Yay!
I just want to say thank you!! You have helped me get a lot of things looking better and helped me get my blog up and running. I really do appreciate the help!
It's my pleasure, Rachael. Glad it's helpful!
Awesome job Amy! I too had been looking for this info for a while
Thank you 
Glad it's helpful.
Just what I needed! Thank you for writing in non-programmer speak.
I can not believe how easy that was!!! Amy- You are amazing! Just in case anyone needs to know where to find the image location URL in wordpress after you load it…(it took me a few to find it!)… it is under Media Library, then click "edit" below the image, scroll down to "file URL".
As always- thank you Amy for simple and clear instructions!
Thanks, Amy, for the extra tip. Way to go!
It worked, but the url shows up above the image. Did I do something wrong ?
My guess is that you didn't construct the HTML correctly. See if this post helps.
Thank's a lot. You saved my day.
HI Amy,
Your blog is SO helpful to me! How would I make the pages title use a custom button instead of the premade one in my theme?
This info is all over google
But its very helpful. Stumbled accros your blog when i was messing around on w3schools site. If you all need some more info google w3schools, theyve got everything to know 
I think they have an online class thing as well thats free, it gives you a real certificate that can be used in the real world. Also may i ask whos hosting this wordpress blog?
So clear and concise! Had it done in a second
You rock!!! Lots
Thank you so much for these clear and helpful directions. They were so easy to follow. You saved me a lot of searching on the internet.
Glad it was helpful, LaTusha. Thanks for stopping by!
I thought I did this, but when clicked, it shows up as a 404 error on my blog.
…and I followed the How to Make An Image Clickable…post directions.
Do you have a link to the post your image is in Rhonda?
Oh, no. Not in a post yet. I put it on my sidebar for the affiliate link. Maybe I followed the wrong directions.
It's at http://coffeehousemom.com/ sidebar.
Just looks like you forgot to paste in your affiliate link into the HTML. If you look at the widget, you'll see: a href = " "
Your affiliate link should go between the quotes there.
6th time's the charm! I thought I was doing that, until I realized I was copying the entire text (not just the affiliate code) in the box. I'll be more aware next time. Thank you for your kindness, Amy. I purchased mine and look forward to the back-to-school tips.
Glad you got it to work!
I'm looking at Rhonda's comments and your questions … and I'm wrestling with making an image clickable. In the post body/text, I got it to work using the html link from Amazon. I also followed the post directions (LOVE how clear you are!) about dragging a text widget and inserting the 2 pieces of info to make a clickable image. BUT … I thought the widget would show up in the sidebar (Which it didn't, and I really didn't want it to), but I'm trying to get the image in the post body to be clickable. Where do I put that "html text with the 2 pcs" now saved in the widget, so that the pic in the post is clickable? RIght now I just have the picture linked to the Amazon page (not via my associate code) so that it doesn't end up "nowhere."
http://www.juliesanders.org/2012/08/prayers-from-the-pews-teri-lynne-underwood.html
You're pasting HTML, so you need to make sure you're putting it in the HTML tab not the Visual tab in your Post window. (Look at the top right of the box where you enter your post and you'll see the Visual and HTML tabs. Just click on "HTML" to click over and you can put the HTML code in there.) Does that help?
Yes, that does help. I missed that "not so little" step. Still working through making the image clickable, but thanks to you, I've got the text figured out!
Thank you – This was so helpful…I was just able to put a clickable image to my new book on Amazon!!!
You are awesome!
Way to go!
This was soooo simple! I love your tips Amy! Thanks for sharing
You're welcome. Glad it was easy!
Thank you so very much for this. I too just couldn't get this right on wordpress! I tweeted this tip because I suspect this confuses a lot of people! Thank you again
Thank you! Thank you! Worked like a charm. Especially for the tip about getting it to open on a new page. I need to snag that chunk of html for a couple other places too!
Glad it worked, Rachel.
Great info and well informed. Just did my and very easy too, just copy and paste! That was it. Thanks again.
Thank you.
That was really fun! Thanks so much for all the good information, Amy!
Thanks for posting easy to understand directions and simple copy/paste example! It is fun to have an idea, learn how to do it and immediately apply it!
You're welcome!
"target="_blank" this was all that was missing. Thank you so much.
thanks for the help. I did exactly what you instructed, but I have one more question.. Is there some more code to add to make the logo center aligned? I made it clickable and all, but it's off the the side..
If it's within a post, you can highlight it and click the center icon (just like you would for text).
Yes of course, but mine is in the widgets
Add this code before the image tag (make sure you put an opening "< " and a closing to each bit below):
div style="text-align:center;"and then this after the closing img tag:
/divthank you …. how about the design ?
Superb… Got all the answers I needed. Thanks!
Thanks for the tip. I am putting up some pictures from my CDT 1500 mile hike and needed to know how to make images click through to links. This article was concise and very helpful.
Glad it was useful, Jeremy!
Excellent and useful info. Well, opening in a new window is better. Thanks for sharing the and tweeted
This was really helpful. Thanks, Amy!
You are a life saver, thanks so much! Such an easy post to follow and I had managed to do this in 30 seconds, something which on my own would have taken hours
Will definitely be revisiting your site.
Glad it helped, Laura. Thanks for stopping by!
I have done this and absolutely nothing shows up. I don't what could be wrong. The only thing that shows up on my site is the title words "Our Sponsors". Nobody else ever have this issue?
Isa, do you have a link to the post where it's not working? It sounds like the image is not being pulled which makes me think you might not be using the correct image URL.
Actually it was for an affiliate link but the company doesn't have affiliate links so they just track where the traffic came from. I only got the picture but I think you are right. The wordpress image url didn't work at all. I had to use photobucket to get a usable link. I was able to make it work now. It is the Bee Mine ad on my website. Thanks for following up.
Great post, thanks for the info… it worked a treat