how to add a WordPress widget

Tutorial #8:
How to Add a WordPress Widget


WordPress Tutorial #8

It’s much easier to add a widget in WordPress than to explain how. (If you’re not sure what a WordPress widget is, check out this explanation, then come back here for the how-to.)

Note: This article was updated on July 8, 2020.

#1. Decide Where to Place Your Widget

Where do you want your widget to show up? They used to be limited to just a few specific areas. To see what I’m talking about, navigate to the Widgets screen.

Step #1: From your WordPress Dashboard, scroll down the left-hand menu and click Appearance, then Widgets.

Navigate to your WordPress Widgets screen

You used to see a screen that looks something like this. I’m showing it to you, because I think it’s easier to understand the newer way to add a widget once you see the larger picture.

Notice that, on the left side of the page, you see Available Widgets. This list isn’t the same for every site — it depends on your theme and the plugins you have installed. On the right, you see the widgetized areas. These are the places in your site where you can put a widget. In this example, there’s the Primary Sidebar, the Footer, and three others. Most themes let you put widgets in the sidebar and footer.

WordPress widgets screen

Today, instead of this simple layout, you see text that reflects a portion of the page or post you had open when you clicked the Appearance/Widgets link. Here’s an example.

It doesn’t tell you a lot, does it? However, if you scroll down, you’ll realize that you’re seeing the sidebar of the page. Below those sidebar items is a list of the other available widgets.

Click on the arrow next to one of the selections to expand it. I clicked Footer Area #1, and saw this:

Sure enough, if you scroll down to the bottom of a page at WPBuildingBlocks.com, you’ll see this.

It’s the first item in the footer — in other words, Footer Area #1.

#2. Select the Widget You Want to Use

While it used to be that you had to choose your widget from a limited list, today you can add any block as a widget. It could be a paragraph, an image, a YouTube video, or anything else you want. If there’s a block for it, you can add it as a widget.

Does this look familiar? It should

My current theme offers a sidebar and several other widgetized areas area. I’m going to add an Image widget to the Footer.

Click the arrow to expand the area. Now you’re ready to add your widget.

choose the widgetized area you want to add the widget to

#3. Add the Widget

Make sure your widget is expanded (see #2 above), then click the location where you want to place it. Click the Add Widget button, and you’ll see it appear on the right at the bottom of the list of widgets for that widgetized area.

new Image widget in the footer widgetized area

The widget will be added at the bottom of the widgetized area, but never fear, you can reposition it.

reposition the widget by dragging and dropping

To reposition it, simply grab it with your mouse and drag it until you see the new box appear, then drop it.

#5. Set Up the Widget

After you add the widget, you may have one more step.

Some widgets require you to fill in some information. In this case, I need to give the widget a title and add the image.

The Title is whatever you want your site visitors to see as a label above the widget. Here I’m just going to use “My Image.”

Then I upload the image — just the way you would upload a Featured Image for a post, and click the Add to Widget button. (Remember to add your Alt Text!)

adding an image to a widget

You can even add a link to the image if you want. When you’re done, click the Save button.

the image widget

Let’s see how it looks to visitors.

Now here's the widget in the footer, as it appears to site visitors

Congratulations, Widget-meister! That’s all there is to it.

If you’d like to get WordPress Tips and Tricks emailed to you occasionally, add your name to the email list here.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.