How To Open Widget Images In A New Window

Alas, as I mentioned in a recent post, WordPress does not provide a simple, direct option for a website to open a sidebar widget graphic/image in a new browser window. Why should you care? Well, if you are a blogger and/or a self-published author displaying book covers on your website with links to your Amazon sale pages (or any other site), listen up.

WordPress iconAs a rule, web developers (that’s you!) should ideally set up every link that takes a viewer away from their site to “open in a new browser window.” This rule includes every blog post link. Yes, it does take a bit longer, but if you display them this way your readers will never, ever mistakenly close the browser window when they’re following a link and leave your website for good.

Note that if a visitor is on your website for the first time and has not bookmarked your site, they will often simply not return. That means you’ve lost a potential subscriber. Maybe a book sale or two.

You just don’t want that to happen.

Let’s go back to book cover images. If you know html or have a web developer who maintains your site, you/they can code images to open in a new browser window. But chances are good that if you knew how to do that, you probably would not be reading this post.

The Workaround
So! Let’s say you are permanently displaying images in your sidebar via a widget (like my book covers and Twitter icon to the left of this post), and you want them to link to another page. Because that link is taking your visitor away from your website, you want the new page they’ll be seeing to open in its own browser window.

Well, I’ve learned a pretty simple workaround to make the links function the way you want them to. Here’s how in a few easy steps:

  1. Create a draft post: Login to your website admin panel and click on Posts > “Add New” from your WordPress dashboard on the left. Create a new post and save it as a draft.
  2. Place the image in the post: Choose Media > Library from your WordPress dashboard, or click the “Add Media” button just above your blog post menu, also on the left side. Upload and place the image you want to link to in the body of that draft post and choose “align left” to pull the image to the left side of the screen for easiest access.
  3. Link the image to the destination URL: Hold down your left mouse button, then run the mouse over the image to highlight it. (Do NOT right click and “select” the image.) Next, click the “link” icon from the menu at top. When the pop-up “Enter the destination URL” appears, paste the URL you want the image to link to in the URL window. This is the most important part! In that same pop-up, click inside the box to the left of the words,“Open link in a new window/tab.”
  4. Switch to Text mode: You are probably working in “Visual” publication mode. (If you see the image, you’re in Visual mode.) You will now need to toggle to the Text editor by choosing the “Text” tab at the upper right of your post menu. While in you’re in Text mode, highlight and copy ALL of the html code that appears on that page. (Not sure how to get there? Notice the gray tabs to the right just above the blog post publication menu? They say “Visual” and “Text.” Click on the word “Text” and you will see a paragraph or so of writing.)
  5. Place the html code in a Text Widget: Go to your Widgets section. (Choose Appearance > Widgets on the left-side WP dashboard menu.) Grab a “text” widget from your available widgets section and drag it into position on your sidebar wherever you want this linked image to appear. Paste the html code copied from your draft post into the text widget window.
  6. Check your work: Visit your website and check the page to be sure it’s working correctly and that the link is opening in a new browser window.

Ta da! When you’re done, you can either save the draft post to use for another image or delete it. This multi-purpose method can be used to link blog hop badges or advertiser promos to another page without taking the chance of losing your visitors. I actually used it to create my own social media follow links.

Readers, will you use this information to change your links? Leave a comment and let me know if you have another method!

Did you enjoy this article? Subscribe to my blog and you’ll never miss my weekly posts! It’s easy: Just enter your email address in the upper right corner of this page. Just so you know, I will never sell, share, or rent your contact information. That’s a promise!

, , , , ,

32 Responses to How To Open Widget Images In A New Window

  1. Lillian Union May 6, 2013 at 3:38 pm #

    Thank you. Thank you. Thank you. I’ve been trying to figure this out for a long time. Your technique works beautifully.

    • Molly Greene May 6, 2013 at 3:47 pm #

      Yaaaaaaay! I wish I could tell you how long I tried to figure it out before I found the answer in a WordPress forum! Thanks, Lillian.

  2. Thom Reece May 6, 2013 at 4:47 pm #

    Thanks, Molly. Very slick. Huge help to a perplexing problem.

  3. Belinda Pollard May 6, 2013 at 8:05 pm #

    Clever workaround.
    I have a couple of old text widgets in place that I created ages ago (no idea how… probably searched for it somewhere…it’s lost in the mists of time, where dinosaurs roam and roar…), and each time I want to do another one, I go and copy one of those, then get the URL for the new image from my media library, and then CAREFULLY replace the appropriate bits of code.

    I look for the magic words: target=”blank”, which makes it open in a new window.

    I find that sticking my tongue out the side of my mouth and frowning helps the process.

    Usually I find that it then looks squashed or something, and I remember that I have to go back and change the dimensions, because the new image is not the same height as the old one. (My sidebar is 300 pixels wide, so that never changes, at least.)

    Um, I think your method might be easier…………………………………………………

    • Molly Greene May 7, 2013 at 9:20 am #

      Hahaha! I’m pleased if I have saved you even a MINUTE!

      • Belinda Pollard May 9, 2013 at 4:37 am #

        It’s official, your workaround ROCKS. And I also experimented and found you can choose “center” if you want the image in the center of your sidebar, or even place two side by side in the sidebar by choosing “left” and “right” for them. 🙂
        (and I quite like that “side by side in the sidebar” thing… sounds like a song from the 40s or 50s)

        • Molly Greene May 9, 2013 at 8:26 am #

          Ohhhhhh, that is SO COOL! My sidebar images are all quite large so I’ve never tried the side-by-side thing, or even thought about it! I imagine then that it would also be possible to do a “one-on-top-of-the-other” pacement as well using this method? THANK YOU Belinda!

  4. Cindy May 7, 2013 at 5:21 am #

    Molly! I just asked my son to do this for me. Bet I could do it myself now!

    • Molly Greene May 7, 2013 at 9:19 am #

      Just like everything we learn, it’s a cinch once we understand the process :-]

  5. pamela May 7, 2013 at 6:22 am #

    Wow – this is not intuitive, is it? I will try it out later this afternoon. Thanks for taking the time and trouble to explain it in so much detail. Wonderful.

  6. ChemistKen May 7, 2013 at 8:43 am #

    Thanks for the information, Molly. Makes me all the more eager to make the switch from Blogger to WordPress.

    • Molly Greene May 7, 2013 at 9:21 am #

      WordPress will give you so many more options!

  7. Sylvia Morice May 7, 2013 at 10:44 am #

    Thank you, Molly…I just re-tweeted this and am going to try it on my site…have been looking for a way to link my WordPress blog to my website and this may just do it!

  8. Jeri May 14, 2013 at 2:17 pm #

    Yay! Success is mine 🙂 Thanks for the tips.

  9. David Bennett May 16, 2013 at 11:56 am #

    I must be missing something, or misunderstanding something.

    If I want a graphic to open in a new window, I just put target=”_blank” inside the ‘a href’ tag

    • Molly Greene May 16, 2013 at 12:23 pm #

      Hey David, thanks for the tip. Like I said in the post, people who KNOW how to code html can code thier images to open in a new window. Your tip explains the issue for that group. My tip came from WordPress tech support staff. It’s an easy fix for those of us who don’t speak or understand or work with html. Thanks so much for taking the time to leave a comment!

  10. Kasia Burke June 21, 2013 at 2:22 pm #

    Brilliant stuff. I’ve been racking my brain for ages trying to work out how to do this on a wordpress template. Thank you xxx

  11. Kasia Burke June 21, 2013 at 2:25 pm #

    quick question. can something also be done about the gravatar opening in a new window?

    • Molly Greene June 21, 2013 at 4:49 pm #

      Hi Kasia! Do you mean the gravatar/headshot/image that’s displayed for each commenter? If so I doubt it. Sorry I couldn’t help!

  12. Sandy December 10, 2013 at 10:17 am #

    Love your blog…

    Do you know how to make an existing social media widget go to a new page? So, instead of html, is there a way to do this with css?

    I have a widget in the header area and need the links in the social widget to link to a new page.

    My website is still under construction, but would love any advice.

    have a great day and thanks so much for your help.


    • Molly Greene December 10, 2013 at 11:57 am #

      Thanks, Sandy, but I’m so sorry – can’t help! What I have found it that Googling any question I have usually turns up some kind of answer. Good luck!

      • Sandy December 10, 2013 at 12:34 pm #

        Quick reply! I am impressed. Have a great afternoon and thank you again for your help.


  13. BEVERLY January 27, 2014 at 12:47 pm #

    THANKS SO MUCH! You just lowered my stress level by 10 points.

  14. Johnny fontantana February 5, 2014 at 9:05 am #

    Thank you very much! Something so simple but needed a peak around the corner to get the answers.

    Well done!

  15. angela metallinou March 11, 2014 at 2:54 pm #

    Thank you so much for helping me out! I am grateful to you!

    God bless you!


  16. Travis December 20, 2014 at 6:50 pm #


    thanks so much for this, great life hack to make things easier. The only slight issue I got from doing this was a tiny border or a tiny piece of the widget panel shows above the banner in the widget on my site but only when using this method. If I enter the target link and image destination link in the required boxes then I don’t get this. There was a slight issue with this previously using the standard method but I found the code for it and resized it appropriately in css, though I admit I don’t really know what I’m doing, it was just a guess.

    Any help?

    • Molly Greene December 20, 2014 at 7:14 pm #

      Hi Travis – no, so sorry, I’m not a techie so can’t help. Best of luck in figuring it out!

  17. Travis December 20, 2014 at 7:22 pm #

    Thanks anyway.
    It’s not a biggie and it doesn’t make the site look too untidy or uninviting so I’m not going to stress over it.
    Thanks for the quick reply

    • Molly Greene December 21, 2014 at 7:50 am #

      My pleasure and best to you in all you do!