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.

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.

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 “Automatically add paragraphs”
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.

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.

So what will you create in your sidebar?