Make WordPress Custom Header Image A Link
Changing the WordPress default header image is a pretty easy. Simply upload a different header to the themes Images folder, Change the name of the old header image to something else and then change the new header image to the name of the current header image.
Well it sounds simple enough huh? Well not so fast. There a few things to consider, like the size of the new image. Make sure it fits and looks well proportioned on your WordPress blog. But all that will be for another post. This is kind of backwards but after you change your header image it will usually cover the name of your blog that is linked to main blogs URL and now there is now way for your visitors to click it to get back to the main blog page.
The fix is quite simple on the WordPress default theme. Open the themes header.php file. and look for the following code near the bottom.
<div id=”page”>
<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php
Now add the following code between the page and header id and change the red URL to your blogs URL.
<div class=”header” onclick=”location.href=’http://www.Your Blogs URL Here.com‘;”
style=”cursor: pointer;”></div>
The code should look like this:
<div id=”page”>
<div class=”header” onclick=”location.href=’http://www.Your Blogs URL Here.com’;”
style=”cursor: pointer;”></div>
<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
Now your whole WordPress header image will be linked to your main blog’s URL or the blogs home page.
Similar Posts:
- Change Or Add A WordPress Header Image
- Adding The Sidebar To The WordPress Page Or Single Post Template
- Change Number Of Post Entries On WordPress
- Choose WordPress Pages Displayed In Navigation Bar
- How To Really Screw Up Your WordPress Blog
If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.
Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!
Comments
Make WordPress Custom Header Image A Link…
Changing the WordPress default header image is a pretty easy. Simply upload a different header to the themes Images folder, Change the name of the old header image to something else and then change the new header image to the name of the current header…
When I did a check of this method on my WordPress system, it didn’t work. I’m a little surprised it worked for you, as the default WordPress stylesheet does not define a “header” class — only an id. On top of that, the extra header div is superfluous as far as I can tell.
It seems the simpler solution is to place the onclick and style attributes directly in the pre-existing “header” div, rather than creating a new one. This has always worked for me.
I’m not saying you’re wrong, necessarily, but I would be interested to know why you coded it the way you did.
Reply
I would like to thank you for providing this info. Getting the image up was no problem, the onclick. is what had me. But now its working great.
Reply
You guys may want to read this – I did what they said and it worked on two of my sites, but the 3rd one I tried didn’t work (still looking into that one). So, I gather for the most part it is a good option to try:
http://codex.wordpress.org/Designing_Headers#Making_the_Whole_Header_Clickable
Reply
Bethany thanks for the tip.
From the URL you recommended I found changing
to
Worked for me.
Reply
It looks like the code got deleted out of my comment. Sorry guys.
Reply
Aha! I figured out how to make it work on my MistyLook-themed blog. I used the site mentioned by Bethany, but changed from div id=”header” to div id=”headerimage”. Make sure you replace the first div id=”headerimage” with the new, longer code:
div id=”headerimage” onclick=”location.href=’http://siteaddress/’;” style=”cursor: pointer;”
Reply
Are these changes in code happening in the header.php template? Sorry if this question sounds ridiculous. I just moved from wordpress.com to a self hosted wordpress site, am trying to put my image in the header and have never done anything like this before!
Reply
Jen, yes that is what I wrote in the post:
“The fix is quite simple on the WordPress default theme. Open the themes header.php file. and look for the following code near the bottom.”
Reply
thank you very much
Reply
Editing the header image is quite straight forward if you have a sound knowledge of coding. but the post definitely is a good guide line to use. Nice work. appreciate the effort. Cheers
Reply
My buddy mentioned me about your site. On how to edit the header. Thanks for the clear illustration on making a custom header image. I was looking for something like this. Thank you.
Reply
Thanks for tips. That’s useful for many people.
Reply
Thank you, just what I have been looking for.
Reply
I have a bit of a problem. I changed my header to my own logo without an issue, and then searche headerphp for what you have outlines. it isn’t there so far as I can tell. ) : My template is based on wordpress default (cognoblue) so I thought it would be the same, but I guess not. Any suggestions?
Reply
re: I have a bit of a problem. I changed my header to my own logo without an issue, and then searche headerphp for what you have outlines. it isn’t there so far as I can tell. ) : My template is based on wordpress default (cognoblue) so I thought it would be the same, but I guess not. Any suggestions?
PS. Here is what the bottom of my page looks like
<a href=”" title=”" id=”home”>Home
<a href=”/”>
Reply
Jeff Replied:
March 11th, 2009 at 7:58 pm
I would need to see the actual file to know what you are referencing, sorry but when I get into a your dashboard or start digging through your code that changes into a chargeable service. Sorry but I couldn’t possibly spend the time fixing everyone’s blog that asks me or that is all I would be doing. And you left no link to it either.
Reply
Thanks a bunch for the solution. I had an idea but I didn’t know that this was possible. but now I certainly would love to give a try. Thanks again.
Reply
How can I access header.php and edit it? Any help? Thank you very much.
Reply
Jeff Replied:
April 19th, 2009 at 7:06 pm
In the WordPress Dashboard;Click Appearance, Editor and look for it on the right.
Reply
Thank you so much for that. It worked like a charm!!
Clicking on some ads now
Reply
Nice information Jeff. Its great to see someone lending a helping hand to the WP nebies. Good for you.
Reply
I’ve been looking around for this. I hope this will work on my site.
Reply
Wow I didn’t knew it was so easy to change header image.Thanks for the tips.
Reply
I had to sift through to get the parts I needed because I was using a custom template with a lot of php in between but it worked once I understood the code.
Reply
I had to sift through to get the parts I needed because I was using a custom template with a lot of php in between but it worked once I understood the code.
Reply
Have been searching for a while to find this code, many thanks for posting it up here. John
Reply
Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.