Customizer Makes Admin Tasks a Breeze

The WordPress Customizer, originally referred to as the Theme Customizer but more and more as simply the Customizer, has been built into WordPress since 2012. The WordPress Theme Customization API on which it is built reaches back to WordPress 3.4, but with the customizer improvements added in WordPress 4.0, theme developers are making increased use of it. This is great news for WordPress users, and this article will provide a basic overview of what the Customizer does and why it’s important. Our customizer tag archive is a great way to find themes that build on the default capabilities offered by the Customizer.

The Customizer provides control over settings for your site in one location, and its live preview makes it easy to explore possible changes to those settings. That gives you the ability to save and publish changes only after you’re happy with how they’ll appear on your site. The screenshot above shows that the Customizer is found on Appearance->Customize in your WordPress dashboard.

The recent introduction of Café Pro by StudioPress is a great example of how developers use the Customizer to put more easy-to-access power in the hands of WordPress site administrators. Café Pro is the third StudioPress theme with Customizer-specific features, and it’s the most polished StudioPress implementation to date. Using the Café Pro theme as an example, let’s look at what the WordPress Customizer offers out of the box and how it’s extended by theme developers to control theme-specific features.

WordPress Customizer In the Café Pro Theme

The screenshot below shows the Customizer in the Café Pro theme and its 11 sections. The settings you can customize are grouped in sections on the left; the live preview appears on the right. Clicking on a section heading displays the settings in that section; clicking on the section heading again hides those settings.

In the screenshot below, the blue Saved button in the upper left is dimmed because there are no pending changes. Once you make a change, the button will automatically change to Save & Publish. You need to Save & Publish any changes you make in the Customizer that you want to keep; otherwise, they’re lost once you click the X in the upper left. However, if you have pending changes and click the X to leave the Customizer, you’ll be asked to confirm that you really want to leave and abandon your changes.

If your theme supports the underlying feature, WordPress automatically includes a limited number of Customizer settings in 7 sections:

1. Site Title & Tagline
2. Colors
3. Header Image
4. Background Image
5. Navigation
6. Widgets
7. Static Front Page

For example, you can visit Settings->General and change your site title or tagline, or you can visit Appearance->Customize and click on the Site Title & Tagline section. However, you’ll soon see that this is more than just providing another way to access the same setting.

Customizer Controls Automatically Added By Genesis

The controls added by WordPress explain 7 of the 11 sections shown in the Café Pro customizer. The Genesis framework extends this in code found in \genesis\lib\admin\customizer.php, by adding new sections for:

1. Site Layout
2. Breadcrumbs (if supported)
3. Comments and Trackbacks
4. Content Archives
5. Color Scheme (if genesis-style-selector is supported)

Since Café Pro doesn’t support genesis-style-selector, Genesis only adds 4 sections, rounding out the 11 sections of the customizer.

Open a Customizer Section To See the Power of Settings

Settings are specific to each section, and theme developers can add entire sections as well as new settings within an existing section.

The nearby screenshot illustrates how the Café Pro theme makes use of the default WordPress Colors section to add a setting for Accent Color.

Clicking the Select Color button opens a color picker that is pre-loaded with a default value. You can change that value by entering a new hexadecimal value or selecting a color using the color picker.

The color description provides useful information about where this color is used in the theme. Unsaved changes are displayed in the live preview once you make them, so clear descriptions guide you to spot and review the change. Since Café Pro’s Accent Color targets links, just look for a link on the live preview to review your pending change.

The Customizer Live Preview Is More Powerful Than You Might Think

Our example of changing a link color is easily understood, but what happens when you’re customizing an element that’s not on the current page? This causes some administrators to come to a screeching halt and brush off the benefit of the live preview. But WordPress developers built a powerful live preview functionality that’s not limited to previewing just one page.

By default, the Customizer starts out on your site’s home page.

If you want to see how current, pending (ie, still unpublished) customizations affect other pages, simply browse to those pages in the live preview.

Pending, unpublished changes will be reflected in the live preview of all pages on your site while you’re in the Customizer.

In other words, if a visitor can reach a page on your site by following a link from your home page, you can use the Customizer to preview how pending changes will impact that page.

Manage Widgets Using the Customizer

Managing widgets is one of the most powerful features of the Customizer. Outside the Customizer, it’s done by visiting Appearance->Widgets. Like managing settings, it’s also a common administration task. The Customizer puts both tasks in one place.

Clicking the Widgets section replaces the list of sections with all of the widget areas supported by your theme.

Clicking the Add a Widget button (shown above for the Front Page 1 widget area of the theme) displays a scrollable, searchable list of all currently defined widgets in your theme, and clicking on a particular widget adds that widget to the selected widget area.

Once a widget is added to a widget area, you can adjust the widget settings or use drag-and-drop to reorder widgets within an area.

Manage Theme Features Using the Customizer

Theme developers can use the customizer to give users the ability to manage specific theme features, and that’s just what StudioPress did in the Café Pro theme. The theme supports up to 3 background images on the home page, and StudioPress leverages the customizer, along with the built-in WordPress Media Library, to provide a way to change these images, including uploading new images if necessary. The description provides helpful hints on recommended image size exactly where you’d expect it – the place where you can customize background images.

The Customizer Pulls Together & Improves Administration

The WordPress Customizer is a powerful tool for customizing sites running themes that take full advantage of its features.

Most, if not all, of the administration functionality afforded by the customizer is already available in your WordPress dashboard. You can visit Settings->General to manage your site title and tagline. You can visit Appearance->Widgets to manage widgets. And in a Genesis child theme, you could navigate to the Genesis->Theme Settings menu to manage your site layout and comment/trackback settings, among other things. The customizer brings all of this site-setup functionality together in one place, making it easier for novices and pros alike to more easily manage a site.

Further, the Customizer’s live preview capability makes the Customizer more powerful than other ways to manage the same settings. For example, if you visit Settings->General and change your site title or tagline, you’ll have to have a separate browser tab open with the public-facing side of your site, and refresh it after saving your changes. Both you and your new visitors will see your just published change, even if it’s less than perfect. Once you adjust the same setting using the Customizer, its live preview immediately updates in the same browser tab, affording you the opportunity to quickly revise or cancel your pending change before publishing it and showing it publicly.

For all of its goodness, the Customizer can be improved further. For example, in its current implementation, the Customizer will reflect the mobile responsive design of your theme when you change your browser’s width. However, the Customizer on WordPress.com includes a button in the live preview area to simplify even further the process of reviewing the impact of settings changes on the most popular screen sizes. Such improvements will only build on what is a powerful feature in WordPress.