Recently, we talked about ways to control which pages show up in your navigation bar, but what if you want to provide an easy link to your blog’s homepage, without taking up valuable navbar real estate? Perhaps a nice, clickable header is the key?
header.php and your visitors will be able to click to their heart’s content!
Identifying Your Header Image
The first thing you are going to need to do is locate your header in your theme’s code, and you can use your browser’s web development tool (such as the FireBug addon for FireFox) to identify the CSS details for the header section. Once you have figured out what CSS ID is being used to display your header, you’ll know what to look for in your
Make The Header Image Clickable
Now that you know what CSS ID the header is using, you’ll be able to find it easily in
header.php. Open the file (by either downloading or in the theme editor under the “Appearance” module) and search for the CSS ID you found in the last step.
Your code may look similar to this:
<div id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></div>
The middle portion in this example creates a link to your blog’s home page using the blog title as the anchor text. Your theme may or may not have this, and depending on your image, you may or may not want to include or keep it.
What we are concerned with is the opening tag for the header itself (the one carrying the CSS ID you located earlier):
To this, we are going to add a few things.
<div id="header" title="Home" onclick="location.href='http://YourSiteHere.com';" style="cursor: pointer;">
First, we added a Title of “Home,” to display when visitors hover over your header. This is optional and can be left out.
Second, we have the “onclick” parameter, which you will of course want to update with your own url.
Lastly, we added a style rule to change the cursor to a hand when users point at it, because this is the best way to indicate that the header is clickable. That style rule can easily be added to the stylesheet (personally, I prefer to do it that way whenever possible) but it can also be added here if you don’t want to edit another file.
That’s all it takes! You can leave whatever you need inside the header, like a title or logo, but now that you’ve applied the “
onclick” to the opening tag, your header’s background has become a nice, big link back to the home page of your blog!