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 blog’s 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 blog’s home page.
Customize WordPress WordPress
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Tagged with Customize WordPress, WordPress
Related Posts
6 Responses to “Make WordPress Custom Header Image A Link”
Discussion Area - Leave a Comment
If you have a question about your blog please leave a link to it. Please don't ask questions like "Why don't my blog work right?" and expect an answer.Two links or less are welcome, any more and your comment will be spammed! Nofollow has been disabled, all comments are moderated and will not appear until approved. Please submit only once.
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Or just copy the example below and change your details.
Example - <a href="http://www.YourSite.com">Title Of Site</a>
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.
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.
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
Bethany thanks for the tip.
From the URL you recommended I found changing
to
Worked for me.
It looks like the code got deleted out of my comment. Sorry guys.