WordPress.org

Ready to get started?Download WordPress

Forums

Add different header image for each page 2011 Child Theme (15 posts)

  1. befree22
    Member
    Posted 2 years ago #

    Hi Folks,

    I read http://wordpress.org/support/topic/unique-header-image-for-each-page?replies=17 but I'm having trouble getting the unique headers to work with each page created in wp admin.

    I'm using a 2011 Child Theme on http://www.rcrumbcom.dreamhosters.com and I currently have the "Home", "About" and "Contact" pages. The page ID for About is 4 and the page ID for Contact is 6.

    The file path for the unique images is /rcrumbcom.dreamhosters.com/wp-content/themes/columns/images/headers/

    The 2 images in the /headers/ are head-image-4.jpg and head-image-6.jpg

    I'm using the following suggested code but I'm unsure where to place the page ID so that the unique image appears on the About and Contact pages.

    <?php $page_id=get_the_ID();
       if(is_home()) { $image='header.jpg'; }
       if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
       if(!file_exists(TEMPLATEPATH.'/images/headers/'.$image)) { $image='head-image-4.jpg'; }
       if(!file_exists(TEMPLATEPATH.'/images/headers/'.$image)) { $image='head-image-6.jpg'; }
       echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>

    Any help appreciated.

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    is there a reason why you can't use the 'featured image' for each of these pages, and select images with the minimal dimensions needed for a header image in Twenty Eleven?

    1000 * 288 px

  3. befree22
    Member
    Posted 2 years ago #

    FYI: I never thought the featured image was intended to work as a unique header image on pages. To test it, I just uploaded a couple of 1200x346 .jpg images to the media library. I attached one image to the About page using the "featured image" but the image isn't displaying as a HEADER image when I click the About tab on the site.

    @alchymth, I used your code shown above in my header.php file so I can view a unique header for each page in the top nav bar.

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    but the image isn't displaying as a HEADER image when I click the About tab

    are you using the original code of header.php of Twenty Eleven?

    it seems you are using the two codes together - this is the output in the head section of your front page at the moment:

    <img src="http://www.rcrumbcom.dreamhosters.com/wp-content/themes/twentyeleven/images/head-image-6.jpg" alt="">    
    
                <a href="http://www.rcrumbcom.dreamhosters.com/">
                      <img src="http://www.rcrumbcom.dreamhosters.com/wp-content/themes/twentyeleven/images/headers/lanterns.jpg" alt="" width="1000" height="288">
                  </a>

    you might need to remove/edit the original part of the code as well.

    if you want to use my formerly suggested code, I need to know where the images are saved at the moment.

    I can't check the 'about' page or anything else at the moment, as your server is not responding...

  5. befree22
    Member
    Posted 2 years ago #

    Here is the header.php for my 2011 child theme: http://pastebin.com/hgtpcXaR
    NB: I added lines 80 to 87 which contain your header image switcher code

  6. alchymyth
    Forum Moderator
    Posted 2 years ago #

    as your page specific header images seem to be saved in the /images/headers folder of the child theme /columns, try:

    <?php $page_id=get_the_ID();
       if(is_home()) { $image='header.jpg'; }
       if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
       if(!file_exists(STYLESHEETPATH.'/images/headers/'.$image)) { $image='header.jpg'; } //specific image not found, use default header image set as the same as the posts page header image
       echo '<img src="'.get_stylesheet_cirectory_uri().'/images/headers/'.$image.'" alt="" />'; ?>

    if this should work, this will leave you with two header images.
    next step would be to integrate this into the existing code.

    I am still puzzled why the 'usual' method with the featured images does not work in your site.

  7. befree22
    Member
    Posted 2 years ago #

    I got the following error when adding the code above to header.php

    Fatal error: Call to undefined function get_stylesheet_cirectory_uri() in /home/woodbrothers/rcrumbcom.dreamhosters.com/wp-content/themes/columns/header.php on line 83

    Since 2011 has featured-image-header, I want to use it and attach a specific header image to each page. I uploaded the 2 images to the Appearance>Header and one displays on the site and these images are in the uploads folder. How do I link a header image to a specific page? It's not working using the featured image in each page. Should I upload images to the 2011 parent headers folder?

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    Try changing get_stylesheet_cirectory_uri() to get_stylesheet_directory_uri() in header.php.

  9. befree22
    Member
    Posted 2 years ago #

    Hi esmi,

    It works with the changed code. However, since 2011 parent supports, featured-image-header, shouldn't I be using it? The images I uploadeded Appearance do display on the site, they just need to be linked to the correct page. Wouldn't they link if I uploaded them images to the 2011 parent /headers/ ?

    Or does WordPress featured-image-header only work for random images / customized headers in Appearance > Headers ? In other words, the featured-image-header works for random and custom headers but it doesn't work for page specific headers?

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    No. To use the featured-image-as-header feature, you simply have to select an image of the correct size - 1000px by 288px.

  11. befree22
    Member
    Posted 2 years ago #

    @esmi, I edited my post while you were responding... so reposting my question...

    Or does WordPress featured-image-header only work for random images / customized headers in Appearance > Headers ? In other words, the featured-image-header works for random and custom headers but it doesn't work for page specific headers?

  12. esmi
    Forum Moderator
    Posted 2 years ago #

    Or does WordPress featured-image-header only work for random images / customized headers in Appearance > Headers ?

    No. It works in single Posts & Pages irrespective of what header selection you have made in Appearance -> Headers.

    but it doesn't work for page specific headers?

    Sorry? What do you mean by "page specific headers"?

  13. befree22
    Member
    Posted 2 years ago #

    1. Page specific headers: I'd like to use a separate header for each page. For example, page-header-4.jpg for About page and page-header-6.jpg for Contact page.

    2. I'm looking for a tutorial (Youtube) to see the extent of the 2011 featured-image-header. From Appearance > Headers, I see that you can upload custom header images and you have the option to rotates these headers in a random manner or to select one of them as the default image for a site.

    I wonder if the 2011 featured-header-image can be used for specific pages? I tried using the featured image in the About page and Contact page but the image isn't appearing in the header for each specific page.

  14. befree22
    Member
    Posted 2 years ago #

    @esmi

    The fixed coded added to header.php works so I'll be using it on the site. If you still want to respond to the question above, feel free to do so since you and @alchymyth think the 2011 featured-header-image ought to work.

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    Twenty Eleven's featured-images-as header will work. Try it in the parent theme.

Topic Closed

This topic has been closed to new replies.

About this Topic