DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Include the Category ID via post_class

Posted by on

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.

8 Responses

  1. If the theme already includes a post_class call in the post div, I would suggest using filters to add the class.
    function category_in_post_class($classes)
    {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
    $classes [] = 'cat-' . $category->cat_ID;
    return $classes;
    }
    add_filter('post_class', 'category_in_post_class');

  2. Epic Alex January 12, 2010

    I think you’re right with what you say about knowing the category names, and to be honest, I think people know their category names more than they know their ID’s, but a useful concept non the less.

    I also wrote about a few other ways of adding classes to post_class on problogdesign a while ago. It’s a really useful way of fine grain styling.

    http://www.problogdesign.com/wordpress/styling-different-posts-in-different-ways-with-post_class/

  3. <?php function get_cat_parent_name($post_id) {
           foreach((get_the_category($post_id)) as $category) {
                  $catid = $category->category_parent;
                  return get_cat_name($catid);
           }
    }
    ?>

    <div <?php post_class('cat-'.get_cat_parent_name($post->ID)) ?>>

    used this bit to add category parent class to each post, but adding this to functions.php causes issues with ./wp-admin category editor

    any thoughts on this

  4. Love your blog, this site has really been an eye opener. I have just got interested in blogging and hopefully i am able to do so

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry