Settings and Controls for a Color Scheme in the Theme Customizer

Final product image
What You'll Be Creating

The theme customizer is a great tool to allow your users more freedom to tweak a theme without having to edit the code. But if you want to let your users change the colors of their site, things can get complicated. Adding a control for every single element they can change will make things cumbersome and users may end up with a site which looks like a garish mess.

Instead of adding lots of controls for all of the elements you want users to be able to change, you can simply create a color scheme, allowing users to select a few colors and then applying those to a range of elements in the theme.

In this tutorial, I'll take you through the first part of this process, which is setting up the theme customizer controls. In the next part, I'll show you how to link these controls to your theme so that when users select colors, they're carried through to the theme.

The Starting Point

Start by installing the starting theme and activating it. The theme customizer will look like this:

After completing the tutorial, your customizer will have two extra sections.

Setting Up the Theme Customizer

The first step is to create a file in your theme to hold your customizer functions. I'm going to be working with a basic starting theme, based on the theme created during my series on creating a WordPress theme from static HTML. I've made a few modifications to it so it will work with the color scheme functions, so if you want to work through this tutorial, I suggest you download the starting theme.

In your theme's main folder, create a folder called inc and in that, create a file called customizer.php.

Open your functions.php file and add the following, which will include the new file you've just created:

Now in your customizer.php file, add this function:

This creates a function which will contain all of your settings and controls, and hooks it to the customize_register action hook. Your theme is ready to go!

Creating Color Scheme Settings and Controls

The first step is to add the settings and controls for your color scheme. You'll add controls for four color pickers, the main color, the secondary color and two link colors.

Adding a New Section

Inside the function you just created, add the following:

This creates an empty section for your color scheme controls.

Defining Arguments For Your Colors

Immediately below, add:

This adds a new section to the theme customizer called 'Color Scheme'. It then sets up the arguments for the four colors you'll be working with: a slug, default value and label. The default value is the color used in the theme, so you may want to change yours to the colors in your theme.

Creating Color Settings

 Next you need to create settings for your colors using the arguments you just defined. Below the last code block, type:

This uses a foreach statement to work through each of the colors you just defined, creating a setting for each using the arguments you defined. But you still need to add controls so that users can interact with these settings using the theme customizer.

Adding Controls

Inside the foreach braces and below the add_setting() function you just added, insert the following:

This adds a color picker for each of your colors, using the WP_Customize_Color_Control() function, which creates color pickers for the theme customizer.

Your entire foreach statement will now look like this:

You will now be able to see your new section when you open the theme customizer with your theme activated:

And when you expand one of the controls, you'll be able to see the color picker:

At the moment nothing you do with the color picker will actually be reflected in your theme as you haven't added any CSS to make it work - we'll come to that in part 2 of this series. For now we'll add another section to give users a bit more control over their color scheme.

Creating Solid Background Settings and Controls

The next section won't allow users to pick colors, but instead will give them the option to add a solid background to the header and/or footer of their site. If they select this, the background and text colors of those elements will change.

Below the code you just added, but still inside your wptutsplus_customize_register() function, add the following:

This adds a second new section called 'Solid Backgrounds' and then adds two controls to it, both of which are radio boxes. In each case there are two choices: yes and no. In the second part of this series I'll show you how to define variables based on those choices and use those to alter the CSS in the theme.

You can now see the new section in the theme customizer:

Again, nothing will happen if you select one of the radio boxes as you haven't linked this to the theme's CSS yet, but that will come.


In this first part, you've added the settings and controls needed to create the theme customizer interface for your color scheme.

In the next part I'll show you how to define variables based on the choices your users make in the theme customizer, and then use those variables to set the CSS.



Related Articles