Feature
Post

Category
Code

Getting Ready for WordPress 2.7: Really Simple Category Styling

With upcoming WordPress 2.7, just released in beta 3 as I'm writing this, styling your categories gets even easier. Previously, you more or less had to do a conditional tag thing and echo a specific class to get some custom styling, but no more.

Enter this little line of code:

PHP:
  1. <?php post_class(); ?>

The only thing it does, when it's inserted in your post's div tag, is write class="post". In other words, you replace your class="post" with post_class().

Why? Well, this little thing adds some other nice classes to each post as well. We've already discussed the sticky post class, sticky, in a previous article here on Devlounge. Besides that one, it adds the following classes:

  • category-X where X is the post's category, one for each category, so it could be category-games and category-sports if the posts belong to your games and your sports category.
  • tag-X which works exactly the same as category-X, but for tags. So the class tag-monkeys would be added for a post tagged with "monkeys".

So let's say I want to style my games category differently from my other categories. Simple! Just add .category-games to your stylesheet, and style away. Just for the sake of it, let's make all the text green, 'cause I'm in a green period right now:

CSS:
  1. .category-games { color: green; }

No, I wouldn't write "green" normally, but then again I wouldn't do all the type green either, so...

Anyway, that's about it. Just replace your regular class="post" part in your divs holding your posts, with post_class(). Then you'll have sticky post support, and more!

But wait, there's more! I sometimes want to style some parts of my blog differently, especially single posts. That's what the single.php template is for in a theme, as you know. I usually control the styling of these single posts by adding a class, appropriately named single. When using post_class() I won't be able to do that.

Wrong! Just add the class you want to add to the ones WordPress already appends to the post, like this in my case:

PHP:
  1. <?php post_class('single'); ?>

That will spit out all those category and tag classes, along with a microformat one, and a the one for sticky posts should it be a post marked as sticky, as well as the single class I added.

There you have it. Now get your themes ready for WordPress 2.7 with this lovely new post classes functionality.

  1. By Matt posted on December 18, 2008 at 1:38 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m wondering if this new feature could be used to make a category icon via CSS styling, versus using the category icon plugin. Any thoughts on how to proceed here?

  2. By Sweet Baby Girl posted on December 19, 2008 at 7:10 am
    Want an avatar? Get a gravatar! • You can link to this comment

    where should I enter that “little line” ?

  3. TrackbackFreelance Friday: My Writing Week 47 | Thord Daniel HedengrenWordPress Wednesday News: | The Blog HeraldWeekly Links #28 | GrantPalin.comGetting Ready for WordPress 2.7: Sticky Post Styling | DevloungeFun with WordPress 2.7: Adding Asides without Hacking the Loop | DevloungeWP 2.7 Blog Party is ON! | Human3rror - Where Typos are Part of the EquationMastering Your WordPress 2.7 Theme & Admin Area: Tips and TricksMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | SulVisionMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | Web Hosting and DomainsMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks : phploop

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.