Add Support for Theme Customizer in WordPress 3.4 Themes

WordPress 3.4 Green (named after jazz guitarist Grant Green) was recently released with tons of new features, customization options, and improvements. The three major new features introduced in this release are:

• Twitter Embeds: Simply add a tweet URL in a post and it will be embedded in a clickable way for replies, retweets, and more.
• HTML Image Captions: You can now include basic HTML in image captions for giving credits or for linking to information.
• Theme Customizer (with Previewer): It allows you to make changes to themes and view them in real time.

Theme Customizer basically combines several features already available in the dashboard into one easy to use tool. You can access this by navigating to Appearance > Themes > Customize link beside active theme.

The Theme Customizer can change the following settings: site title and tagline, header and background colors, sidebar layout, header image, background image, navigation, and static front page.

In v3.4 custom backgrounds and custom headers theme features have undergone some changes. To use Theme Customizer with them, you need to add support for these changes.

So here’s how you can do that:

This is how you register support for a feature:

<?php add_theme_support( $feature ); ?>

$feature is the name of the feature that is to be added. Available parameters are:

• custom-header
• custom-background
• post-formats
• post-thumbnails
• automatic-feed-links

I will show you how to add all these features in this post.

All following codes go into your active theme’s functions.php file.

Enable Custom Header Support

This is the function that adds custom header feature:

add_theme_support( 'custom-header' );
$defaults = array(
	// Header image default
	'default-image' => '',
	// Header image random rotation default
	'random-default' => false,
	// Header image width (in pixels)
	'width' => 0,
	// Header image height (in pixels)
	'height' => 0,
	'flex-height' => false,
	'flex-width' => false,
	// Header text color default
	'default-text-color' => '',
	// Header text display default
	'header-text' => true,
	'uploads' => true,
	// Template header style callback
	'wp-head-callback' => '',
	// Admin header style callback
	'admin-head-callback' => '',
	// Admin preview style callback
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

If you’d like to pass default arguments, it can be done like this:

$args = array(
	'default-image' => 'http://yoursite.com/header-image.png',
	'width' => 900,
	'height' => 80,
	'default-text-color' => '000000',
);

Finally update header.php:

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" color="<?php echo get_custom_header()->default-text-color; ?>" />

Enable Custom Background Support

add_theme_support( 'custom-background' );
$defaults = array(
	'default-color' => '',
	'default-image' => '',
	'wp-head-callback' => '_custom_background_cb',
	'admin-head-callback' => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

You can pass default arguments here as well.

That’s it! Now you can customize your theme’s header and background.

Your theme might be already having other WordPress theme features, but if it is missing, you can enable it by following rest of the post.

Enable Post Formats Support

add_theme_support( 'post-formats', array( 'gallery' ) );

Other available post formats are: aside, link, image, quote, status, video, audio, chat

Enable Post Thumbnails Support

add_theme_support( 'post-thumbnails' ); // Everywhere
add_theme_support( 'post-thumbnails', array( 'post' ) ); // Only Posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Only Pages

And to display thumbnails in your theme, use:

the_post_thumbnail();

Enable Feed Links Support

add_theme_support( 'automatic-feed-links' );

That’s all!