Include the Category ID via post_class

The default output for WordPress’ post_class template tag includes class names for just about every type of page view imaginable:

• page-parent
• search-results
• logged-in
• author
• paged

Plus just about everything else except for category ID information. It gives some good category-specific class names, but nothing to represent the category ID. For example, including the post_class function like this in your markup:

<div <?php post_class(); ?>>

Will output something like this in your HTML source code:

<div class="post-5 post hentry category-uncategorized tag-demo tag-site tag-test tag-themes tag-typography">

So if you happen to know the actual names of the categories then it’s not really needed, but for theme development, it’s useful to be able to generalize category distinctions and have them available as class names. Why? Because then the theme designer can apply category-specific styles very easily, and without having to mess with using actual category names.

For example, if we had the first category name for each post available to us as a class name, we could do something fun like this with our CSS:

div[class$="0"] selector { color: red; }
div[class$="1"] selector { color: blue; }
div[class$="2"] selector { color: green; }
div[class$="3"] selector { color: brown; }
div[class$="4"] selector { color: orange; }
div[class$="5"] selector { color: yellow; }
div[class$="6"] selector { color: purple; }
div[class$="7"] selector { color: white; }
div[class$="8"] selector { color: black; }
div[class$="9"] selector { color: gold; }

Generalized category-specific selectivity enables us to diversify and enhance our design without making any assumptions or requiring the theme user to fuss with overly complicated settings.

So to include each post’s first category ID in the post_class output, we first need the category IDs as an array, which we can get from this tag:

get_the_category();

Then we need to pluck out the first ID from the array:

$category[0]->cat_ID;

..and then make it a function and add to your theme’s functions.php file:

// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}

Note the category IDs are sequenced numerically in the array, and that we can get at any position within the sequence by changing the “0” (which returns the first ID) to any number.

Now to include our first category ID within the output of the post_class, we can do something like this in our theme template files:

<div <?php post_class('cat-'.get_first_category_ID()); ?>>

This code will now include the category ID in the output like so:

<div class="post-5 post hentry category-uncategorized tag-demo tag-site tag-test tag-themes tag-typography cat-3">

Notice the additional “cat-3” class name? That’s going to correspond to the post’s first category ID, enabling you to define category-specific design properties without dealing with category names.