No announcement yet.

Change Header Images

  • Filter
  • Time
  • Show
Clear All
new posts

  • Change Header Images

    I want to be able to change the header image on specific pages. For example, on my book or product landing pages, I want to show a different image in the header.

    I setup a new template in custom builder that uses PHP to strip the header, main navigation, and footer out of the page. So now I have a 'clean' page - no header, navigation or footer.

    Here's the PHP code that I used to setup my template and delete these elements:

    // Create full width content
    add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

    // Remove header
    remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
    remove_action( 'genesis_header', 'genesis_do_header' );
    remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

    //Remove main navbar
    remove_action( 'genesis_after_header', 'genesis_do_nav' );

    //Remove footer
    remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
    remove_action( 'genesis_footer', 'genesis_do_footer' );
    remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

    //Load genesis framework

    Now I want to create product pages that have a different header from my main pages.

    I've tried installing the Custom Header plug-in recommended elsewhere on the forum and I get no header image.

    I've tried using the custom CSS builder to place a header image into the page but I can't get the header to show up (maybe I'm using the wrong tags).

    Should I create labels and apply them in the specific sales pages?

    This seems like it should be simple to do. But I've spent two days trying to figure this out and could use some help.

  • #2
    Wait. There´s something I don´t understand.
    You removed the header on those pages but you´d expect a header image to show up?


    • #3
      I want to remove the default header image and replace it with another image specific to each landing page. For example, a header with an image of my book on my book landing page. Or an image of a business form on my business form landing page.

      I got to thinking about the code above (I'm somewhat of a beginner on this stuff) and think that I deleted the entire header hook with the "Remove Header" code. Now, I have no place to add back another image.

      Could I just assign a new image through some custom CSS code that's specific to each page? If so, what identifiers would I use to insert a different image?


      • SiGa
        SiGa commented
        Editing a comment
        Yes, that code removes the header entirely. You could still remove logo and header right widget and leave the header there to use it.
        Last edited by SiGa; 12-16-2014, 10:28 PM.

    • #4
      This is an easy method but requires a header of course - which you removed:

      I guess you´d need to look into hooks (Docs) and custom fields then, maybe.

      Or - depending on the number of pages - you could use custom CSS to swap the image (requires CSS knowledge) - when you decided where to put it.


      • #5
        Here's how I solved the problem.

        1. Created a template that removed the default site header image.
        2. Created a conditional called "book-sales-header" that uses the template tag.
        3. Created a hook box and selected the conditional from step #2. Put in some CSS code that inserted the correct image.

        Worked fine and my headache is starting to get better.