Using the new WordPress 3.4 Theme Customizer

Published by | Friday, June 15th, 2012

Of the many great reasons for using WordPress to create your web site or blog, one of the most important ones is that WordPress is an ever evolving platform. That means with every new version release you can expect to see either security and usability upgrades, or the addition of whole new features. In the case of the latest WordPress evolution—version 3.4, released for WordPress.com and WordPress for self-hosting—we see both regular security hole fixes and code patches, as well as some cool new features for site owners and developers. One feature in particular that is worth special mention is the new Theme Customizer.


Using the WordPress 3.4 Theme Customizer The major update of 3.4 is the introduction of the Theme Customizer. This new feature makes it possible for an administrator to change most theme-related elements of a WordPress site in a live environment and see how those changes look before publishing them to the live site. Previously these customization features were found under several different sections in the admin area, and to apply them you had to make one change at a time and then open the site in a different window to see the result. The Theme Customizer is a one-stop-shop for theme customization, and depending on what theme you are using, you’ll be able to change everything from the site title and description, to menus, what is displayed on the front page, background colors, header images, and more. Once logged in as an administrator you can access the Theme Customizer both from the front end and the Admin panel on your site. From the front end you’ll find the Theme Customizer on the WordPress menu under your site name.

Theme Customizer on the WordPress menu under your site name.

In the Admin panel you can activate the Theme Customizer for the site’s current theme by going to Appearance > Themes and clicking Customize. Activating the WordPress Theme Customizer from the Admin panel.

In either case, you are taken to the Theme Customizer for the current theme which consists of a collapsible left-hand sidebar with all the customization features and your site in preview mode on the right.

WordPress Theme Customizer screenshot.

Theme Customizer with editing options displayed in the left sidepanel, and a preview of your changes displayed in real-time in the full, right-side view.

 

Screenshot of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Zoomed in view of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Using the Theme Customizer is really very easy. To get started simply open the feature you want to change in the sidebar, for example Site Title & Tagline, or, as seen below, Header Image, and make your changes. As you make changes to the different elements, the live site preview will change on the right to reflect these changes.

Changing the Header Image in the Theme Customizer left-hand sidebar.

Changing the Header Image in the Theme Customizer left-hand sidebar.

The addition of that Theme Customizer sidebar itself takes care of a bit of JavaScript that I can’t quite wrap my head around. While that unto itself is very cool, what’s even cooler is that you can navigate your site as you make these alterations and see what your customizations look like on different pages—all in real-time without your visitors being aware of what’s going on. Very, very cool.

Once you’ve made your customizations and you’re happy with how the theme looks, go to the top of the customizer and click the Save & Publish button and your new settings will be activated on your site. If you don’t like your customizations, simply click Cancel and you are back to the Admin panel without any trace of anything having ever happened. Since this is a brand spanking new feature most themes only have support for the regular functions right now, but expect the Theme Customizer to showcase some pretty snazzy features once theme developers dive into the code for real.

Other WordPress 3.4 updates of note
WordPress 3.4 has two other cool updates under its sleeve:

1. If the theme allows it, you are no longer restricted to a specific size for the header image. As an example, that means you can upload a full-height image in the Twenty Eleven theme and have it take up most of your page if you want. I’m not sure that’s a good idea, but the option is there if you want to try it out. My recommendation is you try it in the Theme Customizer to see what it looks like first.

2. Image captions now allow HTML elements, so you can make fancy captions with text that has bold or italic emphasis, links, and all sorts of other interesting HTML touches.

To find out more
Now that you know what’s new and what’s possible, go test out the Theme Customizer, try some HTML captions, and check out the new and improved WordPress 3.4 for yourself. If you want to see the full list of goodies under the hood of WordPress 3.4 take a look at the codex.wordpress.org version 3.4 article. If you need some extra help, visit lynda.com to check out my full collection of lynda.com WordPress courses.

 

Interested in more?
• All web + interactive courses on lynda.com
• All WordPress courses on lynda.com
• All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:
• WordPress Essential Training
• WordPress 3: Creating and Editing Custom Themes
• WordPress 3: Developing Secure Sites
• Creating and Managing a Blog Network with WordPress

 

Share this:Share on Facebook35Tweet about this on Twitter16Share on Google+0Pin on Pinterest1Share on LinkedIn2

lynda.com - start learning today

Tags:


7 Responses to “Using the new WordPress 3.4 Theme Customizer”

  1. hawes says:

    WordPress just keeps getting better – it’s gotta be the fastest evolving CMS, most developer support by far, and just the best place for web designers and template / theme designers to invest.

    Thanks for the update!

  2. Colleen says:

    The option to actually go in and actually edit actual theme code seems to be gone or moved someplace I can’t find it. How can I just go in there and bash directly on the theme code files like the good old days?

    • Morten Rand-Hendriksen | lynda.com author says:

      @Colleen: I understand your confusion. The editor link that used to be in the Themes page is gone, but the theme editor function is still there; it’s just harder to find. If you click on the Appearance tab you’ll see an option at the bottom of the menu called Editor. This option will bring you to the good old editor of the current active theme. It’s a bit clunky, but it’s there.

      Just a tip: I don’t recommend editing a theme in this editor. It is the most destructive kind of editing you can do because there are no undos and no redos. Whatever you do in this editor is permanent. Instead I recommend creating a child theme and then editing that on your computer before uploading it. If you accidentally create a problem in your child theme, all you have to do is deactivate it or delete it and everything is back to normal.

  3. The themes are very attractive. It’s also user-friendly. The evolution of WordPress has been incredible. Their development has been very consistent for the past 3 years.

  4. Yogesh says:

    Do you have any theme customizer ( How to insert customizer options in wordpress theme?) tutorials in lynda.com

  5. […] Using The New WordPress 3.4 Theme Customizer by Morten Rand-Hendriksen. This article is written primarily for beginners who are just getting familiar with what the Theme Customizer offers. It’s not necessarily a guide for developers; however, if you’re looking for inspiration on how and what you can incorporate into your implementation of the customizer, then this is a good reference. […]

  6. […] Using The New WordPress 3.4 Theme Customizer by Morten Rand-Hendriksen. This article is written primarily for beginners who are just getting familiar with what the Theme Customizer offers. It’s not necessarily a guide for developers; however, if you’re looking for inspiration on how and what you can incorporate into your implementation of the customizer, then this is a good reference. […]

Leave a Reply