Using WordPress Categories To Style Posts

By Abhijit Nadgouda

UPDATED 2010: See below

One of the reasons WordPress fits so many bills is its flexibility. It lets you do things at a much lesser cost, not necessarily money, but time and effort too, as compared to others. This article is about styling WordPress posts differently using the categories they are classified under.

Why Categories?

Categories are the metadata, they give you information about the post. This metadata can be from multiple aspects, e.g., using the category open source to convey that the post is on that subject or using the category feature to indicate that this is a researched feature as against a random post.

The categories contribute to the reason why WordPress suitable for so many non-blog web sites.

You can make this metadata more visible by styling the posts differently by categories – like a different background color or different icons or bigger font size.

The Wrong Way

Of course, you know the categories, you have the post and you have the if-else PHP command using which you can create different HTML code as per categories. It is quite easy to know if a post is classified in a specific category using in_category($category_id).

Everything is available and it is very tempting to use this. The only problem is that this can cause performance problems in future. Everytime an if-else is executed, processor cycles are spent in taking the decision. This can escalate to a severe performance problem if the number of categories increase.

The Right Way

So here is the solution I prefer. WordPress lets us control the styles purely in CSS, and the connector between the HTML code and the styles is the corresponding CSS class or ID. For example, consider the markup

<div class="post">

Here the CSS class post defines what styles will be applied to the post. I have omitted other code from typical templates to keep the space clean.

The best way to leverage this is to use the WordPress category slugs as CSS classes or IDs, and define styling for them in the CSS. Getting the category as slugs, and not as links, is not directly supported in WordPress today. But it is extremely easy to do so. You can put the following code in your theme, preferably in functions.php, so that it is available to all templates in the theme.

function the_category_unlinked($separator = ' ') {
    $categories = (array) get_the_category();
    
    $thelist = '';
    foreach($categories as $category) {    // concate
        $thelist .= $separator . $category->category_nicename;
    }
    
    echo $thelist;
}

The corresponding index.php can look like

<div class="post<?php the_category_unlinked(' '); ?>">

This will create the following HTML code for a post classified in categories with slugs opensource and feature:

<div class="post opensource feature">

And now the styles defined in the CSS classes post, opensource and feature will be applied to that post. The corresponding CSS code can look like:

.post {
    padding: 5px
}
.opensource {
    background-color: #f0f0f0;
}
.feature {
    font-size: 1.1em;
    background-image: url(images/feature.png) no-repeat top right;
}

This thing to remember here is that the styles are applied in a cascading manner, so you have to be careful in duplicating the styles. For example, if you set the background-color for CSS class feature, it will override the one set in the class opensource.

Conclusion

You can go ahead and use the other metadata like author name and define corresponding CSS classes in your stylesheet. You can find excellent code for this in the Sandbox theme, in functions.php as a function called sandbox_post_class($print = true).

I have been using this technique for quite some time. If you do remember this, then you can leverage this to the fullest extent to visually style posts differently.

---

Abhijit Nadgouda is a software engineer who wants to use software to solve problems and contribute to the software development world. Blogging is the medium of his choice for developing and conveying his thoughts.

---

Updated Information on Using WordPress Categories to Style Posts

WordPress has changed a lot since this article was written by my friend, Abhijit Nadgouda, as part of the anniversary of this blog. Here is some updated information to help you make this process easier.

There are a variety of ways to style posts by categories. Let’s focus on the two most easily implemented.

To Style the Post Content Area Only

To style the post content area by a specific category, use the post_class function.

In the WordPress Theme template file for the index.php, single.php, home.php, category,php, archive.php, and all template files which display posts, change the post DIV to:

<div id="post-<?php the_ID(); ?>" <?php="php" post_class();="post_class();">

An example of the results would be:

<div id="post-87" class="post-87 post type-post hentry category-road-food tag-food-on-the-road tag-healthy-eating"> 

Add the appropriate stylesheet classes to the stylesheet for styling the post by category.

.category-road-food {
	/* styles for all posts within the road food category */
	}

Another challenge is which style to choose when a post is in multiple categories. DigWP has a good option in “Include the Category ID via post_class” which only lists the first category.

To Style the Entire Post With a Specific Category

Sometimes the design must encompass the entire page, not just the post content area. Since WordPress 2.7, the ability to style any type of post from the BODY tag down has been built-in with the body_class template tag. If not in your WordPress Theme’s header.php, you can replace the BODY tag with the following:

<body <?php body_class(); ?>>

However, this is not the answer to style a post within a category.

If you wish to customize the Category Template Files, then this is the answer. In a perfect world, this template tag would include the categories the post is in. It doesn’t. It only includes the categories when a category template is used. If you wish to style the posts within a specific category, you need to take a few more steps.

To add category IDs in the body_class for posts, add the following to the functions.php of your WordPress Theme.

// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

The results would be:

<body class="logged-in single single-post postid-180 cat-1085-id"> 

The CSS for cat-1085-id would be:

.cat-1085-id {
	/* styles for all posts within the category with the 1085 ID number */
	}

Style by Category Nicename: If you don’t want to style by category ID number, which can be odd looking, you can use this version which styles by category nicename in the functions.php:

// category nicename in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Which will create the following for the “road food” category:

<body class="logged-in single single-post postid-114 road-food"> 

And the styles would be:

.road-food {
	/* styles for all posts within the road food category */
	}

If this is just too much for you, you can also use the Ambrosite Body Class Enhanced WordPress Plugin to make life a bit easier.

More Category and Post Styling Resources

Here are more resources for enhancing your WordPress Theme by individual post, category, page, and more styles.

• Template Tags/body_class – WordPress Codex
• Template Tags/post class – WordPress Codex
• Conditional Tags – WordPress Codex
• Displaying Posts Using a Custom Select Query – WordPress Codex
• Include the Category ID via post_class – Digging into WordPress
• guff: Post Templates by Category
• Single post templates for WordPress – Justin Tadlock
• Creating Multiple Single Posts for Different Categories – Lorelle on WordPress
• Unique Single Post Templates for Different Categories – Perishable Press
• Styling Individual Posts Based On Category – WordPress Canada
• Giving different styles to different WordPress categories – WP Garage
• WordPress Single Post Templates – Nathan Rice
• Category dependent post stylization – WordPress Experiments
• Styling Different Posts in Different Ways With Post_Class – Pro Blog Design
• Generate CSS Body Classes in Interspire Shopping Cart – Denver SEO Blog
• Styling Posts by Category and Category-Specific Images – WPDesigner.com
• How to Make Your New Posts Stand Out – Styles based upon the past 24 hours – WPRecipes