Having Fun with the WordPress post_class()

While I know that the WordPress post_class(); has been around since WordPress 2.7 I recently just stumbled upon it for some recent projects.

Unfortunately, while post_class(); gave me a ton of function that I needed, I still needed to extend it just a bit to suit the project specific needs.

What is post_class();

Stealing directly from the Codex

The post_class(); may include one or more of the following values for the class attribute, dependant on the pageview:

  1. .post-id -> The specific post-id for each post
  2. .post -> The specific post type. A custom post type of show would be .show
  3. .attachment -> on attachment template files
  4. .sticky -> If the post is marked as a sticky post
  5. .hentry -> (hAtom microformat pages)
  6. .category-ID -> The ID of any category on the post
  7. .category-name -> The category-nicename
  8. .tag-name -> The tag-nicename

Basic implementation:

So instead of wrapping your posts in a div with the class of post you should be using code like this:

[php]
<div id="post-” >
[/php]

The actual HTML may look something like this for a post in the “dancing” category:

[html]

[/html]

It’s also worth noting that if you’ve already defined a class in plain HTML then post_class(); won’t work. Any extra classes will need to be added to the post_class(); itself.

Beyond the Codex

So now that I’ve repeated the Codex information on post_class(); how about I add something new to the mix. All of these samples would go in your functions.php file.

First things we’ll do is add an alternating odd/even class to our posts so that we can alternate highlighting.

[php]

[/php]

Now let’s break down the code. First we add_filter to the post_class and we do that by calling a function (notice it’s name spaced you should always do that to minimize conflicts).

Next we establish a global variable of $current_class and set it’s value to odd.

Now we start our function that will accomplish the odd/even switching. We set $classes equal to $current_class then toggle $current_class from odd to even.

Finally we need to return $classes to make sure that we have something to send to post_class(); at the end so we return the new values.

We also have all of these wonderful custom taxonomies now in WordPress 3.0 but if you look at the output of post_class(); you’ll notice that none of your custom taxonomies show up. Sure your custom post types do, and on a regular post the categories and tags do, but on a custom post type you get nothing. While this might be an oversight lets add it for our purposes.

[php]
$term ) {
if( !in_array( $term->slug, $classes ) ) {
$classes[] = $term->slug;
}
}
}
return $classes;
}
}
?>
[/php]

The example above assumes that we have a custom taxonomy of Genre and will add any terms from genre to post_class();. If you had a different custom taxonomy just change ‘genre’ to whatever you’ve named your custom taxonomy.

The final scenario I’ll go over today is to just add some static classes to post_class();. In one of the projects I added the odd/even highlights to post_class(); but if there is already a class on the wrapper nothing will show for post_class();. Unfortunately this theme had a number of odd classes just used to style (like .can_chg_bg WTF!!) that I needed to add to along with the odd/even highlights.

[php]

[/php]

With the example above just duplicate the $classes[] = 'your-class-name'; and change the value to whatever classes you need to add to post_class();.

Other Resources

This is not an exhaustive post on what you can do with post_class(); so you can do some of your own looking with some of the resources below:

Any ideas that I’ve missed? Got some neat post_class(); snippets and use cases to share?

To get a head start, join thousands of other men and Stop The Struggle.

Get my free eBook to help you stop working all the hours without traction.

You’ll also get a weekly email with good resources to help you do family with the same intention you do your work. Both need to run well if you want to win.

%d bloggers like this: