How to add Color Schemes to your WordPress theme

Color scheme is a collection of colors used in design for website elements (buttons, background, text, headings, etc.). Adding color schemes to your WordPress themes allows users to choose a preferred color set or custom colors for their website, make it personalized and different from other websites using the same theme. In this tutorial, I’ll take you step-by-step through the guide how to add color schemes to your WordPress theme and make them available for live preview via the Customizer. You will find the complete code at the bottom of the tutorial which is ready to integrate into any WordPress theme.

0. Why should you add color schemes to a WordPress theme?

It’s quite familiar that customers or users want to adjust colors of a WordPress theme after installing. Prior to the color scheme (if your theme doesn’t have that), you have to update custom CSS for the colors of the elements every time the customers request. It takes you time and effort to repeat the work until the customers satisfy.

With color scheme functionality, you can easily change colors of elements with just one click, adjust them until your customers feel good. You can choose a predefined color scheme or create your own one (Color Wheel may help you do it easier). Everything is done in the Customizer and you will see the result in real-time without touching code!

An example of a color scheme is the IndusPress WordPress theme. It has 5 predefined color schemes you can use to change the look of your business website as you can see in the screenshot above. We will use the screenshot and the code base from that theme for demonstration.

If that’s what you like to do, then keep reading 😉

1. Create a PHP class for color scheme

The first step is creating a file in your theme to hold all the color scheme functions. We use a PHP class to keep the code modular. It also helps avoid adding prefixes to all public functions and thus makes the function names clearer and easier to understand.

In your theme’s folder, create a file color-scheme.php with the following code:class Theme_Prefix_Color_Scheme { public function __construct() { add_action( ‘customize_register’, array( $this, ‘customizer_register’ ) ); add_action( ‘customize_controls_enqueue_scripts’, array( $this, ‘customize_js’ ) ); add_action( ‘customize_controls_print_footer_scripts’, array( $this, ‘color_scheme_template’ ) ); add_action( ‘customize_preview_init’, array( $this, ‘customize_preview_js’ ) ); add_action( ‘wp_enqueue_scripts’, array( $this, ‘output_css’ ) ); } public function customizer_register( WP_Customize_Manager $wp_customize ) {} public function customize_js() {} public function color_scheme_template() {} public function customize_preview_js() {} public function output_css() {} }

This class includes the following functions:

Adding hooks to register controls and settings in the Customizer: This is done by the action customize_register. The code that defines settings and controls for color scheme is put inside the function customize_register() which we will reveal later.
Adding Javascript to handle controls in the Customizer: This is done by the function customize_js() hooked into the action customize_controls_enqueue_scripts. To make the Javascript works, we need a custom HTML template for it, which is done by the function color_scheme_template() hooked into customize_controls_print_footer_scripts.
Adding Javascript for live preview: The Javascript is added by the function customize_preview_js() hooked into the action customize_preview_init().
Finally, outputting custom CSS in the frontend: is done by the function output_css() hooked into the action wp_enqueue_scripts.

Remember to change class prefix to your actual theme prefix.

Then, open the functions.php file of your theme and add the following code to include the new file you have just created:require get_template_directory() . ‘/color-scheme.php’; new Theme_Prefix_Color_Scheme;

This will load the class and create an instance of the class, which runs the code for color scheme.

2. Define color schemes for your theme

Before going into details of the functions, you should define the color schemes for your theme. Adjusting colors for a website is not quite easy and to make your customers happy, you should give them a hint – the predefined color schemes (for example if the button is orange, then which color should the text be). That will help you and your customers save time a lot.

In the IndusPress theme, we have 5 predefined color schemes, each color scheme has 6 colors. You might have a different number of predefined color schemes as well as the number of colors in one color scheme.

To make it easier to refer to predefined color schemes as well as the name of colors, we will create a helper method and variable correspondingly.

The variable holding colors name is defined as following:public $options = array( ‘link_color’, ‘button_background_color’, ‘button_hover_background_color’, ‘section_dark_background_color’, ‘footer_background_color’, ‘highlight_color’, );

which means:

Link Color.
Button Background Color.
Button Hover Background Color.
Section Dark Background Color.
Footer Background Color.
Highlight Color.

Note that the names are different in your theme and they these name will be used as the settings name in the Customizer.

Create a method get_color_schemes() to returns all the predefined color schemes and add the code below:public function get_color_schemes() { return array( ‘default’ => array( ‘label’ => __( ‘Default’, ‘induspress’ ), ‘colors’ => array( ‘#41535d’, ‘#e67e22’, ‘#c35b00’, ‘#2c383f’, ‘#222b30’, ‘#e67e22’, ), ), ‘orange’ => array( ‘label’ => __( ‘Orange’, ‘induspress’ ), ‘colors’ => array( ‘#dd8500’, ‘#1d5d8e’, ‘#00508e’, ‘#aa6600’, ‘#9d5f00’, ‘#dd8500’, ), ), // Other color schemes ); }

The function returns array an associative array of color scheme options. Each color scheme has a label and a list of colors which matched the colors defined in the variable $options above. Remember to change colors to match your theme design.

3. Adding a new section and controls to the Customizer

Now, we will add the settings and controls for your color scheme in the Customizer. We will create:

a section Colors to hold the color scheme setting
1 select option to choose color scheme
6 color picker for 6 colors in the color scheme

Inside the function called customizer_register() you just created, add the following code:

3.1. Adding the Colors section

$wp_customize->add_section( ‘colors’, array( ‘title’ => __( ‘Colors’, ‘induspress’ ), ) );

In the code above, we use the $wp_customizer object which is which is an instance of the WP_Customize_Manager class. The add_section method accepts 2 parameters:

ID of the section, which is Colors in this case
An array of section parameters such as title, description (optional) and priority (optional). Here we set the title for the section only.

For more info about add_section, please look at this documentation.

3.2. Adding select option to choose color scheme

$wp_customize->add_setting( ‘color_scheme’, array( ‘default’ => ‘default’, ‘transport’ => ‘postMessage’, ) ); $color_schemes = $this->get_color_schemes(); $choices = array(); foreach ( $color_schemes as $color_scheme => $value ) { $choices[$color_scheme] = $value[‘label’]; } $wp_customize->add_control( ‘color_scheme’, array( ‘label’ => __( ‘Color scheme’, ‘induspress’ ), ‘section’ => ‘colors’, ‘type’ => ‘select’, ‘choices’ => $choices, ) );

In this code, we use the method add_setting to register a setting in the Customizer – the select dropdown for the color scheme. The method accepts 2 parameters:

ID of the setting – which is color_scheme
Settings parameters such as default value and transport type. Here we set the default value the default color scheme and transport type postMessage which allows us to see the changes of colors in real-time without reloading the page.

For more info about add_setting, please read this documentation.

To make the setting work, we need to add a control for it. The control makes the Customizer renders the select drop down and a list of options. We use the method add_control to do that, which accepts 2 parameters:

ID of the setting must be the same as ID used in add_setting method
Control parameters, which is an array and can contain the following parameters:
- label: Field label
- section: ID of the section, must be the same as in the code that register section (above)
- type: Input type, in this case – select
- choices: Used for select, radio field, which is a list of available options to choose from. In our case, this is the list of predefined color schemes generated by the helper method get_color_schemes()

3.3. Adding 6 color pickers for 6 colors

$options = array( ‘link_color’ => __( ‘Link color’, ‘induspress’ ), ‘button_background_color’ => __( ‘Button background color’, ‘induspress’ ), ‘button_hover_background_color’ => __( ‘Button hover background color’, ‘induspress’ ), ‘section_dark_background_color’ => __( ‘Section dark background color’, ‘induspress’ ), ‘footer_background_color’ => __( ‘Footer background color’, ‘induspress’ ), ‘highlight_color’ => __( ‘Hightlight color’, ‘induspress’ ), ); foreach ( $options as $key => $label ) { $wp_customize->add_setting( $key, array( ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘transport’ => ‘postMessage’, ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array( ‘label’ => $label, ‘section’ => ‘colors’, ) ) ); }

The code is similar to adding select control. However, to keep the code not duplicated, we use a loop through all 6 colors. We also use sanitize_callback option which will sanitize all inputs of colors before saving into the database, to prevent unwanted values from saving. The proper sanitize callback function for color is sanitize_hex_color, which is already created by WordPress.

The color picker uses a custom control – Color Control which is supported by the WP_Customize_Color_Control class (also created by WordPress).

After doing this step, save the file and go to the Dashboard → Appearance → Customize and you will see the following screenshot: