WordPress text widget

The Best Way to Quickly and Easily Dress Up a WordPress Text Widget

Adding a widget to your WordPress site is easy. Once you’ve placed it though, you need to fill in fields or, if it’s a text widget, or the newer HTML widget, add content.

If you’re comfortable with HTML, you can simply start typing. but what if you’re not?

Fortunately, there’s a quick and easy workaround.

#1. Open Your Widget

Once you’ve added the text or HTML widget to your sidebar, footer, or other widgetized area, click the small arrow to expand it.

Text Widget

#2. Type the Title

Decide what you want to call it, and type in a title. We’ll call this one Text Widget Example.

#3. Type the Content

You can type the text you want directly into the widget content area, but you won’t have any styling.

Here’s what it looks like to a site visitor.

Text Widget example

Not very appealing, is it?

Click the checkbox at the bottom of the widget to automatically add paragraphs.

Text widget with paragraphs

That’s a little better, but what do you do if you want to add a link or use bold, or italic, or even add an image, though?

#4. Quick and Easy Cheat for Beautiful HTML Widget Content

First, follow these steps to create a draft of the content you’ll add to the widget.

  1. In a new browser tab, add a new post.

    If you’re using the Chrome browser, just right click on the link and select Open Link in New Tab from the dropdown menu.

  2. Type the content you want for your widget

    In the editing window of the new post, type your content. Add styling and links.

  3. Save the post as a Draft

  4. Click the 3-button more options menu

    more options

  5. Click Edit as HTML

    Select the Edit as HTML menu, and you’ll see something that looks like this.select Edit as HTML

  6. Copy the contents of the window

    Select the contents of the window, and use CTRL C (Windows) or CMD C (Mac) to copy.

  7. Now add your widget

    Go to Appearance / Widgets and select the Custom HTML widget

  8. Place your widget

    Add it to the sidebar, footer, or other widgetized area.

  9. Paste the content into the widget

    Use CTRL V or CMD V to paste the content you copied previously into your widget. It will look something like this.

    sample widget content

  10. Your readers will see this

    Note the headings and the paragraphs in the finished version that readers see.
    sample widget results

  11. Click Save!

To Add an Image to Your Custom HTML Widget

This works very well for text, links, and the like, but what about images? The Classic Editor doesn’t allow you to add an image.

So, if you want to include an image in your widget, there’s one more set of steps. On your draft post:

  • Add an image block
  • Insert your image
insert your selected image
  • Click the 3-button more options menu
  • Select edit as HTML
  • Copy the image information — do not copy the code that’s not highlighted here
  • Paste it into your widget in the appropriate place.
sample widget content with image

Now your readers will see this.

Text widgets, and their newer cousins, the Custom HTML widgets, are not the place for long-form content, but this will help you install widgets that say what you want to say, in a way that’s easy for you to create and for your visitors to read.

This post was updated on August 3, 2020.

Other Articles You’ll Like