Day 3: Twentyten header image as home button

On this Third Day of WordPress I’m going to cover something a lot of people ask about and something that is also a bit of a pet peeve for me: Making the header image of the twentyten theme into a Home link and get rid of the site title and description in the process. I’ve covered the topic of using an image as your home link in passing in previous posts, last of which was Simple Yet Powerful WordPress Hacks, but here I’ll go into a bit more detail and show you how to do this specifically in the twentyten theme using a child theme of your construction. Coincidentally this same example is covered in my Lynda.com video series WordPress 3.0 Essential Training.

Image as header Home link – the basics

Let’s cover the basics first. The purpose of this tutorial is to show you how to remove the text version of your site title and replace it with an image that still functions as a home link. We’ll attach the same attributes as the text title and let WordPress define things like where it points and what the alternate title is etc. automatically. The reason you want to do this is so that you can use your own logo as the home link rather than a block of text. I say this is a pet peeve of mine because I find a lot of sites that have a logo that is not a home link and when I do I sit there clicking on it wanting to go to the front page but can’t. This tutorial will solve that problem for you permanently.

First let’s just take a quick look at the code ignoring the twentyten theme. By default you’ll find that most themes have a line of code in header.php that looks something like this:

<h1 id="site-title"><a href="" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

This is the code that grabs the defined title of the site as set under Settings -> General and displays it on the front page. To replace this with an image we can simply comment out the above line and paste this one in instead:

<div id="blog-title"><a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home"><img alt="<?php get_bloginfo('name') ?>" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" /></a></div>

and place the desired image in themes/yourtheme/imageFolder/image.type. This magically replaces the text with an image, makes the image a home link and even grabs the site title and inserts it in both the link title attribute and the image alt attribute.

Making the custom header image in twentyten into a home button

We can apply this same process to the twentyten theme, but we need to make some changes because the header image is generated dynamically from within WordPress (under Appearance -> Header). First off you need to make a child theme. That was thoroughly described in Day 2: Creating a WordPress Child Theme the smart way. Next copy the header.php file from the twentyten folder and paste it into your child theme folder. Now we can start mucking around with the code.

Since the theme already has a header image we need to find it. In the header.php file it’s found on lines 68 to 78 and looks like this:

<?php
	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	if ( is_singular() &&
		has_post_thumbnail( $post->ID ) &&
		( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
		$image[1] >= HEADER_IMAGE_WIDTH ) :
		// Houston, we have a new header image!
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
	else : ?>
		<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

To make this into a home link we simply have to wrap this line of code in a link making sure to use the correct template tags to grab the home link and the site title. The code is

<a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home"> ......... </a>

and it goes at the top and bottom like this:

<a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home">
	<?php
	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	if ( is_singular() &&
		has_post_thumbnail( $post->ID ) &&
		( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
		$image[1] >= HEADER_IMAGE_WIDTH ) :
		// Houston, we have a new header image!
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
	else : ?>
		<img src="" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
	<?php endif; ?>
</a>

Save that and deploy the child theme on your WordPress site and you’ll see the image is now a clickable link that points back to your home page.

Getting rid of the site title and description

Now that we have a clickable header image that we can replace with an image with a logo and a tagline etc, we don’t need the site title and description any more. So we can take it out. Fortunately that’s pretty damn easy to do – just delete a few lines and you’re done. But wait. I have a better option (and it’s one that I use all the time): Rather than deleting the code, use HTML comments to make it invisible to the browser. This serves two purposes: First of all, if you make a mistake you don’t have to reconstruct the code – just remove the comments and you’re good to go. But more importantly, commenting out the code means you can always come back to it later if you change your mind. It’s a safe way of making alterations in your WordPress theme and is a best-practice model for web development in general.

The code in question is found on lines 60 to 66:

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
	<span>
		<a href="" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
	</span>
</lt;?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

The 5 first lines contain the site title, the last one contains the site description. The reason for all the convoluted code in the site title is that the theme detects whether the visitor is on the front page or not and changes the type of tag attached to the title accordingly: If the visitor is on the front page the title is given the h1 tag and is considered to be the de-facto header of the site. If the visitor lands on a different page the title is wrapped in a generic div tag and the page header is assigned h1 status. This is for SEO purposes. More on that at the very end of this piece.

To get rid of the site title and description simply wrap the above code in HTML comments like this:

<!--
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
	<span>
		<a href="&t;?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
	</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
-->

Shockingly easy isn’t it? Now all that’s left is for you to create a custom header image with your logo or site name and you’re set to go. As a bonus twentyten allows you to assign custom header images to each of your pages through the Featured Image function, so you can do further customization of your site that way. If you’re interested in seeing how far that can take you check out my Lynda.com video series WordPress 3.0 Essential Training where I explain it in greater detail.

What about SEO and all that stuff?

Now a bunch of you will cry foul and say “Oh, but Morten… this means the front page has no H1 tag and furthermore that there is no #site-title ID anywhere. That will confuse search engines and ruin the site SEO”. To that I say: 1. That’s rubbish. If a page doesn’t have an H1 tag search engines automatically jump to H2. It makes no difference. 2. If you’re absolutely insisting on having a H1 in here, you can do this the a-bit-more-complicated way by adding an H1 page title to the header image and use CSS to hide it by pushing it to the side. That requires a whole new tutorial but it’s not all that hard. Bottom line is it’s not necessary. If you’re worried about SEO on your site, just get the All In One SEO plugin and most of your problems will be solved.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.