Work

24 Jan 2008

How to make a header image clickable in wordpress

Posted in Work | 61 Comments

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

<div id=”header”>

to

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

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

  • Pingback: Wordpress clickable header « Gregatustra

  • http://www.psoriasissolved.com Psoriasis Solved

    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

    • http://www.vigaversaphotos.cz.cc/ Ratul

      I'm trying to get this to work. The problem that I keep having is that it makes my search button in the header point to the home link.
      Any suggestions to make it work correctly

      http://www.vigaversaphotos.cz.cc

      • Grant

        Has anybody figured this out? The search box is the only thing that links back to my site as well.

  • http://www.smemon.com smemon

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

  • http://realizing.me Scott

    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.

  • http://www.athomemomblog.com Genesis

    Thanks for this, I just redid a theme for a new website and was struggling with making the header clickable!

  • http://www.noteworthytips.com Sara

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

  • Kruiz

    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!

  • Adam

    I link to my homepage without the physical URL using:

    <a href=”/”>

    This way I can use it on all my sites without changing the link.

    You can see it in action on http://www.degreesofsuccess.net

  • http://www.linkedin.com/in/howtogetasixpackfast How to Get Six Pack Fast

    This is very hot info. I’ll share it on Delicious.

  • http://www.stickypawsfelting.co.uk Cathy

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

    • http://www.smemon.com smemon

      glad i could be of help cathy!

  • http://www.chris-keaton.com/ Chris

    The code is missing a quote.

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

    This will work.

    • http://www.40tech.com Evan

      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.

  • http://www.xpandyourmind.com/ TomDempsey

    Thank you so much! I had to mess with it a bit, but it worked.

  • http://www.40tech.com Evan

    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.

  • http://basedworld.com/ J.

    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.

  • Jonny

    J. try this then

  • http://freemanireland.ning.com Jonny

    ““

  • Jonny

    its not coming out properly sorry

  • Jonny
  • http://www.idatewhite.com Eathan

    I’m trying to get this to work. The problem that I keep having is that it makes my search button in the header point to the home link.
    Any suggestions to make it work correctly in IE?

    http://www.racingcardigest.com

  • Eddy Bugnut

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

  • http://www.identity33.com/blog Brad Thomas

    Worked great! Thank you so much!

  • http://brent.rangen.net/ Brent Rangen

    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!

  • f6m

    thanks alot ! :D
    this code worked with me :
    <div id=”header” onclick=”location.href='http://example.com/';” style=”cursor: pointer;”>

  • http://www.seoohio.net/ Mark

    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/'“; style=”cursor: pointer;”> worked great

    THANK YOU!!

  • http://www.1winedude.com/ 1WineDude

    Finally! THANK YOU for posting this!

  • http://twitter.com/travelsofadam Adam (@agroffman)

    Awesome! Worked perfectly for me. So easy. Thank you!!!
    http://travelsofadam.com

  • steveno1

    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!!!!

  • http://gisnap.com gisnap

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

  • http://your-kids-teeth.com/ Ted

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

  • Pingback: Fjerne Bloggnavn og info fra header. « Raptabs fotoblogg

  • http://followingtheroad.com/ followingtheroad

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

  • http://www.sixfourweb.com raym

    Did you think you'd still be helping people with this after two years? Thanks

    • smemon

      no :)

      In fact i must update this post….

  • http://www.baldormotorsonline.com baldormotors

    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/';” style=”cursor: pointer;”>

    Thanks so much for the post.

    • Lisa

      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.

      • somebody

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

      • Thelitupgoose

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

  • Justin

    Awesome! Just the job! Much appreciated

  • Anom

    Thank you Finaly it worked!

  • http://bestmarketingresource.com Internet marketing

    Thank you, this was great. It finally works :)

  • suz

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

  • Hui4ense

    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.

    • JAN

      This worked for me as well! Whew!

      • Oda

        Yey! this worked for me as well!! THANK YOU!

  • http://www.leoneart.co.uk Leone

    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.

  • http://www.crossdrivenhome.com MB

    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.

  • http://www.crossdrivenhome.com MB

    By the way, I am working on a non-profit site http://www.priorlakecheer.com. Any suggestions on how to get rid of the extra writing above the header img?

  • Anonymous

     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!

  • me

    still lost

  • Louis

    I see this in my header PHP file:

       <a href="/”>   

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

  • Edit

    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 ^__^!”

    • Edit

      p.s. many thank yous!!!

  • http://healthypurpose.blogspot.com Kenzie @ A Healthy Purpose

    Worked for me! After a little probing – thanks!

  • http://twitter.com/BrideliciousHK Bridelicious

    Such an easy fix. Thank you!

  • Melindatoad

    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.

  • Stef

    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

  • Dany

    do you think this will work in header image:

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