WordPress Tutorial: Add Image with Hyperlink to Your Sidebar Widgets

In this WordPress tutorial I will show you how to not only add an image to the widget in your sidebar, but how to make that image “clickable” or turn it into a hyperlink to take someone to another page within your blog, an affiliate link, your Facebook Fan Page, or whatever you choose.

Click here for more WordPress tutorials!

Here’s the code you will need to copy and paste into your sidebar widget:

<div style="text-align: center;">

<a href=" http://jupiterjim.com " >

<img src="  paste URL from media library here " />

</a>

</div>

Meet the Author

Jupiterjim
34 comments… add one
  • Marni Spencer-Devlin Nov 5, 2011, 7:10 am

    Anyone who has a blog or newsletter in WordPress CANNOT do without Jupiter Jim’s tutorials. The man is a saint!!!

    Marni Spencer-Devlin

    SmoothOrganics.com

  • Jared Lopez Nov 5, 2011, 9:39 am

    I love Jupiter Jim! He is one of a kind. No body is better when it comes to websites! Your out of your mind if you pay some one else. He is very helpful and gives great tips in all his videos! Call or email him so you can start your online business today! -Jared Lopez
    Palm Beach County Boot Camp #1 Fitness Business in Florida!

  • jupiterjim Nov 5, 2011, 2:10 pm

    @David Johnson,

    David, so glad I was able to help! Don’t forget to subscribe to my blog so you’ll get all these great tutorial in your email inbox!

    Thanks for the kind words!

    Jupiter Jim

  • Dr. Erica Goodstone Nov 5, 2011, 8:38 pm

    Jupiter Jim,

    Wow! Thank you, thank you, thank you. I had uploaded my book image and also my paypal link but I could not figure out how to get the book image to be clickable to get to the sales page itself. I looked at other images that were clickable but somehow I just could not figure it out. I never knew how to get the URL link for an image. This is the very first time I went into the library and found an image and its URL in there. One more little piece of this unline puzzle you have taught me. I am so grateful.

    Warmly,

    Dr. Erica

  • Marc Korn Nov 5, 2011, 8:44 pm

    Hey Jim,

    Love the tutorial…you have a great teaching style and you are very thorough and your training is very easy to follow.

    This tutorial will help many bloggers with making their sidebar widget images clickable.

    WP can be intimidating for many new bloggers and your tutorials show bloggers in easy to follow steps how to accomplish all the fundamentals and then some.

    Well done…

    Marc

    • jupiterjim Nov 6, 2011, 3:51 am

      @Marc Korn,
      I really appreciate your comments. I do try to be as thorough as possible. I hate it when I watch other people’s videos only to realize that they skipped a critical step and now I still don’t know how I am supposed to do what they said they were gonna teach me!

  • marquita herald Nov 5, 2011, 9:08 pm

    Hi Jim,
    Very well done tutorial. Just wanted to share – for those who cringe at the thought DIY – there is actually a really cool – free – wordpress widget you can use called – Simple Image Widget. No code required – simply download and use it to just add images to sidebar or images plus link within / or outside your blog.

  • jupiterjim Nov 6, 2011, 3:28 am

    Marc,

    I really appreciate your comments. I do try to be as thorough as possible. I hate it when I watch other people’s videos only to realize that they skipped a critical step and now I still don’t know how I am supposed to do what they said they were gonna teach me!

  • jupiterjim Nov 6, 2011, 3:40 am

    Dr. Erica,

    So glad that you found this tutorial helpful. In the end it’s all easy. The hard part is finding the good tutorials and finding the time to watch them all! Thanks so much for commenting!

    — Jupiter Jim

  • jupiterjim Nov 6, 2011, 3:42 am

    David,

    Thanks for your comment and yes this is so much easier than having to edit the PHP files! And a lot less dangerous, too!

  • jupiterjim Nov 6, 2011, 3:46 am

    @marquita herald,
    Thanks so much for sharing that! That is very cool. I try to minimize the use of plugins because they are not always updated whenever WordPress is updated, and plugins can conflict with each other and slow down loading times. And I make adding images so easy. Just cut and paste. On the other hand, for some people, your alternative is the only one they will consider. So thanks for sharing.

  • Mark Nov 6, 2011, 5:03 am

    I normally prefer to steer clear of code, but this is so simple to do I’m going to add it to my WordPress toolbox. The video is well presented, everything is explained clearly and you have an “easy” teaching style. Thanks Jim, much appreciated.

    • jupiterjim Nov 6, 2011, 5:19 am

      Mark,

      Glad you like the video. So what is your blog URL so I can check it out?

      Take Care,

      Jupiter Jim

  • clare Nov 8, 2011, 2:22 pm

    Hi Jim,
    I have been wondering how to hyper-link an image for a long time. Thank you so much for freely sharing your knowledge here. As you have told me yourself, the more you share, the more will come back to you in the future. You deserve all the success that is yours now and in the future.

    You have given me confidence to keep improving my blog for a better reader experience.

    Be Blessed,
    Clare

  • Greg Nov 9, 2011, 4:30 pm

    I am really looking for some WordPress tutorials and thank GOD I found this blog post. I will definitely use this to add better image in my blog. Thanks!

  • antioxidants Nov 10, 2011, 10:55 am

    really excellent blog, Jim, found it full of really helpful tips, thanks sooo much for your help, keep up the good work

  • Joseph Nov 10, 2011, 6:40 pm

    Very informative post..I am not really good in WP.i done self study and it’s still confusing

  • Julieanne van Zyl Nov 12, 2011, 2:23 am

    Hi Jim, have you tried out the Thesis “Fremedy” theme yet? I put it on my Scuba diving blog plus another blog, and it looks quite nice! Have a good weekend! Julieanne

  • free stuff Nov 14, 2011, 6:06 am

    Very helpful for me i am new blogger on wordpress i was searching that hoe i can submit my image with link!!

  • Sandy Nov 14, 2011, 10:02 am

    Hi Jim,

    first, Love the tutorial too. And i agree with Mark.
    Your Teaching is simple to understand and it makes fun. It makes Fun to learn with and from you.

    Great Post, great Site. Thank you so much.

    With best Wishes for your Project 🙂

  • Lynda Cromar Nov 14, 2011, 1:58 pm

    Thanks Jim, you explained that in such an easy and simple way! Often people don’t give the complete instructions, or they assume we understand it. This is easy enough for anyone beginner or more experienced!

  • Benjamin Nov 15, 2011, 1:08 am

    Without doubt, this is a priceless post, and your teaching style is great.
    I am improving my blog step by step.
    Thanks Jim.
    Sincerely,
    Ben.
    P.S. Please, how can I hide our Affiliate Links? any plugin?

  • Benjamin Nov 15, 2011, 1:11 am

    Sorry Jim,
    Just to correct my email account.
    Thanks,
    Ben.

  • Paul Reimers Nov 15, 2011, 9:22 pm

    Thanks for the great tutorial Jim,

    I also appreciate your supplying the HTML code that can be copied and pasted and then adjusted (especially great for those who are HTML phobic).

    Being able to work with clickable images is important because most people respond more to images than plain text.

  • Sadie-Michaela Harris Nov 16, 2011, 6:01 am

    This is a good tip you have shared Jim one of the 1st frequently asked questions from people once they have familiarised themselves with WordPress. 🙂

  • Yorinda Nov 17, 2011, 8:50 pm

    Hi Jim,

    thank you so much for the very clear instructions in your video.
    I knew how to do it before, but now I understand it all a lot more.
    Even though I learned html code in my computer course, the way you explained it was a lot more acceptable for my brain.
    You are obviously a great tutor.

    Much appreciated.

  • Holly Nov 22, 2011, 2:01 pm

    Wow, that is simple enough for me to get!! Not that I have anything in the sidebar 2, but I could do this, without a whole lot of stress!! Thanks Jim!

  • Jenna Waites Nov 22, 2011, 9:30 pm

    You really have created some great simple tutorials! I wish I had you around when I was trying to figure this stuff out. I love your step by step approach and will definitely refer my followers here!

    Can I make just 1 suggestion? In this video you mentioned how you taught already how to upload images into WP, can you maybe link to that video so that it is quick and easy for those who might have missed it?

    Two thumbs up! 🙂

    • jupiterjim Nov 24, 2011, 10:11 am

      Jenna,
      Great suggestion! I’m actually going to re-shoot that video and add it to my collection, soon! Thanks for the feedback!
      Jupiter Jim

  • Sherie Feb 4, 2012, 10:19 pm

    Thanks so much for this great tutorial!! I love how clear you are in the videos, your explanations are easy to understand and very thorough!

  • Paula Cappa Mar 5, 2016, 3:23 pm

    I used Jupiter Jim’s codes here and all went fine. Suddenly, my widgets failed to click to the link one day (3-4-16). No idea what happened. I’ve just learned that the slash at the end of the href= code should be deleted (). Once I removed that slash before the karet (>), all connected again. So, why does Jupiter Jim have that slash there? Did something change with WP coding suddenly?

    • jupiterjim May 30, 2016, 1:52 am

      Thanks, Paula! You are totally correct!!! Very Sorry about that!!!!

Leave a Comment