Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 13 – Using the Genesis 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 far in this Introduction to HTML in WordPress and Genesis 2 seminar we’ve looked at CSS rules that would be applied across the site. We just worked with .entry-title and .content .entry-title a which are going to be applied everywhere that this is on the site. But Genesis and WordPress both have a body class system that allows you to apply a style only to certain pages or to certain classes of pages.

Applying Styles to Certain Pages or Classes of Pages

I’m going to give you an example here. Let’s we’ll come over here and just take a look at the body. Body is the opening body tag and notice it has this long class list, page, page-id-237, page-template-default logged-in, header-full-width, content-sidebar. These are different classes. Page-id-237 and page-template-default, those are classes that are added by our source.

Logged-in and admin-bar, those are classes that are added by WordPress and then header-image, header-full-width, content-sidebar, that class is added by Genesis and customize-support is added by Firefox.

We could choose to create a style that targets just one of these classes so this page class would apply to every page in a site.

Let’s take this page-id-237 for example. If we use that class it would apply only to this page and to no other page. Page-template-default would make it apply to all page templates but not any custom templates or archive templates or anything like that.

So we could do this, let’s take the most specific case here first, page-237. We could come over here and add this body class to it, page-id-237 color:red which means that this heading is still going to stay red in this page but as soon as we got to another page, it won’t be red anymore.

Using the Genesis Custom Body Class

Notice this blue text is still the same blue text because we applied that sitewide by selecting the content area to apply that color to but we’ve just limited the style for this heading on this specific page by using that body class.

Now, using the page-id body class is just fine if you know your page id and you know you only want to use that once and that kind of thing. But let’s say that you have some group of pages that you want but they’re not necessarily all on the same template, they’re potentially on different pages and you don’t have a way specifically of referencing them.

Genesis offers you one other method of doing that. Scroll down here to this custom body class here. We could add the body class fishsticks to this custom body class and this exists on all posts and pages. If we change that, instead of using page-id-237 let’s add fishsticks to this. Save our custom CSS and look at our Headings & Lists page.

Now, every page that has the body class of fishsticks that’s been added to this now, is going to have this style. So if we come back over to our Articles page, it does not have a class of fishsticks and so it does not have that style applied to it.

However, we could come over here and scroll down to that section again. So custom body class, add fishsticks to that, update it and view the page. Look, we didn’t change our rule though and that’s the other thing you need to do. This right here, it needs to say .fishsticks. Actually, we need a space there too and it didn’t work. So why didn’t it work?

Well, it didn’t work because this is actually our Blog page and unfortunately in Genesis, the Blog page does not take the body class. The Blog page does not take that fishsticks body class because the Blog page pretty much ignores all of the content of that page we specify.

Applying a Class to the Blog Page

Actually, this is a problem that’s unique, we wouldn’t have this issue if we were using a child theme that had a home template. In this case, what you would do is you just come down here and grab the class of “blog” if you wanted it to apply to the Blog page. “Blog” is a class that’s applied to this page.

Because the way I set this site up is has a static front page and then this Articles page is its Post page and this is more of a traditional WordPress setup than most Genesis Child Themes use. So let’s come back over here and instead of .fishsticks we just say .blog and save the custom CSS. Then come back over and refresh this.

Does it Matter if Genesis or WordPress is Applying the Body Class?

Andrea has a couple of questions about how this so Andrea I’m going to unmute your microphone here. Good afternoon, Andrea.

Rick: So what do you mean by how can you tell what is applying the body class?

Andrea: When you first shared the classes that were applied, you said that the first ones were applied by WordPress and some were applied by Genesis?

Rick: Yeah.

Andrea: So I was just wondering, it might not even matter.

Rick: It doesn’t matter. I know because I’m a developer and so I know what classes WordPress adds and what classes Genesis adds. But it doesn’t matter because they’re all added and they’re all equal in weight so if you had a blog and a logged in and they were different, then it wouldn’t really matter what order they were in or who added them.

Andrea: Okay. And this example that you are showing right now, the blog logged in would be important if you’re trying to design something from the login page, I see.

Rick: Well, for the login is when a user is logged in.

Andrea: Okay, got you. Oh, I see.

Rick: So if somebody’s logged in to the site then it adds logged-in.

Is the Order of the Selectors Listed Important?

Andrea: Right. Okay, got you. And the other question I had I’m not sure that’s a good question either but I’ve noticed sometimes when I’m trying to figure out what the best selector is to use for something or selector that would actually work, is it sometimes I see things sort of strung together without a space. Like I see something’s got something without a space before the dot and I’m just wondering if that is a valid thing that occurs sometimes and then not other times or because you added the space there.

Rick: The order of these things is significant, right? Because this is saying something with a class of .entry-title or anything inside of something with the class of .entry-title, that is in something else with the class of .fishsticks should be the color red, okay?

If this was reversed, it wouldn’t work for us because we don’t have a container with the class of .fishsticks inside of a container with .entry-title. So this order means that this is a parent and this is a child. This is a parent, this is a child and this is a child of this one, right? So this is the order of parentage.

Now, as soon as they are connected, it’s no longer a parent-child relationship. If we were to say a.entry-title here, this wouldn’t work because the link doesn’t have the class of .entry-title, the link is inside of something that has the class of .entry-title so it has to come after and have a space.

Andrea: Okay.

Rick: Now, if .blog and .content were not separated and they were connected like this, so .blog.content, then what this is saying is every link inside of a container with the class of .entry-title that is inside the container with the class of .blog and .content, right? The fact that they’re connected means they are referring to the same element, disconnecting them means this element is inside of this element.

Andrea: Okay.

Rick: Connecting them means this class and this class are referring to the same element and that element has to have both of them, not just one or the other. It has to have them both so this especially comes up in the body class system.

Say, for example, you want to change the background color of the body itself. If we said .blog body background-color:red this wouldn’t work because the body is not inside of a container with the class of .blog. Blog is actually the class that’s assigned to body and so if you’re styling the body with the body class, it’s got to be body. that class.

Andrea: And no space?

Rick: And no space because otherwise, this would be saying something with the class of .blog inside of the body whereas this is saying every body tag with the class of .blog.

Andrea: Okay.

Rick: The fact that there’s no space means this class is assigned to this element. And look at that for a second here. See, this one’s got the background of red because this has the .blog but this one doesn’t because it does not have the body class of .blog assigned to it. This one’s body class is .fishsticks among other things but there’s no .blog here because it’s not the Blog page.

What is Body in CSS?

Andrea: Okay. And I have a question about the body. The term “body” in CSS, it’s an id so it doesn’t have a pound sign (#) and it’s not a class?

Rick: Well, it’s an element, it’s an HTML element. HTML elements aren’t ids or classes, they’re elements so they’re never preceded by a dot or a pound sign.

Andrea: So they’re like a or p?

Rick: Exactly.

Andrea: Okay. You know I’m so touched and I’m always amazed that I can build any kind of website because there’s so many elemental things that are really I’m not clear about, I’m just a good cut and paster.

Rick: Well, hopefully you’re getting all clear about this then.

Andrea: I am, I’m actually studying some basic CSS and HTML now, it’s helping a lot.

Rick: Great.

Andrea: Thank you Rick.

Rick: You’re welcome. Okay so that is the way the body class system works in Genesis.

0 Comments… add one
0 comments… add one

Leave a Comment