If you want more control over how your WordPress site looks, learning how to use the WordPress Customizer is one of the best investments that you can make.
While drag and drop page builders help you style your actual content, the WordPress Customizer is where you can customize important details about your WordPress theme.
It's also a major focus for the WordPress team and likely to play an increasingly important role in WordPress.
So if you’re not already familiar with this powerful area of WordPress, join me for a beginner-friendly WordPress Customizer tutorial.
What Does The WordPress Customizer Let You Do?
The name is kind of a giveaway here…
It might sound a little silly to spell out. But at a basic level, the WordPress Customizer simply helps you...customize your site.
It lets you do things like:
- Change the title of your website
- Customize the navigation menus on your site
- Manage widgets in your sidebar and other widget areas
- Change colors for various parts of your theme
And potentially lots more, depending on the specific theme that you’re using!
How To Access The WordPress Customizer
There are two ways to access the WordPress Customizer.
First, you can always access the WordPress Customizer from your dashboard by going to Appearance → Customize:
Second, you can also access the WordPress Customizer for the specific page that you’re looking at from the WordPress Toolbar (assuming you’re signed into WordPress).
All you need to do is click the Customize button:
Both methods take you to the same place, so use whichever method that you prefer.
A Quick Introduction To The WordPress Customizer Interface
Once you use one of those methods to access the WordPress Customizer, you should see an interface that looks something like this:
On the left side, you have a number of different menu options. This is where you’ll actually make changes to your site.
And on the right side, you’ll see a live preview of your site. As you make changes with the menu options in the sidebar, this preview will automatically update to reflect those changes.
Finally, you can also use the three buttons at the bottom to see how your theme looks on different types of devices (like a smartphone), which is helpful for making sure your theme looks consistently great.
Why Your WordPress Customizer Might Not Have The Same Options As My Screenshots
At this point, you might be saying, “wait a minute, my WordPress Customizer interface looks a little different.”
Don’t worry if it does - that’s completely normal.
While the WordPress Customizer is a core WordPress feature, it’s also built to make it easy for WordPress developers to add on functionality.
For that reason, the actual options that you see largely depend on the specific WordPress theme that you’re using, though the basic principles for using the WordPress Customizer are universal.
There are two areas where you’ll likely see differences:
First, there’s probably a good chance that you’ll have additional menu options in the sidebar of your WordPress Customizer.
Second, you may or may not see the blue Pencil icons on the live preview of your site. These pencils are a somewhat recent feature that allow you to quickly jump to specific edit interfaces (I’ll show you how they work in a second).
How To Use The WordPress Customizer
I’m going to show you how to use the WordPress Customizer using the default Twenty Seventeen theme.
As you learned in the previous section, you might have additional menu options in your sidebar, though.
While I can’t show you specifically how to use those menu options, the concepts that you learn from my examples should give you all the skills you need to use anything theme developers throw at you.
How To Jump To Edit Specific Parts Of Your Theme
Remember those pencil icons from a second ago?
Here’s what they do:
They let you jump straight to a specific menu section without needing to manually dig through all the settings.
Rather than try to explain it, let me show you how it works:
Again - this is still a relatively new feature, so your theme may or may not support it.
But if you do see the pencil icons, they’re a great way to quickly edit specific parts of your site.
How To Change The Title Of Your Site And Add A Favicon
The first menu option, Site Identity, is universal to all WordPress themes.
In it, you can edit your site’s title and tagline, which are often displayed prominently at the top of your website.
How To Change The Colors Used By Your Theme
While this option isn’t universal, most themes include some settings that let you customize the colors used on your theme.
In Twenty Seventeen, you can access these options under the Colors menu:
As soon as you select a new color, you should see the live preview of your site change right away.
How To Configure Menu Items
Like Site Identity, the Menus area is another universal option that applies to all themes.
From it, you can manage all the menus on your site. While you can also do this from your WordPress dashboard by going to Appearance → Menus, I actually like this method better because it allows you to see how your final menu will look in real-time.
Once you open the Menus interface, you can click Create New Menu if you don’t already have any menus. Or, you can select an existing menu:
Once you do that, you’ll be able to add menu items in real-time by clicking the Add Items button:
How To Configure Widgets
Just like menus, you can configure widgets both from the WordPress Customizer and by going to Appearance → Widgets in your WordPress dashboard.
And again like menus, I prefer using the WordPress Customizer because it lets you see what your widgets will look like in real-time.
To use the WordPress Customizer to manage widgets:
- Go to the Widgets menu
- Choose one of your theme’s widget areas
- Click Add a Widget to add a new widget
You can also manage existing widgets by clicking the arrow to expand their options:
How To Create A Static Homepage
By default, WordPress displays your latest blog posts on your site’s homepage. But if you want to display a static page instead, you can do that via the Homepage Settings option.
If you check the box for A static page, you’ll need to use the drop-downs to select:
- The page to use as your site’s homepage
- Which page to display the list of your latest blog posts on
How To Add Custom CSS
This menu option is advanced. But if you know what CSS is and what to add some custom CSS to your site, you can do so in the Additional CSS area without needing to edit your child theme’s files directly:
How To Make Your Changes Live (And Why You Should Feel Free To Test New Things)
Here’s the best part about the WordPress Customizer:
None of the changes that you make will affect your live site until you hit Publish, so there’s zero chance of you breaking anything.
Feel free to explore all of the options that your theme offers. Tweak and customize to your heart’s content!
And when you find a setup that you like, you can either make it live right away by clicking Publish. Or you can click the Gear Button to select the options to:
- Save Draft - saves the changes that you’ve made internally but doesn’t make them live.
- Schedule - schedules the changes that you’ve made to go live at a future date.
You can even use the Share Preview Link option to share a preview of your changes with someone else before you decide whether or not to make them live.
Get Out There And Start Customizing
The WordPress team has made the WordPress Customizer a key focus point for WordPress going forward. So even if your theme doesn’t already support it, that may change in the future.
And in the future, most new WordPress themes should be built with WordPress Customizer support in mind.
So if you aren’t already friends with the WordPress Customizer, dig in there and start playing around with it!