Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 7 – Add the Custom Body Class to the Front Page

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.

We’ve got our new custom front page template started and now we’re going to add a custom body class to it.

What is a Body Class?

Now, you may ask well, what’s a body class? A body class is essentially a class that has been added to the body of the page. You can see here that we have home page page-id-394 page-template-default logged-in admin-bar full-width-content and customize-support as all class names that have been added to the body.

Add Front Page Body Class

Well, I want to add a class name called front page and I want to do it for a couple of reasons. One is that there’s this confusion in WordPress terminology and WordPress always uses the word home to mean the blog posts page and front page can either mean a static front page or the blog posts page.

Issues with Terminology: Home, Blog Page and Static Front Page

If you’ve got a static front page WordPress never uses the word home to reference that. Home always only applies to the blog post page. And this is a static front page, it’s not a blog posts page so to have the class home here is not particularly useful.

I mean in the grand scheme of things yes, home is okay because it is home but if you’re a regular user of WordPress, you understand the distinction between home and front page and so we have a couple of problems. We have home as a problem and then we have page-template-default as a problem because this is not the default page template but we’re getting the default page template body class added to it.

Create the Function

So what we’re going to do is to add the front page body class to this and then we’re going to remove these extraneous classes. Note that if we come over here to a regular page, it says class of page and then it says, oh no look at that, page-template-no_sidebars-php. That wasn’t even off but it does say page-template. Let’s see this is an archive category-oranges archive.

Anyway, we want our body class to reflect more specifically what’s going on here and in order for us to that we’re going to use the WordPress body class filter.

Using Unique Identifiers

In this case now, we’re going to create a function and it’s going to be called byob_front_page_body_class. I always preference my function names with unique identifiers so that I don’t have problems with other function names that might be named the same thing.

Beginning programmers will often use very generic function names and then they can have big problems on their website when there are clashes. So a function name should be descriptive and it should start off with unique identifiers so that it doesn’t clash with any other function names on the site. So I use byob for obvious reasons. Here’s our function.

WordPress Body Class Filter

A typical WordPress filter and in particular the body class filter is not a switch. It is a block of content that we are going to capture and then manipulate. The one before it was a switch, well we flip the switch on and then essentially we put that value full_width_content in a placeholder.

This is a much more complicated situation where we take a block of content in this case, a variable array called body class, and we are going to manipulate that by adding an additional class to it. A typical filter requires you to capture that content.

Now, in this case the way that works in a function like this is to grab that content as a variable. So when we’re using this WordPress body class filter, that filter knows the passive variable to the function that’s calling it.

What we’re going to do right now is give that variable a name and we’re going to call it classes. Since it’s a variable it starts with a dollar sign ($). We’ve taken the value that the body class is going to pass to us and we’ve given it a variable name inside these parenthesis called classes.

Using Meaningful Variable Names

We are saying classes because that is a descriptive term for us but it’s not inherently necessary. We could use fishsticks you know, as a variable name if we wished and that would work just as well. We don’t use fishsticks because it’s useful to have variable names that are meaningful.

Add the Variable

In this case, we’re bringing in classes and this variable is actually an array and so what we’re going to do is add an additional array element to that array. The way you do that is say classes and then indicate that it’s another element in the array by those square brackets.

We don’t know what element it is, it’s just some other element in the array equals and then we’ll say ‘front-page’. What this does is this takes the array, gives the name classes and then here, to that array name classes it adds another array element called ‘front-page’.

The only thing left for us to do is to return this array and so we need a return statement, return $classes. So this is going to grab the value which is an array, call it $classes, add another element to that array that has a value of front-page. Then return the new updated $classes array and again, we need to use this add_filter statement but now the filter we’re going to use is wp_body_class.

What is it called or is it body_class? Let’s double check, I’m having a little mental break here for a moment. Okay, it’s just body_class, it’s not wp_body_class. So wp, that’s the name of the filter and then the name of the function that’s going to modify the filter is our function name.

Review the Filter Function

So add_filter, the filter name is body_class, the function is filtering it is this and it’s this here. Let’s save that, upload it refresh it and now note that front-page has been added to that body, to the body class.

Now the name front-page has been added and if we go over to a different page, you see it is not added, right? It’s only added on this template so this add_filter site_layout is only happening on this template and this body class change is only happening on this template.

Remove Home and Default Page Template Classes

Now, we are going to do one other thing here and that is we’re going to get rid of both home and we’re going to get rid of the default page template as classes for this.

The body class array is a simple array. It’s not an associate of array, it’s a simple array. This means that it has a very simple index of values and that index is numerical and it starts with 0. So if we come back and look at our body class, right now classes 0 is home, classes 1 is page, classes 2 is page-id-394, classes 4 is page-template-default, right?

So before we do this, we’re going to unset which is something that you do to variables. We’re going to unset ($classes) and the one we’re unsetting is 0, we’re going to unset home. Essentially what we’re doing is taking 0 out of the classes.

Let’s save that, upload it and refresh this. Well maybe I didn’t upload it, what did I upload? There’s a typo. Unset, oh yeah of course classes. Notice that home is no longer there. Now, because home is no longer there, page-template-default is no longer in the fourth position. Page is 0, page-id-394 is 1, page-template-default is 2 because counting always starts at 0 so the next thing we want to do then is unset classes 2.

So now we have page which it is. Oh isn’t that interesting? I must have miscounted, sorry. I thought that looked wrong. Okay so we have page, page-id-394 but the page-template-default is not there anymore, right?

We’ve now removed those classes that I think are not useful from this class list. Because they may be useful elsewhere, right? And so you want classes like that to be unique especially for the front page. You want the front page class name to be absolutely unique and you don’t want to have say a home class name, or page-template-default class name having some effect on the homepage and some other page as well. We now have a body class that fits this.

0 Comments… add one
0 comments… add one

Leave a Comment