How to change the layout and styling of posts according to their category in WordPress?

5 comments

1. for the css route, you can use the post_class() function to give you category dependant css classes.

   if you go beyond formatting, i.e. output different elements depending on the category, you could use the conditional tag in_category() in an ‘if-elseif-else’ structure.

   the category archives can be done with category templates.

   Log in to Reply

2. There’re 2 functions that help you handle the classes in WP: body_class() and post_class(). When you use body_class(), you can style the post that in a certain category like this (in your CSS file):

   /* normal rule for all posts */
   .post-title {font-size: 22px; color: #0f0}
   
   /* for posts in Talks category only */
   .category-talks .post-title {font-size: 28px; color: #fff}
   

   Log in to Reply

3. If you want total control, then a css solution is not enough. a more powerful solution is to create a sort of template hierarchy for single posts based on the category slug. Here is the general idea.

   In single.php find out the categories connected to the post using get_the_category() – if as you say there will only ever be one category assigned, then just use the first value in the returned array. then once you have the cat object, get it’s slug. from there see if that filename exists in the theme folder that matches ‘single-‘ plus catslug and load it if it does. Otherwise continue using the regular single post loop. then you create post templates for specific categories and name them based on the category slug. ie. single-mycatslug.php.

   here is some code:

   $my_cats = get_the_category();
   
   if ( is_array( $my_cats ) ) {
       $my_cat_slug = $my_cats[0]->slug;
   }
   
   $my_template = 'single-' . $my_cat_slug . '.php';
   
   if ( file_exists( TEMPLATEPATH  . $my_template ) ) {
       get_template_part( $my_template );
   } else {
       // run normal loop for single post
   }
   

   I run this on a production site and it works great.

   Log in to Reply

4. Add a custom class in your functions file to style all posts in a category the same as well as the category archive page.

   add_filter( 'body_class', 'wpsites_add_body_class' );
   function wpsites_add_body_class( $classes ) {
   if ( in_category('8')) {
      $classes[] = 'your-custom-class';
      return $classes;
      }
   }
   

   And some sample CSS:

   .your-custom-class {
       background-color: red;
       color: #fff;
   }
   

   Log in to Reply

5. Here is how I would do it:

   1. Add a CSS class to the single posts based on the categories they contain
   2. Use these CSS classes in the stylesheet to stylize the posts based on the categories.

   For example; PHP, that goes straight in the functions.php of your theme:

   /**
    * Add CSS class(es) to the body of the single posts with the prefix `has-cateogry-`
    *
    * @param Array An array of body classes
    * @return Array A modified array of body classes
    */
    function wpse_18860( $classes ) {
     if( is_single() ) {
       global $post;
       foreach( ( get_the_category( $post->ID ) ) as $category ) {
         // add category-slug with the prefix 'has-category-' to the $classes array
         $classes[] = 'has-category-' . $category->cat_name;
       }
     }
     // return the $classes array
     return $classes;
   }
   add_filter( 'body_class', 'wpse_18860' );
   

   And CSS, for the style.css file of your theme:

   /* Default style for the single posts */
   .single {
     background-color: #ffd;
     color: #334;
   }
   
   /* Category-based style for the single posts */    
   .single.has-category-travel {
     background-color: #332;
     color: rgba(255, 255, 255, .5);
   }
   

   Not that much savvy, as every time you create a new category, you have to add a new style selector in the CSS to style the posts with this new category.

   Log in to Reply