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>
Here at BloggingWithAmy you'll find tips, tools & tutorials about blogging and websites. In plain English. Want to 
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?