Isn’t going to the back-end of the site a bit of a pain? What if there was an easier way to make some changes to your site and view them in real time? Thankfully, there is one aspect of WordPress that can help with that. The WordPress Customizer, added in WordPress 3.4, has become an increasingly popular way for theme developers and site owners to integrate changes to the site.
The Codex
The Codex describes the WordPress Customizer as
The Theme Customization API, added in WordPress 3.4, allows developers to customize and add controls to the “Appearance” → “Customize” admin screen. The Theme Customization screen (i.e. “Theme Customizer”) allows site admins to tweak a theme’s settings, color scheme or widgets, and see a preview of those changes in real time. – WordPress Codex
I will not be able to go too much into detial about the customizer or how to work with the API in this post. However, let’s take a look at some of the basics that we will need to work with it. There are three steps to keep in mind if you would like to use the Customizer API:
- Defining Settings, Controls, etc
- Generating Live CSS
- Configure Live Preview (Optional)
The first step is to declare a function and some of the controls and settings that you would like users to configure. You will also need to define a section, or more, that contains the controls and settings. Secondly, you will need to generate Live CSS. The CSS in this section will be placed in the header. To accomplish this, you can put the following code into your functions.php file:
function mytheme_customize_css()
{
?>
<style type="text/css">
h1 { color:<?php echo get_theme_mod('header_color'); ?>; }
</style>
<?php
}
add_action( 'wp_head', 'mytheme_customize_css');
Finally, the last step is an optional one: configuring the live preview. The WordPress Codex recommends the function because it can improve the user experience. Before implementing this method, you need to make sure that you meet three criteria:
1 – Make sure your settings are all configured for live preview ( 'transport'=>'postMessage' ) 2 – Create a new JavaScript file (e.g. theme-customize.js) to handle the live changes 3 – Create a hook for ‘customize_preview_init‘ that enqueues the – WordPress Codex
The last step, although optional, is a little complex. Instead of using the default Customizer API, you can use plugins to make the Customize API easier to control and even create a custom theme for it.
Plugins
Kirki
Kirki is a plugin that you gives you the ability to theme the customizer and crete custom controls. Aristeides Stathopoulos and fovoc and
Customizer
The Customizer plugin makes it easier to theme and change the Customize panel to your delight. If you would like to try out the Customizer plugin, you can click here for more details.
These are only some of the options that you can use to customize the Customize panel even further. If you have any questions or concerns, feel free to leave a comment below.