Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 1 – Understanding Thesis Custom Body Classes

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome to Lesson 5 of the Customize Thesis Like a Pro tutorial series. In this lesson, we’re going to discuss the Thesis Custom Body Class system. This is the heart of what makes the Thesis theme so easy to customize with css. The Thesis Custom Body Class system allows you to customize all pages, a group of pages, or each individual page as you find necessary.

In Part 1 of this lesson, we’re going to learn in general about the Custom Body Class system. In Part 2, we’re going to look at ways of using the automatically generated custom body classes and then in Part 3, we’re going to learn how to create our own custom classes and learn how to apply styles across groups of pages.

Body Class System

Thesis automatically generates a custom body class and applies it to the body tag of every page it generates. You’re indirectly familiar with this because we preface every element that has already been defined by Thesis theme CSS with a .custom. Well, at its simplest level, that’s what it does – it adds a custom class to the body tag. Let’s go over to a blog post and you can see what I’m talking about.

Custom Class for Posts and Pages

Just open up this blog post here. Then we’ll view the source of the post in Firebug and scroll down here to the body tag. This is the HTML tag that follows immediately after the head and the body has been assigned the body class custom. And this is why you can say .custom #header and why that is more specific than simply saying #header. So Thesis generates a .custom for all single posts but for a page, it adds .custom plus the page slug. So again, if we view the source of this page and we come down here to the body class, you can see that it adds the custom class and then it adds a demo-1 which is the name of this page. The name of the page was demo 1 so the page slug is demo 1. And so it gets the custom class and then demo 1 added to it.

Custom Body Class for Category and Tag Archives

Now, if you’re looking at a category page, for example the Apples here, what Thesis does is it adds the custom class and then it adds cat_ plus the category slug. So again, if we take a look at the source, you can see here that we have the custom class and then cat_apples, apples being the category slug for the category Apples. And it does exactly the same thing for tags, if we have tags here, which I don’t, a tagged archive page would still have the same kind of a designation. It would still say tag_apples or the tag slug as the custom class that you’ve assigned it.

Custom Body Class for Custom Post Types

And then custom post types and custom taxonomy archives only get .custom in front of them. Those only get the custom class assigned to them so they behave very much like a post. And those are the custom body classes that are added by Thesis automatically.

Add Your Own

As it turns out, you can also set your own custom class from inside the Edit page in your dashboard. Let’s edit a page and let’s just go to demo 1 again. Pages and then demo 1 and we’re going to edit. If we come down here to this section under SEO details and Additional Style down here at the bottom, there is a css class. We can enter our own class in here. For example, we could say, a class of red-group. Now, this class name shouldn’t start off with a number, it should be all lower case, and it can’t have any spaces in it so it needs to have the hyphen between the words. Make sure that you use the correct type of syntax for this.

If we now save this page, and if we view the page and go back to the View Source, you can see now that it says custom demo-1 and red-group. So we have an additional custom class that we’ve added to the automatic classes that the Thesis theme provides. This behaves pretty much the same way for a post. So instead of a page, let’s go to the Rainier Sweet Cherry post. Come down here to SEO Details and Additional Style and let’s say it is red-group again, and save it. Now when you look at that post and we view its source, it has the custom, which was automatic, plus red-group. So that’s how you can add a custom class.

There’s actually another way that you can add custom body class. You can add them programmatically using php and we are going to take a look at that in a later lesson when we’re talking about filters in php. But for the time being, you have this automatic system and then you have a custom system that you can use for the purpose of customizing specific pages.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment