I often get asked and also see in the WordPress forums online, about how make it so that the header of your WordPress blog is clickable to a link (like having the green highlighted area below clickable), probably your home page link, as many don’t have a home page as such, rather their latest posts.  Well here is how I always do it.

It involves changing a small piece of code in your themes header.php file.  In there, more often than not there will be a div tag with an ID called ‘header’.  If will probably look like something like this:

<div id="header"><h1><?php bloginfo('name'); ?></h1></div>

What you need to do is to change this piece of code to include a small piece of Javascript to makes the entire header div tag clickable to a link that you specifiy.  For example if I wanted to make the header tag clickable a go to the google homepage I would replace it with this code:

<div id="header onclick="location.href='http://www.google.com/';" style="cursor: pointer;"><h1><?php bloginfo('name'); ?></h1></div>

This will make the entire header section of your site clickable and link to the google homepage.  Basically it is the following code that is important:

onclick="location.href='http://www.google.com/';" style="cursor: pointer;"

It is this code that needs to be added inside the header div tag, changing the URL to they location where you want the click to go to.  Many want this to be the homepage of their blog, so simply replace www.google.com with the URL of your blog.

And that’s it, an easy way to make the header div of your blog clickable to any site or link that you want.