WordPress 3.4 Theme Updates

WordPress 3.4 “Green” arrived last week. We’re proud to announce all Organic Themes are compatible with the latest version of WordPress. In addition, we are updating several of our themes with the new WordPress 3.4 functionality. The latest Magazine Theme is the first to receive the updates, in addition to a new fully responsive framework and several significant enhancements.

We’re excited about the improvements made to the WordPress platform. In particular, the new Custom Header and Custom Background options — making theme customization easier than ever. If you just can’t wait for our next theme update to take advantage of the new 3,4 features, we’re happy to provide guidance for implementing the functionality on your own.

Custom Header Update

1. To update the Custom Header code, edit the functions.php file of your theme. Replace the following code:

include_once(TEMPLATEPATH.'/includes/custom-header.php');

With this code:

if ( function_exists('add_theme_support') )
$defaults = array(
'default-image'          => get_template_directory_uri() . '/images/logo.png',
'random-default'         => false,
'width'                  => 980,
'height'                 => 160,
'flex-height'            => true,
'flex-width'             => true,
'default-text-color'     => '333333',
'header-text'            => true,
'uploads'                => true,
);
add_theme_support( 'custom-header', $defaults );

Change the width, height and options accordingly to match your theme.

2. Within the header.php file, replace the following code:

<h1 id="title"><a href="<?php echo get_option('home'); ?>/" title="Home"><?php bloginfo('name'); ?></a></h1>

With this code:

<h1 id="custom-header"><a href="<?php echo get_option('home'); ?>/" title="Home"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" /><?php bloginfo( 'name' ); ?></a></h1>

3. Within the stylesheet, add the following code:

#custom-header {
display: block;
margin: 0px;
padding: 0px;
font-size: 0;
text-indent: -999em;
line-height: 0;
overflow: hidden;
z-index: 8;
}

If all goes well, your custom header should be updated. If you experience complications, consult our support forums for further guidance.

Custom Background Update

A much less complicated update. In the functions.php file, simply replace this code:

if ( function_exists('add_custom_background') )
add_custom_background();

With this code:

if ( function_exists('add_theme_support') )
$defaults = array(
'default-color'          => 'F9F9F9',
'default-image'          => get_template_directory_uri() . '/images/background.png',
'wp-head-callback'       => '_custom_background_cb',
'admin-head-callback'    => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Change the default color and image file name accordingly, depending on your theme.

If you have any further questions, don’t hesitate to consult our knowledgeable support forum moderators.

Posted by

David Morgan is the co-founder, designer, and developer of Organic Themes. He founded the company with Jeff Milone in 2009 on the Hawaiian island of Maui. David enjoys surfing, swimming, golfing and creating new web applications and products. Personal Site: http://dav.idmorgan.com