WordPress for beginners training – Lesson 3.

The Customizer

Table of contents
Learning objectives

1. What is the Customizer?

2. What can the Customizer do?

3. What can’t the Customizer do?

Key takeaways

Learning objectives
In this lesson, you’ll learn:
● what the WordPress Customizer is;
● where you can find the WordPress Customizer;
● what you can do with the WordPress Customizer;
● what you can’t do with the WordPress Customizer.

1. What is the Customizer?

In the previous lesson, you’ve learned what themes are and what you should
consider when choosing a theme. By now, you also know how to install and
activate new themes on your site. So, now you’ll probably want to tweak the
theme you’ve chosen to your personal preferences. You could do this by
directly editing the theme files if you know how to code, but to make it easy
for you, WordPress created the Customizer.

With the Customizer, you can quickly change your site’s design or the
elements on your pages, such as your site branding, menus, and widgets.
And you won’t have to touch any code!

Yoast Academy 1 / 10
Where can you find the Customizer?
There are two ways to find the Customizer:

1. Back end
One way to find the Customizer is by going to Appearance >
Customize in the admin menu on your WordPress Dashboard, the
back end of your site (Image 1).

2. Front end
If you open your site while you are logged in, you can access the
Customizer via the top toolbar (Image 2).

Image 1: Accessing the Customizer through the admin menu in the WordPress
Dashboard (back end)

Image 2: Accessing the Customizer through the admin toolbar on top of your site
(front end)

Yoast Academy 2 / 10
2. What can the Customizer do?
Clicking the ‘Customize’ button opens a new interface with a preview of your
website on the right and a menu full of interesting settings on the left. You
can see the Customizer menu in Image 3. Note that Image 3 shows the
default options for the Twenty Twenty-One theme. Additional options may
appear in this menu depending on which theme you are using. Let’s dig into
these default settings and see what they’re about.

Image 3: The Customizer

● Site Identity
The Site Identity menu item is all about the branding of your site.
Here, you can change your site’s logo, set a site title and tagline, and
upload a site icon.

Yoast Academy 3 / 10
 Image 4: The Customizer: Site Identity

● Colors
The Colors menu item allows you to change the global colors in your
theme. In the case of the Twenty Twenty-One theme, you can change
the Background color. In addition, in this theme you can also enable
the Dark Mode support.

Image 5: The Customizer: Colors

Yoast Academy 4 / 10
 ● Menus
The Menus item gives you options to customize the navigation on
your site. For example, you can set where your menus should appear
and which items they should consist of. By default, any new page
you create is added to your navigation, but you can also add
categories, tags, and custom links. However, please note that by
default, there is no fixed menu set, and all top pages are included in
the navigation. By creating your own custom menu, you can then
choose which pages, categories, tags, or custom links you want to
appear in the menu. In Module 5, we’ll look at menus in more detail.

Image 6: The Customizer: Menus

● Widgets
Widgets let you add useful elements to your pages, such as a search
bar, recent posts, archives, and more. We’ll look at widgets in-depth
in the next lesson.

Yoast Academy 5 / 10
 Image 7: The Customizer: Widgets

● Homepage Settings
The Homepage Settings let you select whether you want your blog
directly on the homepage or if you want to display a static landing
page. We’ll look at how you can design static pages later in this
course. Then, we’ll also explore the difference between posts and
pages in more detail.

Yoast Academy 6 / 10
 Image 8: The Customizer: Homepage Settings

● Excerpt settings
With these settings, you can decide if your archive pages show a full
summary or an excerpt of a post.

Image 9: The Customizer: Excerpt settings

● Additional CSS

Yoast Academy 7 / 10
 The Additional CSS item allows you to add your own code to style
specific elements on the page if it’s not possible to style them with
the Customizer. This is for more advanced users because you need
to know how to code to properly make use of this option.

Image 10: The Customizer: Additional CSS

Pencil icons
If you’re in the Customizer, you might notice pencil icons showing up in
your website preview, as outlined in Image 10. These pencil icons are a
shortcut to open the settings for this specific element.

Yoast Academy 8 / 10
Image 11: Pencil icons in your website preview

Making changes visible

Any of the changes you make while in the Customizer will not be visible to
your visitors until you click ‘Publish’ in the top right corner of the Customizer
(see Image 11). This means you can feel free to experiment.

Changes can even be scheduled to go live at some point in the future. To do

this, click the settings wheel next to Publish and then choose Schedule.

Image 12: Publish button

3. What can’t the Customizer do?

While the customizer is useful to adjust your site’s basic styling quickly, it
doesn’t let you change your pages’ entire layout. WordPress is working on
that functionality, but for now, you will have to use the page editor, which we
will discuss later in this course.

If you really want to create a theme that fits your exact needs, and you know
how to write HTML, CSS, and PHP, you can create your own themes. We
won’t discuss this in this course, but any good WordPress developer for hire
should be able to do this. You can consider doing this if you want to take
your site to the next level, but with all the themes available in the WordPress
themes directory combined with the power of the Customizer, you should
definitely be able to find something that suits your needs!

Yoast Academy 9 / 10
Key takeaways
● The WordPress Customizer allows you to quickly make changes to
your site’s design or the elements on your pages, such as your site
branding, menus, and widgets, without having to use code.
● You can find the Customizer in the admin menu on your site’s back
end but also in the toolbar on the front end of your site.
● The Customizer has options to change:
○ your site’s identity, such as the title and logo;
○ the global colors in your theme;
○ your site’s navigation;
○ the widgets on your site, which are small and useful
elements, like a search bar;
○ the homepage settings;
○ the additional CSS on your site.
● You have to click ‘Publish’ in the top right corner of the Customizer
to make your changes visible to your visitors.
● The Customizer can’t change the entire layout of your pages. For
that, you have to use the page editor or you could create your own
theme.

Yoast Academy 10 /
10