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

4 thoughts on “Grabbing HTML for an Image and Link for a Text Widget

  1. Pingback: Quick Tip: Make Your Widgets Shine with Images and Links | The Daily Post

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