28 | Link Header Image to Home Page

g+

Having the whole header image linking to the home page is one of the most common things of a theme. This article explains how to add this feature to the WordPress theme Twenty Ten.

Edits are to be made in header.php of a child theme of Twenty Ten, at the location recognizable below (theme version 1.6):

<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
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
.....
.....
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
 <?php endif; ?>
</a></div><!-- #branding -->

The link tag

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

was added 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.

This entry was posted in Easy Coding for Wordpress, WordPress and tagged , , , . Bookmark the permalink.

39 Responses to Link Header Image to Home Page

  1. Sophia comments:

    Ⲏi mу loved օne! I ԝant to ssay thɑt this post іs amazing, grreat wгitten ɑnd
    cߋme with ɑlmost all important infos. I’ԁ like to look extra
    posts likе tһis .

    Ayoo baca-baca dі website Kami buat dapat Fakta Menarik mengenai daftar sbobet casino .
    Terrima Kasih

  2. Hayley comments:

    Excellent blog you have got here.. It’s hard to
    find excellent writing like yours these days. I honestly
    appreciate people like you! Take care!!

    My website Free Slot Machines – Andrew,

  3. Anja comments:

    I am actually delighted to glance at this weblog posts which carries lots of helpful facts, i appreciate you
    providing such data.

    my page ZulaWLaramie

  4. Evans Tang comments:

    This is great! Thanks for providing a simple solution that works perfectly

    • Kacy replies:

      Falas de manif e percebo muito bem o que dizes… falamos de arbitragem há muito tempo, os nossos manos na net pediram para irmos de camisa preta… eu fui!Tu foste botar discurso na asm.iblesa.e. que cada um faça a sua parte!… ou não…

  5. NE comments:

    It’s slightly different in the latest version of the theme…

    Now the <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    code will go above the following
    <?php
    // Compatibility with versions of WordPress prior to 3.4.
    if ( function_exists( 'get_custom_header' ) ) {
    // We need to figure out what the minimum width should be for our featured image.
    // This result would be the suggested width if the theme were to implement flexible widths.
    $header_image_width = get_theme_support( 'custom-header', 'width' );
    } else {
    $header_image_width = HEADER_IMAGE_WIDTH;
    }

    • alchymyth replies:

      thanks for the comment – WordPress is moving on faster than I can update my posts 😉

    • Kaycee replies:

      I have just ongoing a web site, the info you impart proceeding this web situate has helped me trmenedously. Thankfulness for all of your calculate & work. “A physicist is an atom’s way of conscious on the subject of atoms.” by George Wald.

  6. Tiana Kai comments:

    THANK YOU!!

  7. glissy comments:

    Thanks, just what I was looking for!!

    • Roseanna replies:

      Sigh. Big sigh. I've been reading a fictional series that takes place in prerverolutiona-y war America. It is stunning to read descriptions of the native communities of that time and think about them in the context of what will come. But also, living in the heart of Pueblo country, where many are returning their names to the original language rather than the Spanish versions, I feel some gladness and renewal all around me.

  8. Steve comments:

    Thanks a million. This solved my problem perfectly!

    • Dany replies:

      I think I just died of cuteness overload with that bear suit! I love the honey pot, I've never seen anything like that before. Have not purchased anything today, but I got a new dress and fonioatudn yesterday. xx

    • Mikel replies:

      I had no idea how to approach this beenof-row I’m locked and loaded.

  9. RobertNAdams comments:

    You would not believe the stuff I went through last night trying to get this to work on my buddy’s WordPress site. I tinkered with .php files. I looked for plugins. I was ready to commit seppuku with a rusty butter knife.

    I never thought to just wrap a hyperlink around the php. How stupid of me! Thanks, this was super helpful (even in a non-2010 theme)!

  10. Leah comments:

    Thank you! Worked perfectly. 🙂

  11. Salman comments:

    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.

    • alchymyth replies:

      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.

    • Estella replies:

      Gratulerer med 200 000! Jeg har aldri latt en basar gÃ¥ fra meg jeg vel…og innpakkede gaver er jo gøy?! Det er jo det som er pakke! (hvis en bare klarer Ã¥ holde seg).Her er vi akkurat pÃ¥ beina igjen etter to dagen med hodet ned i do. Det er ingen pene mÃ¥ter Ã¥ beskrive spysjuke pÃ.hh¥.ee.e 😉 God helg!

  12. Christian from Sweden comments:

    Well, that was a nice fix! Thanks a bunch, mr alchymyth 🙂
    Took 30 seconds to implement, and with desired result.

  13. maryam comments:

    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

  14. Tim comments:

    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?

    • alchymyth replies:

      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/

      • Les replies:

        I knew this must be possible, I have searched high and low to find an answer to linking the header image to a page outside of the WordPress directory. I had identified where and which bit of the link needed to be edited, but to what??? (I am no php guru).
        This is a fantastic tip, thank you for sharing it Mr Alchymth.

      • alchymyth replies:

        example:
        <a href=\"http://www.outsidepage.com\" title="link to outside page" rel="home" rel="nofollow">

        I needed to add \ to get the code to show – remove the two backslash \

  15. Robotnyheter comments:

    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>

    • Michael replies:

      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!

    • Fidelia replies:

      Acho que a Mozilla deveria abandonar o mercado.Não existe espaço para eles no mundo mobile.Se quiserem espaço, só tem o seu próprio sistema opciaeronal.Usando Google Chrome 19.0.1084.56 em Windows 7 x64 Edition

  16. dowel comments:

    Thank you very much. I translated this into German to spread the news and – of course – linked back to your tipp.

    • Betsy replies:

      10-10-11 spune: ca sa vezi ce placa video ai, intra in &#S#80;2TART&28221;, “RUN” si scrie “dxdiag” (fara ghilimele si da ok.In tabul Display vei gasi informatiile despre placa ta video si astfel vei sti unde sa cauti driverele necesare. daca nu sti cum, lasa aici un mesaj cu tipul si modelul placii video si te ajut eu un link. -44V-a ajutat acest raspuns?

  17. Dallas Divorce comments:

    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

  18. Li comments:

    Thanks a lot for the hint of doing it.

    Does this manipulation make a future upgrade impossible?

  19. DUI Facts comments:

    Thanks, that works great, appreciate the help.

  20. bob comments:

    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.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*