Page specific headers in Thesis

I’ve done several posts about Thesis headers before: Thesis full-width headers, Full-width headers in Thesis 1.5 and CSS Custom Headers.

All of those lead you in the same general direction: a single custom header for your blog. I recently got asked for step-by-step instructions on how to specify different headers on specific pages. So, I’m going to show you two ways to achieve that: CSS image replacement and inline header images.

CSS image replacement

The simplest way to customise your header (in my opinion) is to use a background image. There are several permutations of the CSS¹ that will achieve such a thing, but the bare minimum would be something like the following.

.custom #header {background:url(images/header.jpg) center top no-repeat; height:150px; padding:0 1.1em;}
	.custom #header #logo a {display:block; height:150px; text-indent:-9999px;}

If header.jpg is in your custom/images folder and you’ve unchecked the option to display the tagline on the Thesis Options page, the above CSS will give you a clickable header that looks like…

This will be the header for every page that we don’t specifically change.

Page specific body class

Thesis provides body classes for all the pages in your WordPress site. You can also provide your own body class to any page or post by filling in the relevant field when writing a post. On top of all that you can filter the body class via a custom function to add a body class to any page accessible via conditional tags.

Page specific header

Using the page specific body classes, we can give individual pages their own CSS header. All you need to do is use .page-name instead of .custom.

Assuming the new image is the same height as the default one, the CSS to give your About page a unique header is…

.about #header {background:url(images/header_about.jpg) center top no-repeat;}

Adding body classes

You can keep adding unique headers across your site to your heart’s content… If the page you want to target doesn’t already have a unique body class you can give it one with the following function.

function custom_body_classes($classes) {
if (is_home())
	$classes[] = "home";
if (is_category())
	$classes[] = "category";

	return $classes;
}
add_filter('thesis_body_classes','custom_body_classes');

This function (placed in custom_functions.php) specifies the pages to target using conditional tags, and then adds the desired classes to an array called $classes, which is filtered back through the Thesis function that outputs the body classes². Using this we could give the same header to all the category archive pages (with is_category()), or all the posts in a specific category (with in_category('Fancy Headers') and so on.

CSS summary

All of the CSS put together might look like the following.

.custom #header {background:url(images/header.jpg) center top no-repeat; height:150px; padding:0 1.1em;}
.about #header {background:url(images/header_about.jpg) center top no-repeat;}
.archives #header {background:url(images/header_archives.jpg) center top no-repeat;}
.category #header {background:url(images/header_category.jpg) center top no-repeat;}

	.custom #header #logo a {display:block; height:150px; text-indent:-9999px;}

Inline header images

Alternatively, we can use PHP and HTML instead of CSS to replace the contents of the header.

The whole function that goes in custom_functions.php is,

function custom_header() {
	// header for About page
	if ( is_page('About') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_about.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for Photos category pages
	elseif ( is_category('Photos') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_purple.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for posts in Tutorials Category
	elseif ( in_category('Tutorials') )
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header_tutorials.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';

	// header for all other pages
	else
		echo '<p id="logo"><a href="' . get_bloginfo('url') . '"><img src="' . THESIS_CUSTOM_FOLDER . '"/images/header.jpg" alt="' . get_bloginfo('name') . '" /></a></p>';
}
remove_action('thesis_hook_header', 'thesis_default_header');
add_action('thesis_hook_header', 'custom_header');

Understanding the function

• The only parts that need changing are the conditional tags and the image names.
• There is a list of conditional tags in the WordPress Codex that can be used in this function.
• In the HTML markup for the header I’ve included <p id="logo"> to match the default Thesis markup.
• get_bloginfo('url') is PHP and fetches the URL of your blog.
• get_bloginfo('name') is PHP and gets the name of your blog. This is important as the alternative text for the image; if the image doesn’t load for any reason the alternative text will be shown and since we wrapped the image with <p id="logo"> it will be formatted correctly as the blog title.
• remove_action('thesis_hook_header', 'thesis_default_header'); removes the default markup of the Thesis header so that we can add our own content into the header.

If you want to insert this code using the Thesis OpenHook plugin, make sure that you convert the function properly and don’t forget <?php ?> tags around the conditional tags.

Best of luck and feel free to ask questions in the comments below!

1. If you want more info on basic CSS elements and syntax, have a look at the Tizag CSS tutorial [↩]
2. For more about PHP syntax and operations check out the Tizag PHP tutorial [↩]