Skip to content



How To Turn Your Header Image Into A Clickable Link

CursorRecently, 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?

Fortunately, turning your header image into a clickable link is pretty straightforward. All you really need to do is add a little javascript to your theme’s 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 header.php file.

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

<div id="header">

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!


4 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. saad says

    Thanks dude

  2. Claudia says

    Thanks so much! Especially for the Firebug tip. I did a lot of research, but all the instructions I found weren’t really helpful, because my CSS for my theme looks totally different and I am a beginner with CSS. All I can say is, thank god I did a backup of the “header.php” ;) Your instruction worked perfectly!

  3. Chad says

    @Claudia
    Oh yes. Backups are always god to have :) Glad you’re have success with FieRebug. I’ve reached a point where it’s hard to remember how I ever lived without it!

  4. Darrell says

    Awesome, thank you for the helpful info.



Some HTML is OK

or, reply to this post via trackback.



css.php