The WordPress Theme Customizer adds a lot of powerful functionality and versatility to WordPress themes. In this article we’re going to give an overview on what the WordPress Theme Customizer is, how it’s useful for both end users and developers, and how to integrate it into a basic WordPress theme.
The goal of this article is to bring someone with only superficial knowledge of the WordPress Theme Customizer up to speed with its features, and provide enough of an overview of the resources available learn the basics of adding functionality to a theme with the WordPress Customizer.
Before we get into the technical aspects of implementing our own functionality into the Theme Customizer, lets first look at what the Customizer is and why it matters.
What is the WordPress Theme Customizer?
The WordPress Theme Customizer API was added back in WordPress 3.4 (released in 2012), allowing developers to customize the admin screen shown to users in the Theme Customization panel. This screen allows site admins to tweak the enabled WordPress theme, and view the changes in real time without having to leave the admin interface.
Essentially, the Customizer allows admins to make changes to their blog and simultaneously view these changes real-time. If you’ve spent any amount of time with WordPress, you’ve undoubtedly used or at least seen the WordPress Theme Customizer.
The WordPress Theme Customizer Interface.
There are obvious advantages for both theme developers and end-users, which we’ll explore below.
What’s the point?
The gist of the Theme Customizer is that it allows the developer to include certain tweak-able portions to their theme, and it allows the user to preview the theme and view any changes they make in a real-time panel, foregoing the clunky process of switching between their admin interface and a client facing version of their site.
End users benefit mostly from the more friendly process of tweaking their theme without having to constantly switch back and forth between admin and client versions of their site. This process saves a few seconds per change, but as anyone who’s dealt with making changes to their own site or a client’s, those few seconds add up over the course of dozens or even hundreds of tweaks.
This is one aspect of the WordPress platform that gives it the edge over more bare-bones website building tools, especially for users who are not from a web design/development background. For developers, the Customizer adds important functionality that allows them to better serve the needs of the end-user.
One of the most interesting aspects of the WordPress ecosystem is the relationship between the WordPress developers and the WordPress managers. WordPress was one of the first platforms that facilitated the role of a manager or administrator as someone who knows the platform but is not necessarily a web designer or developer themselves. This means that intermediary systems have come into existence that allow non-technical users accomplish what would otherwise require a certain level of technical know-how. The WordPress Theme Customizer is an intermediary system that does a great job giving admins the ability to customize their website to an amazing level of detail.
In addition, as stated earlier, since the Theme Customizer replaces the process of switching between live site and admin interface, the user ultimately spends more time customizing the look and feel of the site, making themes feel easier to use and more friendly towards less experienced users.
Before we dive in to the technical details of the Theme Customizer, it’s important that we first look at some WordPress theme development to get an idea of what we will be customizing.
Building a simple theme
A WordPress theme generally consists of a selection of HTML, CSS, and PHP, all of which occupy files in the theme’s folder. While building a WordPress theme from scratch is a bit outside the scope of this article, if you haven’t yet dabbled with WordPress theme development, don’t be afraid to get your hands dirty. The entire process is simpler than you would first think.
If you’re interested in developing your own theme from scratch[Tutsplus.com offers a great introductory course for WordPress Theme development] I highly recommend. [The WordPress Codex] is also a good resource for beginner and advanced theme developers alike.
Once you have a theme ready to go (built by you, or someone else!), now it’s time to look at how the WordPress Theme Customizer is integrated with the theme itself.
How do Themes and the Customizer work together?
Since WordPress 3.4, the Theme Customizer has been enabled by default, meaning some basic functionality will be available to all themes without any extra effort on the developer’s part. These basic options are usually limited to editing the title and tagline of the theme, but additional functionality isn’t too difficult to implement.
Essentially, if the style.css file is included in even your most basic theme, and your header.php is correctly formatted to indicate the basics of your blog information, the WordPress Customizer is able to create some basic settings for your users to change. Almost all modern themes will come with at least these basics in place, and most will have customizability that goes beyond the simple site title an tagline fields.
If you’re interested in learning how to modify your WordPress theme to include more options for customization, [Tutsplus.com has another course on their website] that can walk you through the process of editing the necessary theme files to have your own functionality in place inside of the WordPress Theme Customizer.
Hopefully here I’ve given you a solid understanding of what the WordPress Theme Customizer is, and how you can potentially use it in your own WordPress projects. This foundation should be enough for you to begin experimenting with WordPress thumbing yourself, if you’re brand new to WordPress development. If you aren’t a complete beginner, hopefully this article serves as a good refresher on the ideas behind the WordPress Theme Customizer, and how you might be able to better utilize it for yourself or your users in the future.