How to make a header image clickable in wordpress

This is a little ‘problem’ i ran in to when trying to customize a theme… a custom header design will quite often feature a logo or text and by default, wordpress will also display the blog’s name and tagline superimposed over the header.

The end result is a mess of text/images and clickable text which takes you back to the homepage. You can of course move the blog name and tagline to the left or right or change the size/font etc… or you can delete it compeltely and just have your header image as your header.

But now you’ll run in to a little problem – how to make the header image clickable and link it to the homepage. I did a little research and stumbled upon the answer.

Go in to header.php, and replace the red code below with the green code. Problem solved 😎

<div id=”header”>

to

<div id="header" style="cursor: pointer;" onclick="location.href='http://siteaddress/';"></div>

Update: I wrote this over 5 years ago, please read the comments for further help / solutions!

74 thoughts on “How to make a header image clickable in wordpress”

  1. Hmm, that’s not working for me…. it does create the pointer, but there’s no corresponding link-through. My homepage link doesn’t even show up in the task bar when I mouse over the header. Any suggestions? Is that code exactly right, or should it be

    a href=

    instead of

    location.

    ?

    thanks

  2. yeah that exact code worked for me…

    what you could do is wrap an ‘a href’ around div id=”header” so this is what you’d end up with…

    a href=”http://www.yoursite.com”
    div id=”header”
    /a

    just be sure to add in the brackets <> before and after each line (i couldn’t add them in as html is enable in the comments area).

  3. You are so the man!

    I’ve been looking for over an hour how to do that. I finally got it working on my site. I’ve been hacking up the Japanese Cherry Blossom WordPress template and couldn’t figure out how to get a title and have it link back to the beginning without messing up the black/white balance of the main page. I can’t believe it never had that before.

    You can see it at http://realizing.me if you’re interested.

  4. Thank you, thank you, thank you! This has been pissing me off for awhile and now I can go back and fix a blog header that has been irking me for weeks. 🙂

  5. Hello all! this code make my header clickable, but is not linking the page.
    My code was:

    div class=”HeaderBG1 onclick=”location.href=’http://www.location.com’;” style=”cursor: pointer;”>”

    any idea, thanx in advance!

  6. Thank you, Thank you, Thank you – I have shed blood, sweat and tears (literally) over my wordpress header and cannot believe your instructions worked!!

  7. The code is missing a quote.

    <div id=”header” onclick=”location.href=’http://siteaddress/’”;” style=”cursor: pointer;”>

    This will work.

  8. You rock! I have been banging my head against the wall with other solutions out there, and due to a tricky theme, this is the only thing that worked. Thank you! As Chris noted above, there is a quote missing. Also, for anyone who is cutting and pasting, be careful how your browser formats the single and double quotation marks. Kind of hard to explain, but mine turned them into diagonal quotes. I went in and manually retyped the quotation marks, and this worked like a charm.

  9. You rock! I have been banging my head against the wall with other solutions out there, and due to a tricky theme, this is the only thing that worked. Thank you! As Chris noted above, there is a quote missing. Also, for anyone who is cutting and pasting, be careful how your browser formats the single and double quotation marks. Kind of hard to explain, but mine turned them into diagonal quotes. I went in and manually retyped the quotation marks, and this worked like a charm.

  10. dude this sucks. I made the changes and it some how deleted my header image totally. I'm using the theme minimalism. Arghhh, now I have no header at all.

  11. thanks. this worked great but it does not show the url of the linked page in the lower left hand corner of my firefox browser. any suggestions??

  12. I've tried and tried to use that. maybe I'm missing something?

    here is my header.php

    <div id=”header”>
    <div class=”container”>
    <h1><a href=”<?php bloginfo('url'); ?>” title=”Go to homepage”><?php bloginfo('name'); ?></h1>
    <?php if (get_bloginfo('description')) : ?><h4><?php bloginfo('description'); ?></h4><?php endif; ?>
    </div>
    </div>

    I removed just the <div id=”header”> and replaced it with the line above. The header.png just disappeared when I switched it. Any idea why? Thanks!

  13. Thanks. At first when I added this my logo disappeared, that is because in the theme I am using the div id is “head” , Also, I had to manually adjust the quotation marks.
    <div id=”head” onclick=”location.href='http://www.currentconcierge.com/&#39;”; style=”cursor: pointer;”> worked great

    THANK YOU!!

  14. took me a while to work out cause I had to manually replace all of the quotation marks both the ” & ' for it to work but now she runs perfect! Thanks heaps brother!!!!

  15. Thanks very much for the post. I also found that I needed to replace the quotes with the standard “” from my keyboard to make it work. After that it worked great 🙂

  16. Thanks for this! This was simple to understand and very helpful! I've looked elsewhere to try to figure out how to make this work and I couldn't understand what the heck they were talking about. 🙂

  17. Thanks so much for this helpful code. At first the code didn't work for me but after some head scratching… I noticed that all the apostrophes and asterisks in your code were slightly different than the code in my header.php file. I retyped all the apostrophes and asterisks in your code and voila… it worked! (See example below – note the apostrophes and asterisks.)

    YOURS: <div id=”header” onclick=”location.href=’http://siteaddress/’;” style=”cursor: pointer;”>
    MINE: <div id=”header” onclick=”location.href='http://siteaddress/&#39;;” style=”cursor: pointer;”>

    Thanks so much for the post.

  18. If it’s so simple, why did it take me thousands of other “useful” solutions to finally make it work? Gee, thanks mate!

  19. Thanks to the original poster for the tip. Just what I needed.

    A big thank you for noting the apostrophe and asterisk were slightly different. The correction worked perfect. Thanks for sharing.

  20. Thanks so much for this helpful code. At first the code didn’t work for me but after some head scratching… I noticed that all the apostrophes and asterisks in your code were slightly different than the code in my header.php file. I retyped all the apostrophes and asterisks in your code and voila… it worked! (See example below – note the apostrophes and asterisks.)

    YOURS:
    MINE:

    Thanks so much for the post.

  21. Great – problem solved for me too – thanks so much! Thanks also to the person who mentioned retyping certain characters manually, (the quotation marks in my case), as that’s what made the code work for me.

  22. I have a header above my header image, so I just copied the part where it says “onclick” and on and then pasted it after div id header img and it worked like a charm. Thanks for this! It really helped.

  23.  wow! with little (actually, no) knowledge on CSS and/or PHP, I was wondering where to look for the solution–the unclickable header was giving me problems for some time, and it has now become magically clickable! (Big thanks to the author, and of course, Hui4ense!). Here’s my site (in case you are interested in seeing the final effect): http://www.blazingbug.com
    Thanks, again!

  24. Been a nightmare until I saw this!  Maybe you could put this correction at the top Lisa?

  25. I see this in my header PHP file:

       <a href="/”>   

    I changed to the code above but with no effect. Any siggestions?

  26. It took me a couple of tries bc i was pasting it into the wrong line, but when i found the right line in the header.php it worked like a charm “Eeep ^__^!”

  27. Ugh, I did this. It didn’t work at all on one site and the other now has the header completely missing, even after I changed the coding back to the original. Super.

  28. excellent… thanks so much! 

    I left the header link problem to last cause it wasn’t that important, but being a little bit of a perfectionist it was quietly driving me crazy!

    And yeah I had to rewrite it manually too.  If you put the code into your post using a text box it should strip out the code.  I pasted into notepad and that didn’t even do the trick.

    cheers

    Stef

  29. do you think this will work in header image:

    { $(“div.art-header”).onclick( function() { window.location = $(this).attr(“http://www.mysite.com”); return false; }); 

  30. The code works. The only issue I’m having is now my entire page is clickable. Any suggestions on how to change this? I don’t have a logo per se’ just a background that has my logo already created in it.

  31. At last, yes!!!!! This is the code I used:

    Works perfectly, this has been driving me bananas for weeks. Thank you so, so much for this.

    Steve.

  32. Thanks this worked on my website like a charm. But the thing is i do not have a separate logo so the complete banner is clickable.

  33. Worked for me.

    At first the code was shrinking the size of the header, increasing the size of the menu bar, and shifting everything else to the left.

    After I replaced the original element and pasted the entire second line AFTER the first element, it worked perfectly.

    Cheers!

  34. Hi! I opened my header.php on my WordPress site and I don’t see .

    Any suggestions?

    Here is the code:

    <body >

  35. This worked for me as well — the only thing that did, so far. However, now my whole homepage is clickable, not just the header. Any thoughts on how to fix that?

Leave a Reply