Thesis 1.6 Header Customization, Part 1

by Matthew on December 30, 2009

Previously, I separated the site nav from the header. That leaves the header to be dealt with. First, let’s look at what Thesis does with the header by default:

<div id="header_area" class="full_width">
<div class="page">
	<div id="header">
		<p id="logo"><a href="http://blog.matthewcampagna.com">Matthew Campagna</a></p>
		<h1 id="tagline">Just another WordPress weblog</h1>
	</div>
</div>
</div>

Thesis claims to be coded with SEO at the fore of concerns, but I find myself unable to reconcile that claim with the above code. Don’t get me wrong; so far, I think Thesis is pretty brilliant. But according to my understanding of SEO, header tags weigh heavily into the hierarchy of importance on a page, and no header tag weighs more heavily than H1. In the above code, the blog title is contained within a P tag — fairly unimportant to SEO — while the tagline, “Just another WordPress weblog”, receives the star treatment.

With this in mind, my goals become two-fold. First, I need to rearrange the code such that my blog title is contained within the H1 tag and therefore receives higher consideration than my tagline by search engines; I will probably contain my tagline within H2 tags instead. Secondly, I wish to setup my header such that it will be easy to replace the text with an image at a later time, should I choose to do so.

To achieve the first goal, changes need be made to the custom_functions.php file. As documented, we know that thesis_hook_header is the hook that determines the content of div#header, and that’s all we’re going to replace. Add this to the custom_functions.php file, straightening quote as necessary:

//custom header
remove_action('thesis_hook_header', 'thesis_default_header');
function custom_header() { ?>
		<h1 id="logo"><a href="<?php echo get_option('home'); ?>/"><span><?php bloginfo('name'); ?></span></a></h1>
		<h2 id="tagline"><span><?php bloginfo('description'); ?></span></h2>
<?php }
add_action('thesis_hook_header', 'custom_header');

This custom code is so unobtrusive that you likely won’t see any change at all when you reload the page. By applying the same id selectors that Thesis already uses, styling remains within Thesis’ parameters. The hierarchy of importance for our title and tagline has been redefined, however, weighing SEO more heavily on our blog title, and the code is setup such that we can easily disappear the text, visually replacing it with images via CSS while keeping the text visible to search engines in the underlying code, again in the better interests of SEO.

Whether you intend to perform an image replacement or not, I reckon this is a better architecture for your header. In Part 2, I will go into image replacement.

Leave a Comment

Previous post:

Next post: