3_4_widgets_wordpress_for_beginners

1. WordPress for beginners training – Lesson 3.4
Widgets
Learning objectives
1. What is a WordPress widget?
2. Widget areas for site-wide widgets
3. Types of site-wide widgets
4. How to add, change, or delete site-wide widgets
5. Widget blocks
Key takeaways
Learning objectives
In this lesson, you’ll learn:
● what a WordPress widget is;
● where you can place widgets on your site;
● what are the different types of widgets, and what they entail;
● how you can add, change, or delete a widget.
1. What is a WordPress widget?
In the previous lessons, we’ve discussed the WordPress settings, themes,
and the WordPress Customizer. Now, it’s time to talk about another aspect
of customizing your site: widgets.
A WordPress widget is a simple, pre-built block you can add to your site
that serves a specific function. There are two types of widgets in WordPress.
First, there are the widgets you add with the Customizer. They appear
site-wide in the widget areas of your theme. For example, if you have a
search bar widget in your site’s footer (Image 1), it will be visible no matter
what page a visitor is on.
Yoast Academy 1 / 14

2. Image 1: A search bar widget
On the other hand, the widget blocks appear only on the single post or page
you add them to.
So, the magic of widgets is that your site gets a little something special
without too much hassle. Even if you’re not very technical and don’t know
how to code, you can still add lots of functionalities to your site simply by
adding widgets.
And there are tons of widgets that do all kinds of different things that may
be convenient on your site. For example:
● showing a list of your most recent posts;
● showing an image;
● adding an audio player to your site;
● and much more!
We’ll go into several types of widgets in more detail in a bit, but first, let’s
focus on where you can place widgets on your site.
2. Widget areas for site-wide widgets
So, where can you place these widgets on your site? Well, you can’t just
randomly put widgets anywhere. Widgets can only be put into so-called
widget areas. These areas are defined by your theme and are usually
located in the sidebar(s) and your site’s footer. This also means that widgets
usually appear sitewide, so across several pages.
However, some themes don’t include any widget areas, so if you want to use
widgets, it’s wise to check for this when selecting a theme. To find out where
the widget areas in your theme are, you can go to the Customizer. There,
you click Widgets. For example, the default WordPress theme Twenty
Twenty-One, only has one widget area, the footer (Image 2). In contrast, one
of the other default themes, Twenty Twenty, has two widget areas (Image 3).
Yoast Academy 2 / 14

3. Image 2: Widget areas in the theme Twenty Twenty-One
Image 3: Widget areas in the Twenty-Twenty theme
3. Types of site-wide widgets
Now, onto the types of widgets that are available to you. WordPress offers a
selection of useful widgets by default. Let’s take a look at the most used
default widgets in more detail. Please note that these widgets may look
different depending on the theme you use.
● Text
The Text widget is the most versatile default widget because it allows
you to add nearly anything to your site’s widget areas. This could be
a simple text, a collection of links, or a media file.
Yoast Academy 3 / 14

4. Image 4: Text widget
● Search
The Search widget adds a fully functional search bar to your site,
which helps your visitors find what they’re looking for easily.
Image 5: Search widget
● Recent posts
The Recent posts widget adds a list of your most recent posts, so
your visitors will be encouraged to read more of your latest content.
Image 6: Recent posts widget
Yoast Academy 4 / 14

5. ● Archives
The Archives widget organizes your previously published posts by
month, which can be handy for visitors who want to browse your
older content.
Image 7: Categories widget
● Categories
The Categories widget organizes your posts by category in one of
your widget areas. This can be useful for visitors who want to find
more of your posts about certain topics.
Image 8: Categories widget
Yoast Academy 5 / 14

6. ● Calendar
The Calendar widget displays links to your posts by date. Your
visitors will be able to click a date on the calendar and see which
posts you have written on that particular date.
Image 9: Calendar widget
● Gallery
The Gallery widget provides you with a simple way to display a photo
gallery or slideshow in one of your site’s widget areas.
Image 10: Gallery widget
● Meta widget
The Meta widget comes with five links:
● The Site Admin link leads to the WordPress dashboard or
login page (if you are logged out).
● The Log in/out link allows you to log in or log out of your
webpage.
Yoast Academy 6 / 14

7. ● The Entries RSS link gives access to your site feeds.
● The Comments RSS link gives access to your site’s comments
feeds.
● WordPress.org leads to the official WordPress.org site.
Image 11: Meta widget
These are just the most used default widgets. There are many more default
widgets. We’ll discuss where you can find these widgets in WordPress and
how you can add them to your site later in this lesson.
Widget settings
Most of the widgets we’ve discussed above allow you to enter a title and
tweak a few basic settings. When adding a widget, we recommend you look
through these options to check what matches your needs.
Third-party widgets
In addition to the default widgets, there are also non-default, third-party
widgets created by the WordPress community. These widgets allow you to
personalize your site even more.
Firstly, some themes offer additional widgets besides the default ones.
For example, a theme dedicated to selling products in an online store will
most likely offer a “Most popular products” widget that you can place on
your site.
Secondly, lots of plugins add widgets that help you enhance your site.
Many plugins add a new widget or a bundle of widgets to your dashboard.
Yoast Academy 7 / 14

8. For example, the Local SEO for WordPress plugin features several widgets
like one that lets you add opening hours, maps, locations, etc.
4. How to add, change, or delete site-wide
widgets
Now you know what a widget is, it’s time to add them to your site! There are
two ways to add, change, or delete widgets:
1. Back end: the WordPress Dashboard
One way to add widgets is by going to Appearance > Widgets in the
admin menu on your WordPress Dashboard, the back end of your
site.
2. Front end: Customizer
You can also add widgets through the Customizer on your site’s front
end, the same spot where you can change your theme’s look and
feel. This way, you can check how your widget looks before you
publish it.
Let’s explore these two methods in more detail.
Editing site-wide widgets on the WordPress Dashboard
If you click Appearance > Widgets in the admin menu on your WordPress
Dashboard, you’ll go to the Widgets screen. Here, you’ll find an overview of
the widgets (1 in Image 12) and widget areas (2 in Image 12) available for
your theme. In Image 12, there are already three widgets placed in the blog
sidebar.
If you want to add a new widget, you should follow the steps below:
1. Drag the widget of your choice from the left side into one of the
widget areas on the right.
2. Drop your widget.
3. Your widget is saved!
Yoast Academy 8 / 14

9. Image 12: Adding widgets through the WordPress Dashboard
If you want to change a widget, you should:
1. Click the widget you want to change.
2. It folds open with options that you can fill in, select, or change.
3. Set the options to match your likings.
4. Click ‘Save’.
Image 13: Changing widgets through the WordPress Dashboard
Yoast Academy 9 / 14

10. Lastly, if you want to delete a widget through the WordPress Dashboard,
follow these steps:
1. Click the widget you want to get rid of.
2. In the menu that appears, click ‘Delete’.
Image 14: Deleting widgets through the WordPress Dashboard
At the bottom of the Widgets screen, you will see the Inactive widget area.
You can use this when you want to remove a widget but save its settings for
future use. For example, this feature can come in handy when you switch
themes. Since different themes have different widget areas, switching may
cause some of your widgets to disappear. In such cases, you should be able
to find those lost widgets in the Inactive widgets area.
Editing site-wide widgets through the Customizer
To edit widgets in the Customizer, select ‘Widgets’ in the Customizer menu
(forgot how to access the Customizer? Check out the previous lesson!).
If you want to add a new widget, you should follow the steps below:
1. Click on the Widgets tab in the Customizer.
2. Optional (if your theme has multiple widget areas): Select the widget
area you want to add a new widget to.
3. Click ‘Add a Widget’ (Image 15).
Yoast Academy 10 / 14

11. 4. Select the widget you would like to add from the widget overview
that appears.
5. The widget is added to the Customizer sidebar, where you can edit it
(Image 16). You can also see what the widget will look like on your
site in the preview on the right.
6. If you’re satisfied, click ‘Publish’.
Image 15: Adding widgets through the Customizer
Yoast Academy 11 / 14

12. Image 16: Adding and editing widgets through the Customizer
If you want to delete one of the widgets you have added, you should:
1. Click the widget you want to delete to expand it.
2. Click ‘Delete’.
3. Click ‘Publish’.
Image 17: Deleting widgets through the Customizer
Yoast Academy 12 / 14

13. 5. Widget blocks
As we mentioned at the start of this lesson, you can also add widgets to
individual posts and pages with WordPress blocks.
How to add a widget block
To add a widget to a post, follow these steps:
1. Click on the Plus button to open the blocks library and scroll
down to the Widgets section.
Image 18: The Widgets blocks
2. Click on a widget to add it to the post.
Once you add the widget to the post, you can edit it with the sidebar and the
toolbar. Each of the widgets has different editing options. For example, the
Social Icons widget lets you adjust its alignment and its size with the toolbar
(1 in Image 19). In the sidebar (2 in Image 19), you can change the widgets’
style, determine the link settings and change the colors.
Yoast Academy 13 / 14

14. Image 19: The Social Widget block
Key takeaways
● A WordPress widget is a simple, pre-built block you can add to your
site that serves a specific function, like a search bar, a list of your
most recent posts, or an archive of your posts.
● Widgets can only be put into so-called widget areas. These areas are
defined by your theme and are usually located in the sidebar(s) and
the footer of your site.
● WordPress offers a pretty big selection of useful default widgets. In
addition, there are non-default, third-party widgets created by the
WordPress community that come with some themes and plugins.
● There are two ways to add, change, or delete widgets: through
the WordPress Dashboard on your site’s back end and the
Customizer on your site’s front end.
Yoast Academy 14 / 14