Thesis also allows you to use post meta options to add custom body classes on a per page and/or per post basis. Thesis also has a sweet body class filter that allows you to easily add classes to the <body> tag on a mass scale.
I recently wrote an article over on Art of Blog detailing different ways to add classes to the body tag using PHP conditionals. I’ve expanded upon that a bit and come up with a function that will provide several body classes for each and every page on your blog based on location, page name, whether or not a user is logged in, etc. It should give you nearly complete freedom to designate styles for any page or group of pages on your blog. It’s certainly not all inclusive (I may add to this eventually), but unless you are doing something extraordinarily unique this should do the job!
The Code
I’ll go ahead and give you the code in one big lump, and then I’ll break it down piece by piece. Here’s what you’ll need to copy and paste in custom_functions.php:
function big_body_classes() {
$classes[] = 'custom';
if(is_single()) {
global $post;
$classes[] = 'single';
$classes[] = $post->post_name;
}
if(is_page()) {
global $post;
$classes[] = 'page';
$classes[] = $post->post_name;
}
if(is_archive()) {
$classes[] = 'archive';
}
if(is_category()) {
global $wp_query;
$classes[] = 'category';
$classes[] = 'cat_' . $wp_query->query_vars['category_name'];
}
if(is_tag()) {
global $wp_query;
$classes[] = 'tag';
$classes[] = 'tag_' . $wp_query->query_vars['tag'];
}
if(is_author()) {
global $wp_query;
$author = $wp_query->get_queried_object();
$classes[] = 'author';
$classes[] = 'author_' . $author->user_nicename;
}
if(is_date()) {
$classes[] = 'date';
}
if (is_day()) {
$classes[] = 'day';
$classes[] = 'day_' . strtolower(get_the_time('M_d_Y'));
}
if (is_month()) {
$classes[] = 'month';
$classes[] = 'month_' . strtolower(get_the_time('M_Y'));
}
if (is_year()) {
$classes[] = 'year';
$classes[] = 'year_' . strtolower(get_the_time('Y'));
}
if(is_404()) {
$classes[] = 'four-zero-four';
}
if(is_search()) {
$classes[] = 'search';
}
if(is_front_page()) {
$classes[] = 'front_page';
}
if(is_home()) {
$classes[] = 'home';
}
if(is_user_logged_in()) {
$classes[] = 'logged_in';
} else {
$classes[] = 'logged_out';
}
return $classes;
}
add_filter('thesis_body_classes', 'big_body_classes');
Let’s look at this beast one piece at a time.
Universally Applied Classes
The function applies the custom class to all pages regardless of type or location. Its important to note that this class is the first one to be added. That’s done with this piece of code:
$classes[] = 'custom';
Conversely, the last class added to each page is the user status. It applies either logged_in or logged_out depending obviously upon whether the visitor is logged in or logged out. This is accomplished with this code:
if(is_user_logged_in()) {
$classes[] = 'logged_in';
} else {
$classes[] = 'logged_out';
}
Single Post Classes
Single posts receive single and post-slug classes. If you don’t know, the “post-slug” is just the last part of the URL. For example, if your permalinks look like:
http://www.example.com/2010/title-of-your-post/
Then your post slug would be “title-of-your-post”
Here’s how we accomplish that:
if(is_single()) {
global $post;
$classes[] = 'single';
$classes[] = $post->post_name;
}
Page Classes
Pages receive page and page-slug classes. Its accomplished with this code:
if(is_page()) {
global $post;
$classes[] = 'page';
$classes[] = $post->post_name;
}
Archive Area Classes
WordPress archives include category, tag, author, and date (day, month, and year) pages. Basically, all archive pages receive the archive class. All date pages receive the date class. Then, each individual page receives its archive type (category, tag, author, day, month, year).
Additionally, each individual page receives its archive type followed by and underscore and the individual page slug. That may sound a bit confusing, but as an example, a category page would receive cat_category-slug.
if(is_archive()) {
$classes[] = 'archive';
}
if(is_category()) {
global $wp_query;
$classes[] = 'category';
$classes[] = 'cat_' . $wp_query->query_vars['category_name'];
}
if(is_tag()) {
global $wp_query;
$classes[] = 'tag';
$classes[] = 'tag_' . $wp_query->query_vars['tag'];
}
if(is_author()) {
global $wp_query;
$author = $wp_query->get_queried_object();
$classes[] = 'author';
$classes[] = 'author_' . $author->user_nicename;
}
if(is_date()) {
$classes[] = 'date';
}
if (is_day()) {
$classes[] = 'day';
$classes[] = 'day_' . strtolower(get_the_time('M_d_Y'));
}
if (is_month()) {
$classes[] = 'month';
$classes[] = 'month_' . strtolower(get_the_time('M_Y'));
}
if (is_year()) {
$classes[] = 'year';
$classes[] = 'year_' . strtolower(get_the_time('Y'));
}
The Cleanup Work
That’s all of the major stuff! We’ll wrap up the code by adding four-zero-four to 404 error pages, search to search query pages, front_page to the front page, and home to the home (blog) page. If the front page happens to also be the blog home page, both classes will be applied.
Finally, we add the appropriate filter action to actually apply all of these classes.
if(is_404()) {
$classes[] = 'four-zero-four';
}
if(is_search()) {
$classes[] = 'search';
}
if(is_front_page()) {
$classes[] = 'front_page';
}
if(is_home()) {
$classes[] = 'home';
}
Using the Classes
Now that all of these classes are applied, you need to understand how to apply style to the classes. Typically, when applying custom styles to Thesis you add .custom prior to each CSS command. To use any of these classes, you simple apply body.[your class]. Pretty simple right?
Want to add style to category pages, and add separate style for one particular category page? Now you can. Want to add style to all single posts? Do it! You can add specific styles to almost every page on your blog using this filter.
Liked this post? Get free updates via RSS when we post or
Written by Adam Baird
I'm a freelance web designer from a small town in Indiana. I love the Chicago Cubs, my wife, Coca Cola and dark chocolate...in that approximate order.
How To Add WordPress Post Thumbnails To Thesis 
Adding Detailed Breadcrumbs to the Thesis Theme 
New And Improved Thesis Numbered Page Navigation 
The Thesis Body Class Filter Put To Good Use 
The Obligatory Plugin Rant
{ 16 comments… read them below or add one }
Good post! I love having granular control over the body class. You might be interested in this comment that was left on my blog about the WordPress body_class() function. I’m kind of glad that Thesis doesn’t include it automatically because the classes can be a little hyperactive, but it’s nice to be able to add them in if you’ll make use of them!
I completely agree that classes can be a bit hyperactive with the
body_class()function. Admittedly, this post is a bit of overkill as well, but its certainly less invasive than the former.Basically I tried to keep each page accessible while keeping the number of classes/database calls to a minimum.
Does this apply to only the body class on each page?
What if I wanted to style the #content_box differently on single, but leave it as is on pages and front page?
I’m currently trying to figure out how to do exactly what you did in this post, except for other id’s and classes and not just the body.
Hi John,
The classes only apply to the body tag, but you can edit other items on the page. For example, if you wanted to add CSS for the #content_box, you would use:
body.single #content_box {}
What would really be cool is if you could replace “.custom” with whatever class you defined above.
For instance, if I wanted to change the #content_box on “is_single”, I would simply add something like this to custom.css:
.single#content_box { }
or
.page#header_area { }
Something like that.
That’s exactly what we’re doing here :)
See the comment above!
haha! yea after I commented I started playing around with it and realized it was really easy to do! Thanks for this post, it really helped me a lot!
No problem brother. One small piece of advice is to always place your extra body classes css after your custom css. So if you have:
.custom #content_box {}
and:
.single #content_box {}
they should appear in that order. Otherwise the
.customcode will occasionally overwrite the.singledepending on a few circumstances.Will do, thanks!
Hey John! I like the site and thanks for this code. However, it seems to be negating the CSS class I defined for a few pages within the Edit Page area. Is there a remedy?
I tried removing:
if(is_single()) {
global $post;
$classes[] = ‘single’;
$classes[] = $post->post_name;
}
if(is_page()) {
global $post;
$classes[] = ‘page’;
$classes[] = $post->post_name;
}
But that didn’t do it either…
Hello, there is no need to hard coded the class.
Just use this instead:
function my_body_class(){
return get_body_class(‘custom’);
}
add_action(‘thesis_body_classes’,'my_body_class’);
In the future, Thesis developer must added this as default.
Thanks anyway for sharing.
Nice! That does not accommodate individual post classes added from post edit screens though. I’ve written an updated version of this here.
This is awesome!!!
How can I add the names of categories and the names of authors to the if is_single statement? So that each article would have its author and all of its categories listed as body classes.
Julie,
Check the updated version of this post here. Enjoy!!
Adam
A BIG THANK YOU!
I can’t tell you how long I’ve been searching today for what should have been a really easy find – a simple body class filter for Thesis. Yes, this one is a bit of overkill, but everything else I’ve tried has wiped out the Thesis default .custom class!! I’m not a PHP guru but can usually customize a function to do what I want. I think all I was missing was the 2nd line:
$classes[] = ‘custom’;
Thanks again! I’ll be back. Nice design btw. ;)
Thanks for this. It’s exactly what I needed.