In version 3.4, beside improving current features, WordPress released a very cool new feature. It's a really useful tool that makes it easier for a user to configure and customize their website. That is the Theme Customizer. So what is the Theme Customizer, what can it do, and how to customize it? In this series, I'm going to walk you through understanding its components and tasks deeply. Once we're done, you can totally customize it by yourself.

What Is the Theme Customizer?

Before we talk about what the Theme Customizer is, I want to show an existing problem. Assuming you're maintaining a website, and you want to change something, maybe the background color or text heading color. You're not sure whether your change will work with the other sections of your website or not. So you try it by clicking the Save button and go to the front-end of the website to check the results. Unfortunately, it's so ugly, you have to come back to the admin section and change things again. Until you're happy with your changes, maybe you did that process two, three, or even more times. Finally, you're satisfied with the last changes. That's great. But there's trouble happening while you're configuring the website that you may not realise. Your visitors are also viewing your website during this time. They see everything, even the mess!

So how do you solve this problem? Clone your website to somewhere, then configure the website? Or using some plugins / techniques that set the website to "under construction" / "maintenance mode"? Or even waiting until everyone goes to sleep, then feel free to change everything we want? Maybe. However, I don't think those are good ideas.

Theme Customizer on TwentyEleven

So, the Theme Customizer is the tool which solves all the problems mentioned above. You configure the website settings and see all the changes instantly in a Preview frame. Once you're sure, click the Save button, then everything will be applied. It will save your time and prevent your audience from seeing your testing.

Advantages

In my opinion, the Theme Customizer has some advantages:

• Reducing work time, saving a lot of time in maintaining a website.
• Reducing risks from modifying your website, avoiding messing the website up. Changing everything on our website without publishing those changes to the world, and preventing visitors from seeing the website in a testing state.
• Testing, previewing and configuring the website with every theme without actually switching to them.
• Bring us an awesome preview on the website.

Disadvantages

Besides those benefits, the Theme Customizer also has a problem. Just having been released recently, the number of themes/plugins that support it is extremely low. By default, each theme has only about four settings, which sounds quite poor. So we need to wait for Wordpress developers to implement and deploy support. Hopefully this feature will receive more attention from developers to make it more flexible, and more useful.

Don't forget to leave your opinion below in the comments about this feature and my opinion of it, I'm looking forward to hearing from you.

General

In the Theme Customizer, there are four main components including Settings, Section, Control, and Manager. They are handled by four PHP classes, WP_Customize_Setting, WP_Customize_Section, WP_Customize_Control and WP_Customize_Manager.

The Section categorizes all settings into groups. Each section may contain one or many settings. It's a simple component. Thus we can spend more time on working with the others.

The Setting is simply a setting that handles options, including sanitizing, saving, updating actions, and defines where the data will be stored.

The Control is a component that goes between Setting and Section, connecting these two components. It decides which Section the Settings belongs to, renders Setting content and more.

Lastly, The Manager manages the three others. All activity like registering, removing Settings/Sections/Controls are handled by it. It works under the WP_Customize_Manager class. An important instance of this class is $wp_customize ( a global variable ). We should keep it in mind for customization later.

Embed Code

If you want to embed your script files into the Preview page, the Theme Customizer supplies you with some useful hooks.

CSS

For embedding CSS code, we might use the customize_controls_print_styles hook. For instance:

<?php
function your_css_code() {
	?>
	<style>
		// CSS code here
	</style>
	<?php
}
?>

Then using the add_action function to add that function to the above hook:

add_action( 'customize_controls_print_styles', 'your_css_code' );

Your CSS code will be embedded in the head section of the Theme Customizer page.

JavaScript

Similarly, we could do that with javascript but with the other hook, customize_controls_print_scripts. If you want your script code located in the footer, use customize_controls_print_footer_scripts.

<?php
function your_script_code() {
	?>
	<script type='text/javascript'>
		// Javascript code here
	</script>
	<?php
}
add_action( 'customize_controls_print_scripts', 'your_script_code' );
?>

or

add_action( 'customize_controls_print_footer_scripts', 'your_script_code' );

PHP

In this series, I will mainly be focussing on customizing the Theme Customizer with PHP. As I mentioned above, the $wp_customize global variable is an instance of WP_Customize_Manager that manages all other components of the Theme Customizer. To call this variable, we have a few ways:

function your_php_code() {
	global $wp_customize;

	// Customizing in details
}
add_action( 'customize_controls_init', 'your_php_code' );

or

function your_php_code( $wp_customize ) {
	// Customizing in details
}
add_action( 'customize_register', 'your_php_code' );

Both of these two ways work fine, but I recommended using the latter for the best compatibility and the most appropriate hook for the task.

Basic Understanding

Let's consider the following example, these are one of the default registers.

function your_php_code( $wp_customize ) {
	$wp_customize->add_section( 'title_tagline', array(
			'title'    => __( 'Site Title & Tagline' ),
			'priority' => 20,
	) );

	$wp_customize->add_setting( 'blogname', array(
		'default'    => get_option( 'blogname' ),
		'type'       => 'option',
		'capability' => 'manage_options',
	) );

	$wp_customize->add_control( 'blogname', array(
		'label'      => __( 'Site Title' ),
		'section'    => 'title_tagline',
	) );
}
add_action( 'customize_register', 'your_php_code' );

It's clear to see our code does three things: adding a new section, setting and control. The section has an id of title_tagline, followed by an array with its properties. The setting with a default value fetched from the blogname option has an id of blogname. In the middle of these things, the control associates the setting that has an id of blogname with the section that has an id of title_tagline. Then if everything works properly, we would have a new section named Site Title & Tagline which contains an option with the label of Site Title in the menubar of the Theme Customizer and this setting will handle the blogname option.

All components in the Theme Customizer are objects. $wp_customize has methods that manage the actions of the Theme Customizer, such as adding, getting, and removing components. So when we choose to add a new component, we pass an array of properties and values like above, those are properties of the relevant component.

function your_php_code( $wp_customize ) {
	$wp_customize->add_section( 'id_of_section', array(
		'property1' => 'value1',
		'property2' => 'value2',
	) );

	$wp_customize->add_setting( 'name_of_option', array(
		'property1' => 'value1',
		'property2' => 'value2',
	) );

	$wp_customize->add_control( 'name_of_option', array(
		'section' => 'id_of_section',
		'property2' => 'value2',
	) );
}
add_action( 'customize_register', 'your_php_code' );

Things you should keep in mind here are that we have to declare a components's id and an array of properties/options when registering new components. The control component is an intermediary one that connects the two others.

Every component in the Theme Customizer is an object.

Beware that those code snippets are only an example on how to customize the Theme Customizer, absolutely don't add those to your website, it will cause conflict.

Conclusion

So you've already taken a look at Theme Customizer feature, its components and the basic understanding. In the next part of the series, I will dig into its components in detail. Again, I'd highly appreciate any feedback, looking forward to hearing your thoughts. Thank for reading!