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.
#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.
Not very appealing, is it?
Click the checkbox at the bottom of the widget to automatically add 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.
- 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.
- Type the content you want for your widget
In the editing window of the new post, type your content. Add styling and links.
- Save the post as a Draft
- Click the 3-button more options menu
- Click Edit as HTML
Select the Edit as HTML menu, and you’ll see something that looks like this.
- Copy the contents of the window
Select the contents of the window, and use CTRL C (Windows) or CMD C (Mac) to copy.
- Now add your widget
Go to Appearance / Widgets and select the Custom HTML widget
- Place your widget
Add it to the sidebar, footer, or other widgetized area.
- 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.
- Your readers will see this
Note the headings and the paragraphs in the finished version that readers see.
- 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
- 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.
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.
