Using Thesis Custom Body Classes To Break Down Design Barriers

The level of customization you can achieve using the Thesis theme is really only limited by your imagination. One of the best tools Thesis offers is the ability to add custom classes to the body tag on any page or group of pages. Whether you want different header images for different pages, dynamic site backgrounds, different color schemes on category pages, or just about any other dynamic css job, custom body classes are up to the challenge!

Why Use Custom Body Classes?

The primary reason for using custom body classes is to distinguish certain posts, pages, or portions of your website from others. The ability to use special formatting allows you to make it clear to your visitors what content is important, or somehow separate from the rest of your site. This is not something that should be done excessively, but when used appropriately, it can increase page views, get you more subscribers, and increase conversion rates!

How Do Custom Body Classes Work?

To get started, the body tag contains all of the html that displays as your website’s content. Assuming you’ve opted to use the “Custom Stylesheet” in the Thesis site options panel, Thesis automatically adds a “custom” class to your body tag site-wide. This is why you add .custom to the beginning of each line of css code you use in custom.css.

Adding additional Thesis body classes essentially work the same as the standard “custom” class. To get started you have two options; you can add custom body classes using individual post (or page) options, or you can use a Thesis filter to assign classes to a group of pages, a specific category, or just about any other specific area of your website you can think of.

Once you’ve added the class, you can now add css that applies only to the custom body class you’ve added. We’ll get to that in a minute. For now, let’s talk about adding custom body classes!

Assigning Custom Body Classes

As mentioned above, there are two ways to add additional body classes to a specific page or to a group of pages.

First, you can use the Thesis “CSS Class” post option. You’ll find it on post editing pages in your WordPress admin. It looks like this:

All you need to do is enter your new body class in the space provided and you’re done! You’ve just added the class to that specific page only. I don’t recommend using this for large groups of pages as it gets tedious to do this for each post or page. Ultimately you’re bound to forget to add the class occasionally, which results in design inconsistencies that look sloppy and distracts readers.

The second and best way to handle custom body classes for groups of pages is to use the thesis_body_classes filter. It sounds scary, but its really very simple. Here is what the code looks like:

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

We’ve done four things here:

1. Setup a function named custom_body_classes and passed the $classes parameter through so we can define it
2. Defined $classes as the name of your new class (in this case its your_new_class)
3. Returned $classes so that the class will show up in our HTML
4. Used add_filter to activate our new function by adding it to the thesis_body_classes filter

Now, the filter above doesn’t contain any conditionals, so this function will add the new class to the entire blog.

Now lets say we only want to add it to a specific area of the blog. For the purpose of this tutorial, let’s add it to category pages. In order to do this, we add the WordPress conditional “is_category()“, so that the filter only applies to category pages:

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

Get Specific

There are a number of ways that you can target groups of pages with custom classes. Let’s take a look at a few examples!

WordPress Conditional Tags

As shown above WordPress comes with built-in conditional tags. These tags can be used to display content in specific portions of your blog. For example, the is_category() use in the example above targeted only the category pages. Here’s another example using conditional tags:

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

Here, we’re using is_single(). This will apply the filter only to pages that contain a single post, like the one you are viewing now.

There are a large number of conditional tags to choose from. A few of the other notable ones are is_page(), is_tag(), is_date(), is_404(), is_search(), and is_home().

Advanced Examples

Posts With Custom Fields

WordPress allows you to create custom fields for individual posts. This gives you a ton of extra freedom when it comes to customizing the look and feel of your blog. For example, many of the posts here at Art of Blog contain attribution to the owner of images used in that particular post. These are controlled by two custom fields.

Tread lightly, gentle reader. These examples are fairly complex, and are probably not for the coding impaired. Take it slow. I’ll be as detailed as possible in order to ensure that this is relatively easy to understand.

Let’s write a conditional that will target only posts that use those two custom fields. Here is the code:

function custom_body_class($classes) {
	global $post;
	$credit_name = get_post_custom_values("photo_credit_name");
	$credit_url = get_post_custom_values("photo_credit_url");
	if(isset($credit_name[0]) && isset($credit_url[0])) {
		$classes[] = 'your_new_class';
		return $classes;
	}
}
add_filter('thesis_body_classes', 'custom_body_class');

Here’s what we just did:

1. Called global $post;. This ensures that WordPress will be able to access the post’s information in order to determine whether or not these two custom fields exist for that particular post
2. Used get_post_custom_values() in order to find out what the values are for the two custom fields we are after.
3. Definited variables to replace get_post_custom_values() for the two custom fields. This cleans up the conditional code significantly.
4. Wrote the conditional as if(isset($credit_name[0]) && isset($credit_url[0])). isset() is a PHP function which determines whether or not an element exists and has a value. && specifies that both $credit_name and $credit_url must exist and have value in order for the conditional to be satisfied. [0] is there because we need to ensure that we return the first custom value in the event that there is more than one.
5. Used add_filter to hook our function on the thesis_body_classes filter

Essentially, this will apply the function for all posts that have values determined for both of the aforementioned custom fields.

Page Families

WordPress also offers the ability to create pages that are “children” or “sub-pages” of other pages. The one problem is there is no conditional tag to target sub-pages specifically. In order to target page families, we need to create a function that will allow us to target those pages. Here is the code for that:

I’m not going to get into the specifics of this function’s inner workings because its outside the scope of this article. However, if you copy and paste this function into custom_functions.php, you’ll be able to reference it as a conditional in the function we’re about to target page families with.

function is_tree($pid) {
	global $post;
	$anc = get_post_ancestors( $post->ID );
	foreach($anc as $ancestor) {
		if(is_page() && $ancestor == $pid) {
			return true;
		}
	}
	if(is_page() && (is_page($pid)))
               return true;
	else
               return false;
}

Basically to use is_tree() we just need to use if(is_tree('PARENT PAGE ID')). So, to target a specific page along with its children, you would use this (assuming the parent page ID is 341):

function custom_body_class($classes) {
	if(is_tree('341')) {
		$classes[] = 'your_new_class';
		return $classes;
	}
}
add_filter('thesis_body_classes', 'custom_body_class');

Keep in mind, this code only works for one level of parent and children. If any child page has children, you’ll need to add its ID to is_tree() in order for the filter to apply to it. Unfortunately, is_tree() doesn’t play nicely with arrays so you’ll need to add a separate iteration of is_tree() to the conditional for each page you need to insert the ID for. This is definitely a hack-ish way to do things, but WordPress (inexplicably) doesn’t really offer us a better option at this point.

Don’t Forget To Style!

Now that you’ve added a custom body class specifically to whichever page or group of pages you want to target, let’s add some style using our custom body class. We’ll add a black background to the site background. In order to do so, we use .your_new_class in place of .custom. The new class you’ve set up will overwrite and display in place of any .custom you’ve written for the same element.

body.your_new_class { background: #000000; }

Let’s also change the link color to red:

.your_new_class a { color: #DD0000; }

You can target any element in your html using your new class. All you need to do is replace the normal .custom with .your_new_class as we’ve done here.

That’s all there is to it. Now you can customize to your heart’s content. You’re only limited by your imagination!