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:

Custom Body Class

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 conditionalis_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!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Leave a Reply

Comments

  • Tomos says:

    Awesome post.

    I knew of the first way of adding a class to the body via the writing panel, but wasn’t aware of the second way.

    This will definitely come in handy for my various Thesis projects over the summer.

  • kristarella says:

    Great post.

    A note for anyone wanting to extend this to create classes on different pages: I would put the return $classes; outside your conditional brackets so that you only have to say it once when using multiple conditions. E.g.,

    function custom_body_class($classes) {
    if(is_single()) {
    $classes[] = ‘single-post’;
    }
    if(is_category(‘Photoblog’))
    $classes[] = ‘photoblog’;

    return $classes;
    }
    add_filter(‘thesis_body_classes’, ‘custom_body_class’);

    As with the second example: if the conditional statement only has one line or one PHP command after it, you don’t need brackets at all. The conditional is applicable up to the next semi-colon in that case.

    • Adam Baird says:

      Very good point…return $classes should definitely be outside the conditional brackets.

      As for using brackets with a single line or command…well I just like the way the code looks that way. Its easier for me to visually see where I am with the code…personal preference I suppose.

      • kristarella says:

        Yes indeed! Nothing wrong with using brackets all the time if you like. It probably reduces the chance of confusion and errors when following a tutorial like this (if people only had the no-bracket code and decided to try to put more than one line without using brackets it wouldn’t work).

        • Tripp says:

          Kristarella and Adam,

          Also, it seems that if you don’t move the return $classes; when adding a body class, it deletes the other Custom Classes on all the other pages!

          I learned this the hard way… ;)

  • Pradeep says:

    Hey nice one.
    I wanted my search page to be styled differently.
    This filter help me to do that.
    Thanks really good work!

  • Adam Baird says:

    Awesome! Glad to help!

  • [...] posts: Creating Date Based Design Elements in Thesis How to Use Thesis Custom Body Classes 301 Redirect Any Thesis [...]

  • The Thesis Body Class Filter Put To Good Use says:

    [...] 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. [...]

  • Paul says:

    Hi,
    I’m looking to separately style the main blog page and a blog category page… BUT your instructions don’t work for my setup, where I’m trying to style (change widths of) teaser boxes on a thesis category posts page differently to the teasers on the main blog on the home page. ( The home page doesn’t have a sidebar and the category page does). A custom function pulls blog posts assigned to a category called ‘journey’ when clicking on the the journey category nav button. I followed all steps above and created a .journey.teaser_box CSS style in addition to the .custom .teaser_box CSS style and added the custom function ‘custom body class’ using if (is category(‘journey’)) etc. By doing this I lose all styling on the home (main blog) page – which wasn’t the result I was expecting after reading your article.
    Perhaps you could point out where I’m going wrong. Thanks Paul

  • Adding The WordPress body_class() Function To The Thesis <body> Tag says:

    [...] posts, pages, or groups of posts and pages on your website.I’ve written about this a couple of times before, but I’ve taken it a step further here.The following function adds a variety of [...]

  • Wesley says:

    Thanks very much for this post. I needed to style the homepage and single page post_box classes differently and this allowed me to separate the two. One note — when I first implemented the solution, I repeated the function for each page type (single, front_page) without giving them a unique name and this threw an error. Providing a unique name cleared it up. Looks like kristarella’s solution is equally effective.

  • Styling classes says:

    Hiya! Awesome blog! I happen to be a daily visitor to your site (somewhat more like addict ) of this website. Just wanted to say I appreciate your blogs and am looking forward for more to come!

  • [...] other browsers, like opera and firefox. For this I turned to body classes. I first came across this article on artofblog showing you how to add custom classes to the body tag. I used this article as a basis. I also [...]

  • [...] Using Thesis Custom Body Classes To Break Down Design Barriers [...]

  • Great post Adam & very helpful! Do you know… Is it possible to filter body classes based on the site layout selected in Thesis design options? So that if 3 columns was selected it would return ‘three_column’ and so on for ‘two_column’ and ‘one_column’? And/or similarly for column order it could return ‘content_sidebar1_sidebar2’ or ‘sidebar1_content_sidebar2’ … and so on.

  • I like ternaries ….

    function inject_class($classes){

    $classes[] .= ‘coolclass’;

    return (is_page(‘home’)) ? $classes : false;
    }

  • Licia says:

    I want someone to be able to edit the page in Visual mode so that they are entering text into 2 separate columns on that page. Do I need to do all this for that? I noticed that I can just add plain html–the boring table, tr, td, etc.–when I edit the page in HTML view. Is there any reason why I shouldn’t do it this way?

  • Steffen says:

    Hi Adman, your tutorial was very helpfull for me! I was look for a solution to realice individual pages with thesis, when I found this. Now I know how to realice individual and flexible designs. Thats fantastik for me. Thank you very much!

  • Danny Cruz says:

    Holy crap! I came here looking at how to do column classes in Thesis (you know, like Genesis does with a simple class wrapping)…

    …And the first thing that hit me was how good your site looks! I’m in the process of planning a redesign for my RallyWays site… And, yes, it’s in a completely different industry… but dang, I love your design! -Danny