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: http://codex.wordpress.org/Custom_Headers

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!

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. 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. 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 and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

4 Comments.

  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.

    Regards,
    Vivek,

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

  3. xe dap dien says:

    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.

Leave a Reply

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

*