Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 13 – Using the Thesis Body Class System

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to - ,

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.

So we’ve talked about styles that are specifically related to text-like things and styles that are related essentially to global classes. And now we’re going to look at using the Thesis Body Class System.

Styling Site Wide vs Specific Pages or Templates

But first let’s take a look at this typical example and use Judas’ question about how would you change the border on it. You could say border-color:blue; and that’s going to change that border color for the blockquote. This happens anytime there’s a blockquote in the post box, this happens anytime there is a ul in the post box or an ol in the post box so it’s essentially a site-wide change.

Well, WordPress and Thesis have a built-in system that would allow you to apply a style only to a specific page or a specific page template, that’s what we’re going to talk about next and that’s called the body class. Thesis gives you a way of adding a custom body class, WordPress gives you a way of adding a certain set of body classes that automatically are added to each individual page.

WordPress Body Classes

First off, what we need to do in order to activate the WordPress body classes is to come to any template, it doesn’t matter what it is, and open up the body options and put a checkmark in here next to “Use automatically-generated WordPress body classes”. If you do that, what will happen is your body tag right here, now ends up with a bunch of classes added to it.

So it’s added that template-page. It is a page so it’s adding that to it, it’s page-id added that, page-template-default added that, logged-in, admin-bar, customize-support. There are a bunch of classes that get added to this. Customize-support is actually a class that’s added to it by Firefox so this class does not really exist in this source but these classes get added to the body based on a certain set of criteria.

Thesis Body Classes

Now, Thesis also has a body class system. The one expression of that you see is this right here where it says template-page. The Thesis body class system automatically shows you the template in this class but you can also do that on a page by page basis.

For example, let’s edit this page and this is our Test HTML page. Every Thesis page in post has this thing right here called Custom Body Class and if I add fishsticks to this body class, hit update and refresh this, you’ll see that fishsticks has been added to this list.

Now what I could do is I could say, rather than making all of my lists look like this, I only want the list in fishsticks to look like that. And the way you would do that is to add the body class ahead of the style definition. The body class is fishsticks so we’re saying that all uls inside of a container of post_box that’s inside the container of fishsticks should have this style.

Let’s change that, refresh this and that has it like that. But if we go look at a different page, our lists have the normal squares because what we did didn’t change it globally, it only changed it for every case where we’ve added fishsticks to the body.

Add Custom Body Class on a Page by Page or Template by Template Basis

I can add fishsticks to the body on a page by page basis but I can also add fishsticks to the body on a template by template basis. So if I come back over here and if I edit my page, you can go to my page template and here I have the opportunity to add a template body class.

If I add fishsticks here then every page that uses this template will get that style. So now, we’re back to our circles here because this uses the page template.

Let’s come over to our Test HTML and it uses circles not only because it uses the page template but also because we added fishsticks to this body class. So this actually has two fishsticks in its body class because we added it to the template and we added it to the specific page. I want to take it out of the template here. Let’s, re-save the template without it in there, now come back over and I don’t think we’ll have it again.

Changing Body

Let’s say I want to change something about the body. The way these rules almost always work when using the body tag is that the selector is the very first one. It’s always a class so it starts with a dot (.) and it’s always the first in the list of selectors.

However, sometimes you want to change the body and if you want to change the body you have to write the rule differently. Fishsticks is actually the class for body so when you want to change the version of body, body is not contained by fishsticks but fishsticks is defining body.

So the way this reads is actually body.fishsticks and say we want to say background-color:efefef. What this is saying is make everybody that has a class of fishsticks, make its background color this light grey. So this page no longer has a class of fishsticks as its body; however, Test HTML still does and so the body got that light grey background all the way across.

0 Comments… add one
0 comments… add one