Feb 7, 2017 / Intermediate

Quick Tip: Make Your Widgets Shine with Images and Links

How to grab the HTML snippets you need for your Text Widgets.

<a href="https://www.flickr.com/photos/generated/501445202">Image</a> by <a href="https://www.flickr.com/photos/generated/">Jared Tarbell</a> (<a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)

Chrissie Pollock is a Happiness Engineer at Automattic, where she helps people succeed on their blogging or site-building adventure. This post is adapted from a tutorial she shared on her personal blog.

The Text Widget is a fairly straightforward tool, right? You write a bit of text, and it shows up in your sidebar (or footer, depending on the location of your widget areas). Some of you may have tried to replicate sleek-looking widgets that contain images or links, but when you added a link to your author blurb, or put in an affiliate code and image, all you ended up seeing was a plain web address, the bells and whistles nowhere to be found.

Don’t worry — that’s pretty common! The reason is that you have to use HTML if you want to make it look pretty. This can be daunting if you haven’t tried working with HTML before, but you shouldn’t let that deter you. There’s a sneaky way to get that code even without HTML knowledge. This is how you do it — just follow these step-by-step instructions.

  1. Create a draft post and insert the image that you want to see in your Text Widget. (Don’t worry — this post won’t be visible to your visitors as long as you don’t hit the Publish button.)a-insert-image
  2. If you want to add a link to the image, click on the image after it’s inserted and click on the paperclip icon to add your link. Type in or paste the link of the webpage, blog post, or other destination you want people to reach when they click on your image. It’s a good idea to also check the box next to Open link in a new window/tab so that when people click on the link, they don’t end up leaving your site.

    b-paper-clipc-url

    3. Want to learn more about widgets and what they can do to enhance your site? Here’s a roundup of our other resources on widgets.

  3. Click on the HTML option right above the toolbar, next to the Visual tab. This will open the HTML Editor.
    d-html
  4. Copy the code you see there. Your code will look similar to what you see in the image below, but the words and links will be different — they’ll be specific to your site and the information you’d entered earlier.e-code
  5. With your code safely copied, save your draft. Click on the Back option to go to your main menu. Open the Customizer and select the Widgets panel.

    f-customize

  6. Add your Text Widget. You can do this quickly by typing in “text” into the search box and clicking on the result that says Text.h-text-widget
  7. Paste your code — which you’ve just copied from your draft — into the content area, and click on Save & Publish.i-code-in-widget
  8. Exit the Customizer to view your site: you will see your image in your widget area — now it’s time to click on it to test your link!j-final

That’s all there is to it — pretty neat, no?

Do you use Text Widgets on your site? What have you used them for? Share your insights in the comments!

Show Comments

46 Comments

Comments are closed.

Close Comments

Comments

  4. I use a couple of text widgets, most importantly for my book which takes them to where they can buy it. It’s also great if you have multiple sites so people can easily hop back and forth without a lot of navigating. Just make sure to have links to all the other sites at each destination.

    Liked by 2 people

  13. Note that the size (width 4000 x 3000 pixels) is huge! With a slow internet connection or on mobile devices this will slow things down… I use tinypic.com to resize my pictures, the site also generates url-links that is easy to copy+paste. 🙂

    Liked by 2 people

  15. Very helpful! I do not have the need for a text widget, but if I ever do–this is very easy to understand. Right now, I wish the theme I am using would allow images with the excerpts. Waah!

    Liked by 3 people