By Abhijit Nadgouda

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.