Make the Entire Header Image a Link to the Home Page

So I decided to use my logo as my header image. I love it, it looks awesome. But it already has the text VoodooPress in it. Seems kind of redundant to have my site name up there twice doesn’t it? So I removed the site name text, and relocated the description to the bottom of the header. We will cover how to do all that soon. But if you remove that Site Name link, you lose the built in link to your home page. Let’s fix that by making the entire header image a link!

So once again we are hacking away at pieces of the header.php file. As we’ve already covered in our past 2 articles, I have copied header.php from twentyten to my child theme so that I can do with it as I please. Now let’s investigate the code. Find the bit in the header that is relevant to the image. Here is the entire block of code for the header image:

// 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; ?>

You may or may not have the HEADER_IMAGE_WIDTH portion, depending on if you followed this article or not. But that doesn’t really matter, we won’t be touching that portion of code. I just wanted to point out things that may be different. The bit of code we are specifically looking for is the output, this bit:

						// 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="" />

That is the portion of code that we have to deal with. And it’s fairly simple. in the echo statement we need to add in reference to the homepage link which is slightly harder. After the else statement, on line 4, is just a simple img src output we can wrap in a link. Here’s the new bit of code:

						// Houston, we have a new header image!
				echo '<a href="' . home_url( '/' ) . '" title="' . esc_attr( get_bloginfo ( 'name', 'display' ) ) . '" rel="home">' . get_the_post_thumbnail( $post->ID, 'post-thumbnail' ) . '</a>';
					else : ?>
				<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>

You can see that we just added in links to the home url for both outputs. The first output is for if a featured image is assigned, the second is for if one is not.

You can test this right here, it’s done on this site! Now if you followed along with this tutorial, you would see that my featured images don’t have to be the full width of my header, so you have to actually click the image!

2 Replies to “Make the Entire Header Image a Link to the Home Page”

Leave a Reply