WordPress 3.4: Making Your Theme Compatible with the Theme Customizer
- How Does the Theme Customizer Work?
- Adding Customizer Support to Your Theme
- Setting Up Sections, Settings, and Controls
- Enabling the Front End
- Testing It All Out
- That's It, You're Done!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
As I described in my earlier article "WordPress 3.4: Using the New Theme Customizer," the Theme Customizer and live preview in WordPress 3.4 give you an easy way to make and preview changes to your themes—without touching a line of code. But what if a theme you love isn't compatible with the Theme Customizer? Never fear—with just a few blocks of code, you can make any theme work with the Theme Customizer.
How Does the Theme Customizer Work?
The Theme Customizer gives you an easy way to make changes to your site by modifying your themes. By default, you can add the following site sections to the Theme Customizer (see Figure 1):
- Site Title & Tagline
- Colors
- Header Image
- Background Image
- Navigation Menus
- Static Front Page
)
Figure 1 The Theme Customizer menu shows the customization options available for your theme.
If your theme has any of the listed options enabled, they'll automatically show up in the Theme Customizer. For example, in my article "WordPress 3.4: Flexible Header Images," I added a function for flexible header support. As Figure 1 shows, when I viewed that theme again in the Theme Customizer, the Header Image option was already there!
Some themes support additional options. For example, the Twenty Eleven theme allows you to choose a layout for your site.
The Theme Customizer also allows you to preview your changes before publishing them to your site (see Figure 2).
)
Figure 2 When you change a setting in the options on the left, that change is reflected in the preview pane on the right—but your live site is unaffected until you click the Save & Publish button.