Two words: Body. Classes. Never let it be said that this flying fat broad has body issues. Oh no. How many times have you needed to tweak a category of posts to make some element fit a little better? Or had a site with some content aimed at fashion-conscious adults - and another set of posts aimed at their kids? You could use all sorts of fancy taxonomy - custom post types or multisite, or some other foolishness. But I just don't have the patience. But I do have a secret weapon. Body classes. They've gotten me out of more styling jams than Janet Jackson's wardrobe staff. (Wait. That's not saying much, is it?) Let's take a look at how a good look through all those classes on your body tags can lead you to a world of styling options - with no malfunctions allowed.

1. So I’m working on this ball again.
It’s still running on an old Genesis child theme, and I’m tired of falling all over the div IDs.
Time to port to HTML5 and spruce up a few things.
Now, let’s take a look at something.

2. If you were here last year, you know this joke. But what’s the difference between that ball - and this basic widgeted home page?

3. 1
2 3 4
Not one thing, from a widget standpoint. That was last year’s punchline.
If you want to get technical, yes - the Clinix page has a header, and Frontenac - the ball - doesn’t.
The other thing they have in common is the reason we’ve gathered here today:

4. Home pages almost always have the home body class defined right here.

5. Here’s our big damn ball … this from last year’s version of the live site.

6. Here’s a content page.

7. The pros page has the pros body class.

8. Here’s a widgeted front page …

9. Here’s a content page.

10. Now, how many times have you built a home page and NOT, almost without thinking, defined its styles like this: .home row, .home .entry-footer, home this,
home that.
You couldn’t do that if the home body class wasn’t already baked into your theme.

11. Which it is, in almost every theme. Or a reasonable facsimile. Here’s Agency Pro, a Genesis child theme with HTML5.

12. Ever wonder how Genesis themes and others pull off their color variations? Here’s Agency Pro again.

13. And whattya do when a client has two completely different audiences to attract? Like my friend Naz here. Day business: commercial real estate.

14. Other times, he’s Coach Naz on the tennis court. One site, two topics two audiences.
Two body classes.

15. What if the Pros’ area …

16. needs to look different …

17. … from the programs area? Now we have three body classes!

18. Now, we’re not limited to any certain words in that long-butt body-class rule. We can use any of ‘em.

19. Now, we’re not limited to any certain words in that long-butt body-class rule. We can use any of ‘em.

20. Now, we’re not limited to any certain words in that long-butt body-class rule. We can use any of ‘em. Or if we don’t like those, we can make our own.

21. Here's a category archive from a hypothetical food blog - say, soups and stews.
We all know what a category archive is? Good

22. Maybe we want the dessert archive to have different colors.

23. In Genesis this is easy! We just add the body class - dessert - to the bottom of the post in the admin.

26. Then write new rules that all start with .dessert ...

27. Here’s one that also works in Genesis but doesn’t need it
I grabbed it from Philip Newcomer, the @BackwoodsCoder, who looks to have some nifty-looking plugins. Now, his version checks for single posts, but I like
the idea of adding a body class to the archive or anything else that might be in that category. And, this adds all the categories to the appropriate body-class
tags. So no picking and choosing - just style ‘em ;like you find ‘em.

28. So that foreach function assigns the category slug here …

29. See - there it is - it adds the slug …

30. and here!

31. Here it is, in the markup! PS> the function picks up the slug, so if you want this thing short, you can make it short. No reason to have to type something that
looks like your kitten wrote it in the middle of the night.
Heh. Maybe writing a function once is way better than writing 'desserts' on fifteen posts!

32. So with one function and as much or as little CSS as you feel like, you can go from salty chicken soup …

33. to sugary, chocolatey cupcakes …

34. To a buttoned-up business persona …

35. … To a fun-loving tennis coach and so much more.

36. Moi
Mary Baum
@marybaum