Add HTML – Images and Links – to Text Widgets Without a Plugin

WordPress posts and pages use the TinyMCE editor, so you don’t have to write HTML in your posts and pages, unless, of course, you want to. But the Text Widget is still, well, text.

This tutorial will show you how to use the WordPress WYSIWYG editor from a Page to add HTML to a Text Widget without actually writing the code or using a plugin.

sidebars with image genesis and twenty fourteen

Suppose you want to add a thumbnail image, some text, and a link to a Text Widget, like this. Genesis Sample theme sidebar is on the left and Twenty Fourteen sidebar is on the right. No additional styles were added; this is the theme default for both.

Use Page TinyMCE Editor

An easy method to do this without writing HTML yourself is to use the TinyMCE editor for a post or page. You can save it as a Draft to use it again, if you like.

  1. Open an Add New Page. While you are in the Visual tab, add your text.
  2. Create a link – highlight your link text, and then use the link icon to link to another page in your website.
  3. Insert a left-aligned thumbnail image. Put your cursor at the beginning of the text, and use the Add Media button. Choose Alignment > Left, and Thumbnail size.
  4. You can Save Draft at this point.
  5. Now click on the Text tab; you will see the HTML for your image, text, and link.
  6. Select all of it, and Copy.
page editor with html for text widget

This is the HTML in the Add New Page editor.

Add HTML to Text Widget

Now add the HTML that you copied to your Text Widget.

  1. Go to Appearance > Widgets. Drag a new Text Widget to your sidebar.
  2. Paste in the HTML that you copied from your draft page.
  3. Give the Text Widget a Title.
  4. Be sure to check the box “
  5. Click the blue Save button.

For the Twenty Fourteen theme, this is what you’ll see. First the HTML code that you added to the Text Widget is on the left, and how it looks is on the right.

text widget with image html

Use a Plugin for your Sidebar Widgets

If you need to add HTML to a lot of Text Widgets, you may actually prefer to use a plugin for your sidebars. The Black Studio TinyMCE Widget is a really nice addition to your widget plugins. It adds a WYSIWYG editor that can replace the default Text Widget; you can use it many times in your Appearance > Widgets screen.

Note that the WordPress Text widget now has a WYSIWYG editor, so you no longer need a plugin. Updated 12/02/20.

So what will you create in your sidebar?

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

2 responses to “Add HTML – Images and Links – to Text Widgets Without a Plugin”

  1. Brad says:

    Do you know of a widget to allow some one on my side to text over a picture … so they can see their message on a potato?

Leave a Reply

Your email address will not be published. Required fields are marked *