Theme options

Welcome to this lesson where we explore the Customize API to add options to a classic theme.

What is the Customizer?

Here we’re looking at the Twenty Twenty-Four theme.

What’s the currently active theme? When we hover over Appearance, we see we have access to the Site Editor. Let’s go into Themes, and we’ll install a classic theme.

Click on Add New Theme, and choose the Twenty Twenty-One theme. Install and click Activate.

We see several new menus there. However, we don’t see the Editor choice anymore because we don’t have access to the Site Editor with a classic theme.

Now the user can click on Customize in order to open up the Customizer. And here the user can make changes, which will be site-wide, such as changing the colors, and there’s also an option for dark mode.

And that’s what we’ll take a look at next.

Using the Customizer

Let’s now take a look at how the Customizer is used in the Twenty Twenty-One theme.

When the user clicks on Colors and Dark Mode, they now have the option to click on the Color Selector in order to change the background color.

Let’s take a look at the code to see how this was done.

If we open up the functions.php file, we see that the default color that we just saw is specified here using add_theme_support(). And also here is the Editor Color Palette. And this is how users can just select from the palette.

Let’s take a look again at the front end, and we’ll see how this comes together for the user within the Customizer.

Here they click on the Color Selector, then they have that color palette. Just note here too that they can also add in the hex code, and they can just scroll around here and choose a color that they like.

Register theme options

Let’s take a look at how you would register theme options using the Customizer.

It all starts with the WP_Customize_Manager class that will help you with creating those controls in the Customizer. Note the comment here under More Information on how the $wp_customize object is used as an instance of this class, and it’s the primary use of this class that you’ll see within Themes.

function themeslug_customize_register( $wp_customize ) {
  // Do stuff with $wp_customize, the WP_Customize_Manager object.
}
add_action( 'customize_register', 'themeslug_customize_register' );

Here we’re looking at the class within the Twenty Twenty-One theme that calls the WP_Customize_Manager in order to create that object, $wp_customize. If we scroll down a bit, then we can see how this class is written out in order to tie in what we just looked at in the functions.php file.

We’ve got the background color being defined, and we’ve got the control registration here, and the palette being called here using get_theme_support(), and then finally we’re using an array to build out the palette.

And then it all comes together at the bottom here by adding the control for the background color, which overrides the default background color control that ships with WordPress.

For more details, it’s strongly recommended that developers study the core customizer code. This is all of the core files that contain the word “customize,” and you’ll find this in your WordPress install folder, ‘wp-includes/customize’.

Next steps

You can refer to the theme handbook available on WordPress.org to read up more on adding theme options using the Customize API.