WordPress3 is out, and with it the new default theme TwentyTen.
Having the whole header image linking to the home page is one of the most common things of a theme, however this is not the standard behaviour of TwentyTen.
It is easy to remedy:
(edits are to be made in header.php of TwentyTen)
<div id="site-description"><?php bloginfo( 'description' ); ?></div> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one ..... ..... else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?> </a></div><!-- #branding -->
as you can see, i added the link tag
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
just after this line
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
and closed it before the end of the #branding div
</a></div><!-- #branding -->
that is all.
enjoy your new wordpress setup with this familiar functionalty.
I want to replace my WordPress twenty ten. Header with an Image Map.
When I convert the Actual header to an image map in CS Adobe Photoshop, I get an html image map code and my actual header image broken into 4 different jpeg files, each showing the area where I want a differnt link.
Now please guide me as to where should I Insert this Image map code, which header file, and do I simply upload the 4 images to my media foler, and update the image source links in the image map code, which I have to insert ???
or the Image map code will work with my full size header image as well.
please sign up to the WordPress support forum with these kind of questions. or email me your request, so I can let you know if I can do this for you and how much it will cost.
regards.
Well, that was a nice fix! Thanks a bunch, mr alchymyth
Took 30 seconds to implement, and with desired result.
Hi Alchymyth, thanks a lot for sharing this. Ihave several images on my header and all link to different urls and it works well, my line in header is:
<img src="my image” alt=”" />
what I need to do next is (hover) when mouse on the image, image change to a different image!
any idea!?
Thanks
Maryam
Maryam, please take that question into the wordpress suppost forum, thanks.
I would like to know how do I add my post images to the top of the grid post box? above the title though
Hi Nove,
for questions related to WordPress and themes, please join the support forum and ask there.
Great tip for someone who isn’t that familiar with php. Thank you. I’ve now been asked if we can link back to our website URL via the header instead of the blog homepage. Is there a way to change the link to an external ‘http://www.mysite.com‘ link?
Hi Tim,
this is the actual part with the link url:
<a href="<?php echo home_url( '/' ); ?>"change it to:
<a href="http://mysite.com"if you have more questions regarding wordpress, consider joining http://wordpress.org/support/
Thanks for the tip!
I added the modified header.php to my TwentyTen child theme (so it’s still there when the theme is updated) and also removed the “title” parameter as I don’t want the tooltip text when hovering the mouse over the header image. So this is the code I added:
<a href="<?php echo home_url( '/' ); ?>" rel="home">
...
</a>
Hej,
utmärkt tips!
I inserted the code in the header.php of my twentyten child and it works great for the whole blog (including post and page header images linking back to the home blog).
Also, I deleted the title attribute. However, when mousing over the header images of posts or pages, the title is still displayed. Have you got any idea why that is? I didn’t get any answers in the wordpress forum…
Thanks for your help!
Thank you very much. I translated this into German to spread the news and – of course – linked back to your tipp.
Thank you so much! I felt so dense without knowing how to do this… after reading four or five other blogs about turning the header into a link, yours finally solved my issue. Thank you for making it so clear, too.
– Dallas Divorce
Thanks a lot for the hint of doing it.
Does this manipulation make a future upgrade impossible?
just be aware: as with any modifications on a default theme, an upgrade will overwrite the changes.
look into the possibility of either creating a child theme ( http://codex.wordpress.org/Child_Themes ), or save the modified theme under its own name in a new folder (also modify the themes stylesheet to reflect the new name: http://codex.wordpress.org/Theme_Development#Theme_Stylesheet ).
you can find ongoing support here: http://wordpress.org/support/
Thanks, that works great, appreciate the help.
Exactly what I was looking for. Instructions are spot-on and super easy to follow. Thanks.
Thanks. I needed exactly what you have done. I am a retired person, taking web programming courses at a local tech college, and we are using WordPress to build a site for a non-profit organization.
Now, I have to psyche out what is going on with the PHP stuff. Gotta get into the API.
Once again, thanks.
Pingback: wp-popular.com » Blog Archive » TransformationPowerTools » TwentyTen – make header image link to ‘home’ | for personal growth and transformation
August 1, 2010 | [...] from: TransformationPowerTools » TwentyTen – make header image link to ‘home’ | for personal growth… Tags: header, image, image-link, …