Different templates for different categories?

Community Forums Forums Design Tips and Tricks Different templates for different categories?

This topic is: resolved

This topic contains 13 replies, has 3 voices, and was last updated by  braddalton 8 months, 1 week ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #76993

    styzer
    Participant
    Post count: 85

    Hi all,

    I’m working with the Generate theme. I need to create customized templates for different categories. I used to be able to use a special Genesis header coding, but it’s giving me errors this time around.

    This is the code I used before:

    
    do_action( 'genesis_doctype' );
    do_action( 'genesis_title' );
    do_action( 'genesis_meta' );
    
    <?php if(is_category(9)){?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style_educate.css" type="text/css" media="screen" />
    <?php }elseif(is_category(6)){?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style_advocate.css" type="text/css" media="screen" />
    <?php }elseif(is_category(3)){?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style_celebrate.css" type="text/css" media="screen" />
    <?php }elseif(is_category(4)){?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style_connect.css" type="text/css" media="screen" />
    <?php }else{?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" media="screen" />
    <?php }
    

    The error refers to the first line starting with <?php if(is_category(9)){?>

    Has something changed in the Genesis framework which keeps me from using this now?

    Thanks for any help!

    http://musicmakesus.ca/neweng/
    #77256

    braddalton
    Participant
    Post count: 9210

    Do these still work on HTML 5 themes?:
    [php]
    do_action( ‘genesis_title’ );
    do_action( ‘genesis_meta’ );
    [/php]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #77271

    styzer
    Participant
    Post count: 85

    Not sure, Brad, maybe I’ll try to take these out and see?

    #78733

    styzer
    Participant
    Post count: 85

    No joy, here… I found this on StudioPress though: http://my.studiopress.com/snippets/custom-body-class/

    
    Add body class to a category page with an ID of 1:
    
    <?php
    //* Do NOT include the opening php tag
     
    //* Add custom body class to the head
    add_filter( 'body_class', 'sp_body_class' );
    function sp_body_class( $classes ) {
    if ( is_category( '1' ))
    $classes[] = 'custom-class';
    return $classes;
    }
    
    view raw category-1.php  

    I would like to be able to use this, then. However, I need clarity:

    1- do I create a new file?
    2- do I edit style.css?
    3- any setting I need to do in the dashboard?

    Thank you ANYONE! I’ve been stumped for days and I’m getting very depressed, the more I try to figure it out, the more I feel something is wrong with my brain…

    ANdre

    #78745

    Summer
    Participant
    Post count: 1009

    That snippet would go in your functions.php.

    You would change ‘custom-class’ to whichever custom body class you’d want to use, say, from your code above you’d use ‘educate’, and then you’d add that as a class to the “body” section of your style.css, using the code from your style-educate.css,

    I think it’s possible to enqueue that style-educate.css as a separate css file, but I’m not sure about the best practice method of that at the moment.


    #78757

    braddalton
    Participant
    Post count: 9210

    All that does is generate a unique body class conditionally which will help if you want to style each category archive differently.

    You don’t need separate style sheets however you can add them using this code.

    Otherwise, you can create category archive templates which also include a unique body class.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #78764

    braddalton
    Participant
    Post count: 9210

    Here’s a good explanation of creating category archives however you wouldn’t use this code in this post for genesis http://codex.wordpress.org/Category_Templates


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #78813

    Summer
    Participant
    Post count: 1009

    Brad, what would be considered the “best practice” method for maintaining a separate css file for customizations, for tinkerers who’d really love to update theme versions without losing customizations, just because we like to play so much? :)


    #78847

    styzer
    Participant
    Post count: 85

    OK, getting somewhere!

    I inserted this in style.css:

    /* EDUCATE pages - different background */
    .educate-class {
        background-color: #84b855;
    	}

    And this in functions.php:

     //* Add custom body class to the head
    add_filter( 'body_class', 'sp_body_class' );
    function sp_body_class( $classes ) {
    	if ( is_page( '4' ))
    		$classes[] = 'educate-class';
    		return $classes;
    }

    Now something VERY strange happens. The new background color will ONLY show if I reduce my page to a certain size, like 50%. Only then can I see the new background color as a stripe on each side.

    • This reply was modified 8 months, 1 week ago by  styzer.
    • This reply was modified 8 months, 1 week ago by  styzer.
    #78852

    styzer
    Participant
    Post count: 85

    Looks like I also had a bit of a mess on my hands: of the 15 categories that were on this site, only 3 of them have any post, plus the uncategorized category. So 4 categories. The rest have no use. So in fact, I’m not working with categories templates, but pages templates.

    #78855

    styzer
    Participant
    Post count: 85

    If I select the “landing” template in “page edit,” I see a stripe of green color on top, but no header… I’ll keep playing with this and see. If anyone has any clue…

    http://musicmakesus.ca/neweng/educate/

    Regards,

    Andre

    #78883

    styzer
    Participant
    Post count: 85

    I was able to figure this out with the help of my nephew. I’ll post the solution later!

    http://musicmakesus.ca/neweng

    Andre

    #79084

    styzer
    Participant
    Post count: 85

    OK, so here is the solution I applied:

    1- In functions.php, I added this code near the top, right under:

    //* Child theme (do not remove)
    define( 'CHILD_THEME_NAME', 'Generate Theme' );
    define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/generate' );
    define( 'CHILD_THEME_VERSION', '1.0.2' );
    $content_width = apply_filters( 'content_width', 570, 450, 880 );
    

    Here is the code I inserted:

    //* Add custom body class to the head
    add_filter( 'body_class', 'sp_body_class' );
    function sp_body_class( $classes ) {
     global $post;
     if ( is_page( '4' ) || (isset($post->post_parent) && $post->post_parent == 4)){
       $classes[] = 'educate-class';
      }
    
     if ( is_page( '12329' ) || (isset($post->post_parent) && $post->post_parent == 12329)){
       $classes[] = 'advocate-class';
      }
    
     if ( is_page( '12330' ) || (isset($post->post_parent) && $post->post_parent == 12330)){
       $classes[] = 'celebrate-class';
      }
    
     if ( is_page( '12331' ) || (isset($post->post_parent) && $post->post_parent == 12331)){
       $classes[] = 'connect-class';
      }
    
      return $classes;
    }

    2- I created the 4 classes to insert in my style.css file AT THE VERY BOTTOM of the file, after everything (Generate theme has a double closing }, so right AFTER that). Here is what it looks like :

    
    /* EDUCATE pages - different background */
    .educate-class {
        background: #84b855;
    	}
    
    .educate-class #inner {
     background-color: #84b855;
    }
    
    .educate-class #wrap {
     background-color: #6a9544;
    }
    
    /* ADVOCATE pages - different background */
    
    .advocate-class {
        background: #f28c4d;
    	}
    
    .advocate-class #inner {
     background-color: #f28c4d;
    }
    
    .advocate-class #wrap {
     background-color: #dc5b0b;
    }
    
    /* CELEBRATE pages - different background */
    
    .celebrate-class {
        background: #e09ddc;
    	}
    
    .celebrate-class #inner {
     background-color: #e09ddc;
    }
    
    .celebrate-class #wrap {
     background-color: #cd66cc;
    }
    
    /* CONNECT pages - different background */
    
    .connect-class {
        background: #c2afe6;
    	}
    
    .connect-class #inner {
     background-color: #c2afe6;
    }
    
    .connect-class #wrap {
     background-color: #673bb8;
    }

    3- I select the appropriate parent for each child-page in the dashboard, so they will display the specific color.

    Voila! Hope this helps someone else, this is by far the simplest and most effective way I’ve seen of doing it.

    Regards,

    Andre

    • This reply was modified 8 months, 1 week ago by  styzer.
    • This reply was modified 8 months, 1 week ago by  styzer.
    #79189

    braddalton
    Participant
    Post count: 9210

    Thanks Andre


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.