How To Add Custom Header For Specific Category And Posts In Quattro Theme

Community Forums Forums Design Tips and Tricks How To Add Custom Header For Specific Category And Posts In Quattro Theme

This topic is: not resolved

This topic contains 17 replies, has 3 voices, and was last updated by  braddalton 4 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #109657

    ShanG
    Participant
    Post count: 59

    I’m using the Quattro theme and would like to have a custom header for one specific category AND all the expanded posts in that category. I have found some tutorials, but am not sure if they are still valid for HTML5 themes. Also, this need to be automatic; no adding image URLs to custom fields and no plugins. I want this hard coded.

    Essentially, if you click on that category in the CatNav, a specific header needs to display instead of the default header on that category page list and when a post title from that category page is clicked to expand that post, the same header needs to show. All other categories, pages and home page need to have a different (read: default) header than that specific category. What would be the best way to do this for HTML5 themes?


    • This topic was modified 4 months, 1 week ago by  ShanG.
    • This topic was modified 4 months, 1 week ago by  ShanG.
    #109688

    nunotmp
    Participant
    Post count: 164

    Hello,

    I have not used the Quarttro theme but this should work.

    First you need to determine the right conditionals. In this case it seems like in_category( 'category_name' )would work so you can change the header by doing something like this.

    if ( in_category( 'category_name' ) ) {
    remove__action( 'genesis_header', 'genesis_do_header' );
    add_action( 'genesis_header', 'wpz_do_header' );
    }
    

    This will will remove the default header content only on post that use the category name you provide. Now you can build out your custom header using the wpz_do_header you can name this whatever you like, this is just my personal prefix. the div .site-header will stay the same just the content of the header will change. If you are just wanting to use an image you can do something like

    
    function wpz_do_header() {
    <img src="path/to/image.jpg" alt="Category Header" />
    }
    

    Now if you need to have all of the header features with some customization then you will have to rebuild the genesis_do_header. You can find that by navigating to genesis>lib>structure>header.php and searching genesis_do_header. You will have to copy the function and do the customizations there.


    #109689

    ShanG
    Participant
    Post count: 59

    Will this make the header show on the category page as well as single posts of that category?

    Also, wpz_do_header…the only thing I change is the wpz? How will this know where to pull the header from?

    And does this all go in functions.php? Do I need to do anything in header.php, index.php, single.php, etc.? I found this tutorial, but it kind of confused me: http://andornagy.com/custom-headers-for-each-category-or-page/


    #109831

    ShanG
    Participant
    Post count: 59

    The code did not work. This is what I used and put at the bottom of the functions.php file:

    // Enable Custom Header for Specific Category
    if ( in_category( 'gin-joint' ) ) {
    remove__action( 'genesis_header', 'genesis_do_header' );
    add_action( 'genesis_header', 'cl_do_header' );
    }
    
    function cl_do_header() {
    <img src="/quattro-Zippy/images/CL_Gin_Joint_Header.png" alt="Gin Joint" />
    }

    I got a syntax error. Uggh. Please, anyone, can you help me?


    • This reply was modified 4 months, 1 week ago by  ShanG.
    • This reply was modified 4 months, 1 week ago by  ShanG.
    #109834

    nunotmp
    Participant
    Post count: 164

    You got a syntax error because you didn’t echo the html. Sorry about that.

    function cl_do_header() {
    echo '<img src="/quattro-Zippy/images/CL_Gin_Joint_Header.png" alt="Gin Joint" />';
    }

    #109836

    ShanG
    Participant
    Post count: 59

    Ok, I put the amended code in and no syntax error, but no custom header for the Gin Joint category or expanded posts. What did I do wrong? Is there anywhere else I need to edit any code? The header should have the same CSS as the default header, just a different image for that particular category and posts.

    This is the last hurdle to finishing this design. I need to get it done, finally.

    http://skeweddesignstudios.com/thisisatest/


    #110715

    ShanG
    Participant
    Post count: 59

    Can anyone help me? I am not a coder, but I can follow a tutorial very well. The code that was offered in this thread does not work.


    #110732

    braddalton
    Participant
    Post count: 10232

    There’s many different ways to do this all of which i have written about on my blog.

    You can use a plugin or code.

    If using code, you can use CSS or PHP.

    It depends on how many different header images you want to display? http://wpsites.net/web-design/different-header-images-css/

    What way do you want to do it?


    #110736

    ShanG
    Participant
    Post count: 59

    I think PHP would be best, right? And it’s just one single header for one particular category and all the expanded posts in that category.


    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    #110738

    ShanG
    Participant
    Post count: 59

    How would I modify this for a specific category and will the header display for all the expanded posts and the archive page of the category using this code?

    function specific_header_image(){
        
    if(is_home())
            
    echo '<div class="home-header"><img src="http://example.com/path/to/image.png" alt="home header image" /></div>';
        
    
    elseif(is_page() )
            
    echo '<div class="page-header"><img src="http://example.com/path/to/image.png" alt="page header image" /></div>';
    
    }
    
    add_action('genesis_header', 'specific_header_image');

    Would this work? And how do I specify which category I want in this code?

    function specific_header_image(){
        
    if(is_home())
            
    echo '<div class="home-header"><img src="http://example.com/path/to/image.png" alt="home header image" /></div>';
        
    
    elseif(is_category() )
            
    echo '<div class="page-header"><img src="http://example.com/path/to/image.png" alt="page header image" /></div>';
    
    }
    
    add_action('genesis_header', 'specific_header_image');

    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    #110742

    braddalton
    Participant
    Post count: 10232

    [php]
    if ( in_category( ‘your-category-slug’ ) ) {
    [/php]

    Where did you get the code from?


    #110743

    ShanG
    Participant
    Post count: 59

    Your site. lol

    http://wpsites.net/web-design/displaying-different-header-images/#The_Best_Solution_With_CSS

    Do I need to add CSS too for this to work properly? Everything about the header will be the same as the main site header except the image itself.


    #110744

    ShanG
    Participant
    Post count: 59

    Like this?

    function specific_header_image(){
        
    if(is_home())
            
    echo '<div class="cl-header"><img src="http://example.com/path/to/image.png" alt="cl header image" /></div>';
        
    
    elseif (in_category(‘gin-joint’))
            
    echo '<div class="gin-joint-header"><img src="http://example.com/path/to/image.png" alt="gin joint header image" /></div>';
    
    }
    
    add_action('genesis_header', 'specific_header_image');

    Now all other categories, pages, posts, EXCEPT “gin-joint” need to have the same header. According to this code, the main site header will only display on the HOME page and nowhere else, which is not what I want. Or do I have that wrong?


    • This reply was modified 4 months ago by  ShanG.
    • This reply was modified 4 months ago by  ShanG.
    #110746

    braddalton
    Participant
    Post count: 10232

    Like this http://wpsites.net/web-design/2-ways-to-add-a-unique-header-image-if-post-in-specific-category/

    The CSS tweaks depend on which method you choose as well as which theme you’re using.

    For exec Pro i used this

    .header-image .title-area,
    .header-image .site-title,
    .header-image .site-title a {
    float: left;
    margin: 0;
    max-width: 1140px;
    min-height: 200px;
    padding: 0;
    width: 100%;
    }


    #110747

    ShanG
    Participant
    Post count: 59

    Thank you! I will look at it with fresh eyes in the morning. At the moment I can’t keep them open. Damn bifocals! lol

    This is for the Quattro theme. The main header CSS is already in there and working fine.

    http://skeweddesignstudios.com/thisisatest/category/gin-joint/

    Is it better to use that category slug or ID for this?


Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.