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, like i have done on auctioncrap.com
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” onclick=”location.href=’http://siteaddress/’;” style=”cursor: pointer;”>
About Sean MacEntee:
I'm a 23 year old Irish student, blogger & IT addict. I love building websites & then playing with them!
You can leave a response, or trackback from your own site.
View Comments to “How to make a header image clickable in wordpress”
Newer Comments » Newer Comments »Leave a Reply
[...] How to make a WordPress header clickable [...]
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
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).
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.
Thanks for this, I just redid a theme for a new website and was struggling with making the header clickable!
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.
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!
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
This is very hot info. I’ll share it on Delicious.
Thank you, Thank you, Thank you – I have shed blood, sweat and tears (literally) over my wordpress header and cannot believe your instructions worked!!
glad i could be of help cathy!
The code is missing a quote.
<div id=”header” onclick=”location.href=’http://siteaddress/’”;” style=”cursor: pointer;”>
This will work.
Thank you so much! I had to mess with it a bit, but it worked.
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.
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.
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.
J. try this then
its not coming out properly sorry
J. try this then
<div id=”headerimg”></div>
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
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??
Worked great! Thank you so much!
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!
thanks alot !
this code worked with me :
<div id=”header” onclick=”location.href='http://example.com/';” style=”cursor: pointer;”>
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!!
Finally! THANK YOU for posting this!