Awesome WordPress 3.4: Theme Customizer

WordPress logo

WordPress 3.4 has a number of exciting new tools and features. Over the next several weeks I’d like to share some of the highlights with you. Please do note that the current version of WordPress is 3.4.1 -which includes some important bug fixes- but because these features were included in the 3.4 “Green” release, I’ve chosen to reference the core.

One of these new tools is the Theme Customizer, which provides a WYSIWYG (what you see is what you get) editor for some style and display options.

To access the Theme Customizer page, you can reach it via a link directly under the active theme area.Alternatively, you can find it in the admin menu bar beneath your site’s name when you are logged in and viewing your site. You should end up at a screen looking like this:

Wordpress 3.4 Theme Customizer

 

Looking at the options on the left side, we can see that there are a number of things we can alter. (I am referencing WordPress Twenty Eleven. Depending on your theme, there may be varying levels of support for this, so be sure to check what version of WordPress your theme is compatable with.)

The top box drops down to provide the description of the current theme–though there isn’t an option to change it here.

The second allows you to alter the site’s title and tagline. If you make a change to either, you will notice that the preview on the right instantly updates. This is the case with all edits done from the customize page — hence the WYSIWYG feature — though none of the previewed changes take effect until you click the “Save and Publish” button on the top of the toolbar.

One of the coolest functions of the “Theme Customizer” tool is the “Color” option. This allows you to preview and select a change in color scheme– for example, Twenty Eleven has a light and dark color scheme built in– header text color, background color and link color.

WordPress Theme Customizer Color option

Clicking on one of the swatches displays a color wheel, which allows you to slide and select your color, or you have the option to input a hex value if you already know what color you’d like.

Layout does just what it says–allows you to select from the theme’s default layouts. It is important to note that this change seems to cascade throughout the site, so if you select “No sidebar”, you will not only be removing it from your homepage, but from your blog as well. If, however, you want to set all your pages to the same template with minimal amount of clicking, this is definitely the way to go.

Header Image lets you select a header image from the defaults, uploads, or upload a file. The uploader is much like the media uploader, allowing you to drag and drop the image or select it by browsing. The uploaded tab shows you images that you have uploaded previously. The default tab allows you to view all header images packaged with your theme. You also have the option to remove the header image entirely.

Background Image is, again, self explanatory. This gives the same options as the header image (upload, remove and, depending on your theme and your prior changes, uploaded and default). Once you make a selection, you are given the options of background repeat (change if or how your image tiles), background position, and background attachment (if the picture scrolls with your content).

While an option available in the Settings>>Reading menu, Static Front Page with the customize tool is easy to find. You also can preview how the front page will look if you switch it to a static page, or if you want to display your posts.

The option to customize your WordPress theme via a WYSIWYG editor gives you even more freedom and control over your site. If you don’t know CSS or don’t want to mess with the theme’s style sheet directly, you are no longer forced to choose a theme simply based on available color schemes or background. Are you a theme designer/developer? Then check out “Add Customizer Support to Your WordPress Theme” to learn how to add customizable options to your own theme.