Dynamic Body Classes for WordPress Styling

I’ve been using the WordPress theme Thematic for the last few months and have become spoiled by dynamic body classes. Thematic automatically appends about 20 classes to the body tag which allows a great degree of control over the styling of the site based on who’s visiting, what page they’re viewing, and what browser they use. This post is about how dynamic classes work and how you can add them to any WordPress theme.

Here’s what the body tag looks like when I load a post in my site:

<body class="wordpress y2009 m12 d07 h14 singular slug-dynamic-css-theme-options single postid-491 s-y2009 s-m12 s-d02 s-h20 s-category-thematic s-author-devin s-has-excerpt s-comments-open s-pings-open loggedin mac firefox ff3">

A Few Examples of How This is Useful

Here’s a few examples of how you could change the background image of the page based on different information provided in the body tag. (Also for an example, the background image of this specific post has been styled differently than the rest of the site using the dynamic body tags and css. View the css and look near the end.).

Here’s what my css current is:
body {background-image:url(images/background.jpg);}
Different Styling on the Home Page
body.home {background-image:url(images/background-home.jpg);}
Different Styling for IE6 Users
body.ie6 {background-image:url(images/background-ie6.jpg);}
Different Styling for the Month of January
body {background-image:url(images/background-january.jpg);}
Different Styling for the Post Category “thematic”
body.s-category-thematic {background-image:url(images/background-category-thematic.jpg);}
Different Styling for Logged in Users
body.loggedin {background-image:url(images/background-logged-in.jpg);}
Different Styling for a Specific Post Slug
body.slug-post-slug {background-image:url(images/background-post-slug.jpg);}

Not Using Thematic?

You can see how this is incredibly useful, but what if you’re not using thematic? You can actually add dynamic classes to any theme. Either download the code from me, or get the most recent version of Thematic and look the file “dynamic-classes.php” (I recommend going this route because you’ll have the most up-to-date version).

If your theme doesn’t have a functions.php file, you’ll need to create one. Then you just have to copy and paste in the function. This would be everything from: function thematic_body_class( $print = true ) { to the close bracket at the bottom }.

You could also do an include if you want to keep it separate (recommended). To do that you’d paste something like this into your functions.php file: require_once(TEMPLATEPATH . ‘/functions/dynamic-classes.php’); . Then make sure that the file path is correct.

To enable it in your theme, find where the <body> tag is generated in your header.php file. Then change it to:

<body class="<?php thematic_body_class() ?>">

Real World Example

What got me off track today writing this blog post is that I needed to a different background image in the sidebar for various pages in an Elegant Theme I am customizing. I could have just added this code to add a dynamic class to the specific div I needed to style:

<div id="sidebar-image" class="<?php echo $post->post_name; ?>">

But I thought dynamic body classes might be useful in the future. So, I looked in the functions.php for the theme I was working on and added this line underneath the other includes:

require_once(TEMPLATEPATH . '/includes/functions/dynamic-classes.php');

I uploaded “dynamic-classes.php” to the correct path in the directory. Then I changed the <body> tag in the header.php file to:

<body class="<?php thematic_body_class() ?>">

Piece of cake. I now have dynamic classes to style off of. If you have any questions about how this works, please leave a comment. And if you like this type of stuff, follow me on twitter.

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Cratejoy. Find me on twitter @devinsays.

21 Responses

  1. Aj

    But if you don’t use all the classes isn’t this just a bunch of code to load for nothing? I know it only increases the size of your site by very little – but on a big/popular site every byte counts. Great for noobs, but if you know how to edit themes manually, maybe not so much.

  2. Is there a way to use this method to customize header images based on the page template chosen? i.e. I want “page template 3″ to call in a different header than the default one.

    RE: <div id="sidebar-image" class="post_name; ?>”>
    Do I have to create a “header-image” class in the stylesheet, then add this div id =”header-image” class to the header.php or to page template 3?
    Do I replace the $post->post_name with my template name? (Sorry, I’m learning CSS and php, so I’m not sure what everything is called and what it refers to yet.)

    Or would it be better to create an alternate header.php file? Can you do that?


  3. Anitha marath

    I have created 3 custom page templates product.php,collection.php,control.php,but when i load this page in the site it shows error404 in the body class.could you please help me to solve this,i have used the plugin Declutter to remove this class from the body but its not working in these 3 pages

  4. Anitha marath

    Actually my problem is these pages are considering as 404page.when i check this page with w3c it shows the error ” I got the following unexpected response when trying to retrieve :
    404 Not Found”

      1. Cristián

        Anitha, I have the same problem in my theme, my custom post types always show error404 in body_class, somebody can help me please?

  5. I Am using the thematic theme adapted by sitepoint wicked theme as featured in wicked wordpress themes. The dynamic body does not work. The body looks like:

    Created a template for the page landing page, which should be shown as a class but no. I had my suspicions but after using a template has proven that the dynamic body code is not doing its job. What can be causing this.

    WordPress is the latest with no plugins. The code is what is used by sitepoint, and down downloaded from their site.


  6. marko

    mmmm this is what I’m looking for but I think is a little bit complicated. There is a tutorial or example file?
    I don’t understand exactly which file I have to modify!

    Can you help me ?

    thank you in advance!

Leave a Reply