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 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:

.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 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. By D Hall posted on May 5, 2009 at 6:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Some keyword instruments that may be utilizable in estimating demand are WordTracker and Yahoo Overture’s Term Suggestion Tool. If you’re looking to oversee both of these manually, then I recommend visiting Google Webmaster Tools and Yahoo.

  4. 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 : phploopAMB Album » Mastering Your WordPress 2.7 Theme & Admin Area: Tips and TricksMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | Web2.0Mastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | Quest For News, A TUTORIAL BaseMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | Webmaster TipsMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks | Webmaster Zone - Cyooh.comBest link of web designMastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks « Temas e Dicas para Wordpress