Grabbing HTML for an Image and Link for a Text Widget

In my job as a Happiness Engineer for Automattic, I often get asked how to add an image with a link into a widget area. This can be daunting if someone doesn’t know HTML. But that doesn’t have to deter you. There is a sneaky way to get that code, even without HTML knowledge. This is how to do it:

  1. Create a draft post and insert your image.
    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.
    b-paper-clipc-url
  3. Click on the “HMTL” option at the top of your editing page (next to “Visual”)
    d-html
  4. Copy that code. Note that your code will look similar to what I have in the next image, but the words and links will be different – specialized to your own information.
    e-code
  5. Open your Customize tool and go to Widgets.
    f-customizeg-widgets
  6. Add the Text Widget.
    h-text-widget
  7. Paste your code and save.
    i-code-in-widget
  8. And you will see your image in your widget areas (click it to test your link) 🙂
    j-final
Advertisements

6 comments on “Grabbing HTML for an Image and Link for a Text Widget

  1. exoticnita54 says:

    Thanks… very informative

    Like

  2. […] she helps people succeed on their blogging or site-building adventure. This post is adapted from a tutorial she shared on her personal […]

    Like

  3. nsurgcraig says:

    i love this, applied it on my blog and it worked… Thanks a lot

    Liked by 1 person

  4. Vivian Zems says:

    Thank you very much for this!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s