Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

WordPress 3.4: Making Your Theme Compatible with the Theme Customizer

  • Print
  • + Share This
Use the WordPress 3.4 Theme Customizer for fast, easy, nearly code-free editing of your custom WordPress themes! Jessica Neuman Beck, coauthor of WordPress: Visual QuickStart Guide, Second Edition, shows how to update an existing theme with the WordPress 3.4 Theme Customizer.
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.

  • + Share This
  • 🔖 Save To Your Account