Thesis Custom Body Class – How To Use It To Create Targeted Custom Styling

There are some situations where you might want to target a specific page, post or group of pages in Thesis and apply unique custom styling to those posts or pages. The Thesis custom body class is the best way to handle this.

Before I get into how to use this, I wanted to take a quick moment and explain a little about custom classes. When you make design customizations to Thesis, it’s done using the custom.css file. The way Thesis knows to use this file is in the “Site Options” where you can enable or disable this. When it’s enabled, Thesis adds a css class called ‘custom’ to the body tag. This way, when you create your css customizations, you add .custom to each line of your css code.

The same concept applies to Thesis custom body classes. You have the ability to assign an additional custom body class to your posts or pages, and when you do this, you are now able to specifically target that page or post by replacing .custom with your custom body class. If you’d like to read a little more about why this works, check out this post on css specificity over at the DIY Themes blog.

How to Use Thesis Custom Body Classes

There are two ways to assign a custom body class to your posts or pages. The first way is to simply use the custom body class field which you will find in the post/page editing screen. It looks like this:

All you do is enter the name of your body class in the space provided and you’re done. Thesis will now add this custom body class to the body tag of the page or post in question.

I recently had to use this method to target a couple of pages on a site I was building for a client. I needed to add a different background image to each of the pages main content sections and the easiest way to handle this was to add a custom class to each of the pages, then target those pages in the custom.css file.

Thesis Custom Body Classes Filter

If you have a group of pages you want to target, then this first method isn’t recommended because it can become tedious adding these classes in manually to every page. For this I’d recommend the second method which is the thesis_body_classes filter. Don’t let this scare you, but it looks like this:

function custom_body_class($classes) {
	$classes[] = 'your_custom_class';
	return $classes;
}
add_filter('thesis_body_classes', 'custom_body_class');

This basically does 4 key things:

1. Creates a function called custom_body_class and passes the $classes parameter so it can be defined
2. Defines $classes as the name of the new custom class (your_custom_class)
3. Returns $classes so that the class will actually show up in the HTML
4. We then add this function to the thesis_body_classes filter

Now that you have the basic format down, you probably realize that by doing this, it will add the custom class to every page and post across the entire site. So we need to apply a condition to the function by using a WordPress conditional tag. Let’s say you wanted to add the custom class to the home page only, then use this code:

function custom_body_class($classes) {
	if(is_home()) {
		$classes[] = 'your_custom_class';
		return $classes;
	}
}
add_filter('thesis_body_classes', 'custom_body_class');

Now you can substitute the is_home() part for a different conditional tag. If you wanted the custom body class applied to all category pages, then use is_category(). All single post pages, will be is_single() and so on. You get the idea.

now add custom styles by targeting the thesis custom body class in your custom stylesheet

Now that you’ve created your custom body classes, you will want to get to the reason for why you’re doing this in the first place. That’s to target these posts and/or pages and apply custom styling to them. You do this of course inside of your custom.css file. Just replace .custom with your new class. Here’s just one example out of many for how this would look:

.your_custom_class #content { background-color:#EFEFEF; }

And that’s about it. Pretty simple. There’s some advanced things you can do with this, I’d recommend you take a look at the advanced examples in this post by Adam Baird over on the artofblog.com site.

Tagged as: Custom Body Class, thesis tips, web design