Enable WordPress 3.0 Features for the Thesis Theme

If you haven’t heard, Wordpress 3.0 dropped the other day with a bunch of new features.

Although there’s no news on a Thesis update, Thesis 1.7 seems to work fine with WordPress 3.0 but unfortunately doesn’t cash in on any of the new features. I’ve decided to tackle a few of those features to make them available right away:

• Custom Background Option
• WP 3.0 Navigation Menus
• Custom Header Image

Use the WordPress 3.0 Custom Background Option with Thesis

Let’s start small. Open up your custom_functions.php file (found in the custom folder) and add the following code at the end of the file:

add_custom_background();

Now if you pop in your Dashboard, drop down the Appearance tab you should see a Background option where you can set a background colour or image. I’ve heard plenty of people looking for this sort of customization so hopefully it helps!

Use WordPress 3.0 Navigation Menus with the Thesis Theme

I’ve seen a few tutorials on this already out in the wild- however they don’t provide full functionality like I had expected, so I worked in my own. Again, open up custom_functions.php and paste this code there:

add_theme_support('menus');
register_nav_menu('primary', 'Primary Navigation');
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'new_menu');
function new_menu() {
   	wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
}

This will allow you to use the Menus option found under the Appearance tab in your Dashboard. Also (and this is where other solutions fell flat) you can create different sets of menus and switch them out as you please. Check the screen shot to see what I mean. Furthermore, you can see how you can use the code above to create different menus in different areas (say a menu in the footer area).

Use WordPress 3.0 Custom Header Images with Thesis

I’ll finish this round of WP 3.0 tricks off with a long set of code that gives functionality to change out the header background image for Thesis. This one is a bit “hacky” but I’ve tested it out with a bunch of different options and it seems to work fine.

So like usual, fire up your code editor and open custom_functions.php. Add this set of code to it:

global $thesis_design;
$layout = $thesis_design->layout;
$width_one = $layout['widths']['content'];
$width_two = $layout['widths']['sidebar_1'];
$width_three = $layout['widths']['sidebar_2'];

if ($layout['columns'] == 3) { $width_full = $width_one+$width_two+$width_three+79; }
elseif ($layout['columns'] == 2) { $width_full = $width_one+$width_two+57; }
elseif ($layout['columns'] == 1) { $width_full = $width_one+22; }

define( 'NO_HEADER_TEXT', true );
define('HEADER_IMAGE_WIDTH', $width_full); // Width will change automatically (depending on your Thesis options)
define('HEADER_IMAGE_HEIGHT', 110); // If you need a taller header image change this value

function header_style() { // Gets included in the site header
	?><style type="text/css">
    	#header { background: url(<?php header_image(); ?>); }
    </style>
<?php }

function admin_header_style() { // Gets included in the admin header
    ?><style type="text/css">
        #headimg { width: <?php echo HEADER_IMAGE_WIDTH; ?>px; height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; }
    </style>
<?php }

add_custom_image_header('header_style', 'admin_header_style');

What this does is allow you to set a background for the Header element (which contains your Site Heading and Tagline). You can use the WP 3.0 crop tool as well. Check out the screenshot to see a (small) header that was easily uploaded and changed with this procedure.

Source File

I’ve packaged all three bits of code and have it available for download here. If you copy all of these functions over you should see three new options when you drop down your Appearance menu in your WP dashboard. If you don’t, make sure you have the latest version of both Thesis and WordPress and that you copied everything over correctly.

Let me know if you find any issues or anything wrong with my code!

Bonus: Even More WP 3.0 and Thesis Tutorials

• Looking to work in new WP 3.0 Custom Post Types and Taxonomies? Check out Kristarella’s post here.
• Problem with the custom file editor when updating to WordPress 3.0? Find the fix here.