About a year ago, we did a short series of articles on WordPress' Theme Customizer. Now that the Theme Customizer has been available in WordPress for quite some time, and now that developers have had the opportunity to implement it into some of their work, we thought it would be useful to revisit the topic.

Specifically, the goal of this series of articles is to take someone who knows nothing about the Theme Customizer, and provide enough information that you'll not only know what the Theme Customizer is, but how it works, and how to implement your our settings into existing sections, and to introduce your own sections with their own group of settings.

Before we start writing any code to implement our own features into the customizer, let's review what the Theme Customizer is, what it does, and why it's beneficial for us.

What's the Theme Customizer?

Straight from the WordPress Codex article:

The Theme Customization API, added in WordPress 3.4, allows developers to customize WordPress's Theme Customization admin screen. The Theme Customization screen (i.e. "Theme Customizer") allows site admins to tweak a theme's settings and see a preview of those changes in real time.

Sounds easy enough, right?

No doubt you've seen this. Perhaps a simpler definition is that the Theme Customizer is a way for users to make changes to the appearance of their blog while actually being able to view the changes in real time.

But this raises the question: why does this even matter if there are ways to customize theme from within the existing WordPress dashboard? To answer that question, we need to understand what the Theme Customizer offers for both end-users and developers.

What Does the Theme Customizer Do?

In short, the Theme Customizer gives you - and the end-user of a theme - a preview as to what the theme looks like and the ability to tweak certain features of the blog all the while seeing a real time update of what changes will be introduced should the options be saved.

For the End-Users

As far as end-users are concerned, they no longer have to swap between the administrative dashboard and the public-facing side of the blog to see the results of the changes that they're making.

For example, prior to the Theme Customizer, users would have to do something like this:

• Login to the dashboard
• Click on 'Appearance'
• click on 'Header'
• Select a header image
• Save the changes
• View the blog
• Return to the dashboard and repeat until done

Yikes - not exactly the easiest way to go about making changes to your blog, is it?

Now, with the the Theme Customizer, users can:

• Login to the dashboard
• Click on 'Appearance'
• Click on 'Customize'
• View the Theme Customizer and the blog
• Upload a header image and see it in real time while working on the blog
• Click 'Save' when done

Much easier, isn't it?

This obviously goes a long way in improving the user experience, but users aren't the only ones who benefit.

For Developers

First, as far as developers and designers are concerned, our job not only consists of actually providing users with presentation and functionality, but doing what we can to make sure they have the best experience with a product as possible. In other words, we need to do what we can to close the gap between what the user thinks is going to happen and what will actually happen.

Leveraging the Theme Customizer, we can do just that primarily because users are able to see - in real time - what affect their changes are going to have on their blog.

So, with that said, it integrates nicely with the Settings API and is also easy to work with once the initial code is implemented for introducing it into a theme. This means that we can implement the Theme Customizer with our existing theme permitting it's using the Settings API.

On top of that, it makes it really easy to introduce new options into existing sections provided by, say, another theme (if you're working with a child theme), and it makes it easy to introduce new sections if you're looking to add the ability for users to tweak their blog from within the Theme Customizer.

Ultimately, this gives us the ability to make our work easier to use by giving our customers and our users an easier way to customize, tailor, and work with our theme rather than toggle back and forth between the dashboard and the blog itself.

How Does This Benefit Us?

Because this site (and thus this series) is geared towards those who are looking to improve their WordPress development skills, we need to understand the benefits of the Theme Customizer before we actually move to implementing it.

In short, I believe that the Theme Customizer enhances the user's experience. As such, we have a responsibility to implement it in our work in order to make sure that we're building the best products possible, as well as those that also benefit our users as much as possible.

When our users benefit, we benefit.

But even more than that, we're given the ability to push theme development forward by:

• Improving the way in which users work with themes
• Improving the way in which themes are customized and tweaked within WordPress itself
• Ultimately pushing ahead with a new way of modifying themes that doesn't require us to change the way we interact with the Settings API

All the while making it easier for others to interact with our work.

Up Next...

With all of that said, we're ready to move into writing some code. So starting in the next article, we're going to look at how we can work with a theme that already includes the Theme Customizer to introduce new options.

Later, we'll take a look at how to implement the Theme Customizer from the ground up, and then how to tie it into the WordPress Settings API so that users can begin to work with themes by no longer having to jump between the dashboard and the blog, but by being able to make changes and preview them in real time.