Add a live preview of a theme’s color changes to the theme customizer

The theme customizer screen is a great tool that offers a preview of changes to a theme’s options before before they are applied; it’s a great way to play around with settings without doing any damage to your site. One of the more interesting options we can offer to our theme users is the ability to swap the color of the theme with a real-time preview so they can see how these changes will look to help speed up the customization process.

Adding support for a color-change option is relatively simple – we’ll start by creating the additional settings for our theme:

$wp_customize->add_setting(
    'my_theme_primary_color',
    array(
        'default' => '#e83a34',
        'capability' => 'edit_theme_options',
        'transport' => 'postMessage'
    )
);

A key element in the above code is the transport parameter, which allows the amended option to be sent directly to the preview frame via Javascript. This is the key element in making the changes appear real-time in a the live preview.

The next step is to add a control that supports our additional colors:

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'my_theme_primary_color',
        array(
            'label' => __('Primary Color', 'my-theme'),
            'section' => 'colors',
            'settings' => 'my_theme_primary_color'
        )
    )
);

Our control will be added to the default colors section under the Primary Color name. To make it work, we need to wrap both of the above pieces of code in a function named, for example, my_theme_init_customizer, which will be added to the customize_register action:

add_action( 'customize_register', 'mytheme_init_customizer' );

Once done, the customization screen should look more or less like this:

At the moment though our control still won’t do anything, because we have yet to map any changes in the new option’s value anywhere. Let’s do that now:

function my_theme_customizer_css() {
    $primary_color = get_theme_mod('my_theme_primary_color', '#e83a34');

    ?>
    <style type=&quot;text/css&quot;>
        a,
        button,
        input[type=&quot;submit&quot;],
        input[type=&quot;button&quot;],
        input[type=&quot;reset&quot;] {
        	color: <?php echo $primary_color; ?>;
        }
    </style>
    <?php
}

add_action( 'wp_head', 'my_theme_customizer_css' );&#91;/php&#93;

<p>The above code takes the option's value from the theme settings, then inserts it into the CSS code in the head section of our theme. From now on, the changes of the new option will appear in the theme, but only when the page is refreshed - we still need to link the changes in our option with the appropriate JavaScript code to get a "live" preview of these changes.</p>

<p>Firstly, we should add an action which will draw the <strong>wp_footer</strong> action in the theme preview mode:</p>

function my_theme_customize_register($wp_customize) {
    if ($wp_customize->is_preview() &amp;&amp; !is_admin()) {
        add_action('wp_footer', 'my_theme_customize_preview', 21);
    }
}

add_action( 'customize_register', 'my_theme_customize_register' );

This code is responsible for drawing the my_theme_customize_preview function in the page footer when the theme is displayed in preview mode. Thus, we move to the final step – defining the my_theme_customize_preview function:

function my_theme_customize_preview() { ?> The above code works because we previously assigned the transport parameter to the postMessage one. In most cases such a solution will be more than sufficient.

JavaScript code optimalisation

Sometimes we may find ourselves in a situation where we must change the color of a large number of items that cannot be unified with a few CSS selectors. In this case, we would suggest using some slightly different code:

function my_theme_customize_preview() { ?> The above code works in a more intelligent way than our previous code – we create CSS code on-the-fly that is placed in a style tag that is then added to the end of the head section – this will overwrite all the other CSS files left. As you might expect, we also remove the previously-inserted style tag to avoid hundreds of style elements popping up in the head section when a rather indecisive user starts flicking through the available colors. Thus, we end up with only two simple operations on the tree of a document – removing and adding the element, instead of (potentially) several thousand selection and modification actions.