Make Your Theme WordPress 3.4 (Theme Customizer) Compatible

WordPress 3.4 GreenWordPress 3.4 is here and its time to checkout whats new in the box. Three features stand out – The Theme Customizer, Twitter Embed and HTML Support for Image Captions. (Yeah yeah, the stuff that they show on the Welcome page 😉

The default themes, Twenty Ten and Twenty Eleven are also updated to support the Theme Customizer, but you aren’t using the default theme, are you? But that doesn’t mean you can’t use the feature, here is how you can make the most of it.

Adding Theme Customizer Support For Your Theme

I have used the Cutline 2.2 theme for an example here. With this tutorial you should be able to add Custom Header Support, Custom Background Image and Custom Background Color to the theme.

Creating a Custom Header Area

Open up your functions.php and add the following code to it, somewhere it would look nice. This will tell WordPress that your theme supports Custom Headers:

// Custom Header
$args = array(
'flex-width' => false,
'width' => 896,
'flex-height' => false,
'height' => 163,
'default-image' => get_template_directory_uri() . '/images/header_1.JPG',
add_theme_support( 'custom-header', $args );

As you can see above, change the width and height as per your theme’s header image. Also the location of the default image. You can find more arguments here:

Now its time to set the default image and its thumbnail:

// Setting Default Header Image
register_default_headers( array(
'one' => array(
'url' => '%s/images/header_1.jpg',
'thumbnail_url' => '%s/images/header_1_thumb.jpg',
'description' => 'First Image'
) );

Then you need to pull this image from your header.php. Open up header.php and replace the header image with this:

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

Here is how it looks like on the Theme Customizer

Header Image (click to enlarge)

Header Image (click to enlarge)

Now it’s a matter of adding the Custom Background Image Support. Again to functions.php add:

// Custom Background and Color
$args = array(
'default-color' => '000000',
'default-image' => get_template_directory_uri() . '/images/light-tile.gif',
add_theme_support( 'custom-background', $args );

And that shows up like this on the Theme Customizer

Background Image (click to englarge)

Set Background Image (click to englarge)

Time to Test Out Twitter Embed

Moving on, lets see what happens when I paste this tweet:

And For the HTML in Image Captions

WordPress Green Is Here

This Caption Uses
So Much HTML!

Upgrade and have fun!

Email this to someoneTweet about this on TwitterShare on FacebookDigg thisPin on PinterestShare on Google+

Hey! Thanks for reading my article, I hope you enjoyed it. If you think your friends might find it useful, do them a favor and share it with them. They will thank you for it. My journal:

Posted in Pro Blogging, WordPress Tagged with: , , , ,


  1. Vivek Nath.R says:

    Hey Arun,
    First of all a big thanks. At first I’ve only 3 options in theme customize option, Now i,ve all the options after followed your tutorial.


  2. Nice code to customize the wordpress theme. Thanks for sharing such a good CSS Code.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Free Updates

Divi WordPress Theme

Divi WordPress Theme

My Review: Divi is the only WordPress theme you will ever need. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. You can surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!

Note: I am an avid user of Divi myself. When you use my affiliate link I will earn a commission, at no extra cost to you of course, and all the earnings are put towards running and improving this website. This is an honest review and my views are impartial.