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:

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:

<?php get_bloginfo('name') ?>

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:

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 : ?>
		

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

 ......... 

and it goes at the top and bottom like this:


	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 : ?>
		
	

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:


< id="site-title">
	
		
	
>

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:


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.


About Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

5 comments:

  1. Nice post.
    I was looking for support for me actually dropping the “Home” from my menu. I know some people like to keep it as a security blanket… But I prefer utilizing the space for keywords or branding.

    Logo = Home (we could print out t-shirts).

    Just as an aside, H1 hasn’t really possessed any value for some time now. That will further your argument.
    And it looks like your PHP is affecting only Body elements, so there would be no concern with anything impacting the Title Tag.
    I would still recommend All In One, or the mo’ betta Yoast SEO plugins.

    Cheers!

  2. i would like to replace the Header Image of my Blog to gif(animatedGif) but there is not asimple user option, can you, please, tell me where i can change the option to allow it

  3. Hi,
    thanks for this useful info on how to edit our blog headers and alt tags.
    On my twenty ten I had to do some more editing though to make it work correctly.
    You say:title=””
    will make my blog info appear as the image tag? It didn’t do it.
    I had to do the following to make it work:
    title=””
    not a big thing but for novices it may be an unfixable issue…
    greetings

  4. Ok, sorry, forgot that the < and > will get cut out for security reasons.
    Here I go again.
    You say to add this code:
    title=”<?php get_bloginfo(‘name’) ?>”
    But it only ads the word tag to the image src line.
    To make the complete tag appear I had to do this:
    title=”<?php echo get_bloginfo(‘name’) ?>”

    please delete the post with the incomplete code above.
    thanks

  5. Thanks for this tutorial! Got rid of that unsightly title, got the banner working as a home link. Looks and works beautifully.

    I do still have some blank white space to get rid of at the top of the page where the title was, though. I’m going to go poke around in the appearance editor and break things until I figure out how to do it.

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>