One thing I always disliked about theme settings pages was how vastly different they would get. Imagine every car manufacturer trying to add their own touch by having unique wheel placement and you’ll see why that’s a bad thing for WordPress publishers.
Luckily, since 3.4 and thanks to Theme Customizer API we don’t need settings pages at all.
@slobodanmanic the Customizer sort of made my blog useless, which is also a good thing 🙂
— Konstantin Kovshenin (@kovshenin) December 19, 2012
The blog in question is Theme Options Gallery, showcase of “the best (and the worst) theme options screens in town”. Mostly the worst, but I guess that’s what made it popular. According to Konstantin, it’s Theme Customizer that will make it obsolete.
Throughout this post series we’ll take a look at benefits of using Theme Customizer over “old” settings pages, go through how Theme Customizer works, see how you can extend it and finally create Theme Customizer boilerplate that can be used with any WordPress theme.
Theme Customizer Benefits
Now, I’m not saying theme settings pages are (were?) all bad – if done right, they feel like a natural extension of WordPress dashboard – just that there’s something better now. What Customizer does, compared to a settings page, is make theme setup process easier by taking blindfold off of user’s head.
If you never saw it in action, this video by Otto is a must watch:
So, what exactly is Theme Customizer? According to Codex:
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.
Theme Customizer in a Nutshell
Theme Customizer has three main components – sections, settings and controls. If Theme Customizer was a house, your living room would be one of the sections, every light in it would be a setting and every light switch a control. It’s that simple.
To interact with Theme Customizer, you have to hook into customize_register action. By doing that you’ll load $wp_customize object, an instance of WP_Customize_Manager class which does all the heavy lifting. More on that in Part 2 of this series.
It’s Already There
If you don’t want to interact with Theme Customizer and just need to let it do it’s thing in your theme, it gets even easier. When you create a theme from scratch, Theme Customizer will already be there, showing its built-in sections. In fact, this is how far blank index.php and a style.css with nothing but comment header lines will get you:
Sure, there’s nothing to preview in that screenshot, because index.php does nothing, but that’s the point – if you’re a theme developer, Theme Customizer just screams “Whenever you’re ready!” so no reason not to use it in your WordPress theme.
There’s more default sections, but they only show up if your theme supports them, here’s full list of built-in sections:
- Site Title & Tagline
- Header Image*
- Background Image*
- Static Front Page
Marked (*) sections will appear only if your theme supports their respective features, if you want Header Image section to appear, all you need is add_theme_support( ‘custom-header’ ) somewhere in your functions.php file.
With all those sections built-in, there must be some existing controls (light switches, remember?) to fill them up. Here’s what WordPress gives you, out of the box:
- Text field
- Color picker
- File upload
- Image upload
- Background image
- Header image
Probably good enough for most themes, but if your theme is special (let me guess, it is, right?) and needs some custom controls, you can do that, too. Creating custom controls is one of the things we’ll cover in this series, so stay tuned.
That’s All, For Now
WordPress currently has sixteen APIs (try naming them all!) and if you judge them by how user friendly they are and how easy it is to jump in and start using them, not one comes close to Theme Customization API.
Did you already do your users a favor and switched from settings pages to Theme Customizer? If not, I’d love to hear why and if you have, what do you think about it so far?