How To: Use a Header Image with Thesis

There are a ton of things I love about Thesis, many of which I go over in my Why Thesis post. However, one thing that people often have trouble with is including a header image instead of just text. There are plenty of tutorials on how to do this out there, but many of them handle it just plain wrong. The biggest issue I have is that many tutorials advocate using this faulty line of code:

.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

No, no, no. This little snippet casts the text headline 9,999 pixels to the left, so it will never be seen. It technically works, but it’s more of a hack than a solution. One day, search engines may decide that they really don’t like the practice of hiding text this way, much like they don’t like white text on white background.

What’s the right way to get rid of the text?

Thesis has a built-in hook for exactly this purpose, though few people use it. This is the hook you’re looking for:

remove_action(‘thesis_hook_header’, ‘thesis_default_header’);

That gets rid of the header text correctly, instead of just hiding it. The next step is to actually add your header. This is the code:

function custom_header() { ?>
<div id=”headerlogo”>
<a href=”<?php bloginfo( ‘url’ ); ?>/”>
<img src=”<?php bloginfo(‘template_directory’) ?>/custom/images/header.jpg” alt=”Dont forget your alt text here” />
</a>
</div>
<?php }
add_action(‘thesis_hook_before_header’, ‘custom_header’);

Of course, you’ll need to make a header image, and upload it to the /custom/images directly of your Thesis installation.  So, to put it all together, just copy and paste this block of code into your custom_functions.php file:

function custom_header() { ?>
<div id=”headerlogo”>
<a href=”<?php bloginfo( ‘url’ ); ?>/”>
<img src=”<?php bloginfo(‘template_directory’) ?>/custom/images/header.jpg” alt=”Dont forget your alt text here” />
</a>
</div>
<?php }
add_action(‘thesis_hook_before_header’, ‘custom_header’);
remove_action(‘thesis_hook_header’, ‘thesis_default_header’);

That’s it.  One tiny block of code, and you have a clickable image header in Thesis.