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

Question

I'm customizing a WordPress installation and was wondering what the best way to do this is. I want to customize each post completely depending on the category. Each post will be under only one category.

Answer 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.

Answer 2

css is your best route but you will have to design it every time and upload it to your css file. Or are you talking about the archive view?

Answer 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.

Answer 4

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}