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.

Part 4 – Add a Custom Body Class to a Template

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

There’s one other thing that I want to do and that is I want to be able to target this custom Genesis template specifically and perhaps templates like it specifically with a body class to create CSS that’s unique to this template.

Create CSS that’s Unique to the Custom Template

Let’s go back to the site and look at the body class that’s generated for this. You can see here the body class page, page-id, page-parent, page-template, page-template-my-templatescustom-header-template-php. So you could use this class name page-template-my-templatescustom-header-template-php to have special styles for this.

Let’s just do that. Remember that this .site-header .wrap has a 4rem. Let’s come back over to our BYOB Genesis Child Theme Editor and go down here to the bottom before the media query.

Add the Code

We’re going to say “custom header image template” and then we’ll paste that class name. So that’s the body class and then the next part of it was .site-header .wrap and there we’ll say padding:0; and close it.

So we’ve identified the template and every time this custom header template is used you’ll get this class name added to it. We can, in fact, target CSS directly for that template.

Let’s save this custom CSS and then come over and refresh this. Now you can see that the extra space is missing. We still have it where they want it, right here for example. Let’s inspect that element and you can see this div class=”wrap” still has that 4rem there but in this custom template it’s not there. That’s because we’re using the custom body class to do that.

Create CSS to be Used on Multiple Custom Templates

Now, the thing is that, that’s a good way of addressing this template specifically but I think that there may be more templates that I want to do this way. So I’m going to add another body class to this template that I may add to other templates so that I can do the same kind of thing.

Use a Body Class Filter

What we’re going to do is use a filter and the way filters work is that you call the filter and it gives you a certain set of data for whatever that filter happens to be. In this case, it’s going to be the body class filter.

The body class filter contains all the information about the body class and then you can add things to that filter or remove or replace things. You can do whatever you want.

In this case, what we’re going to do is start off just like an action. It starts with a function and this is going to be byob_custom_1140_header_body_class. Then we’re going to use a pre-established filter which is the body class filter. So, add_filter and it takes the same kind of syntax as add action does, so (‘body_class’).

This is a WordPress filter not a Genesis filter. Many other filters we’ll use in the future will be Genesis filters. Let’s copy that. So we’re saying add_filter(‘body_class’) and then this.

A filter passes some kind of information to the function and, in this case, it’s passing an array of the body classes. So we’ll say ($classes), function byob_custom_1140_header_body_class. That filter which is going to pass to this function a value and then we have this chance to change it.

Now we could say $classes = and then let’s say ‘full -width-header-image’ so that’s the body class that we’re going to pass to it. Then what we have to do is return this value back to the filter, so then you have to say return $classes.

Every filter works this way where it passes a value into the function, you modify that value in some way or another and then that modified value is returned.

Let’s go ahead and save this, upload it and I’ll show you what happens. Whoops, we’ve got an error. “Argument 1 passed to genesis_custom_body_class”. The error that it knows is that this value is an array. What I thought was going to happen here was that the array was going to be erased but in fact, you could do that array.

Okay, save that, upload it. Ordinarily in WordPress that doesn’t happen. So now if you look at the body class, the only thing you have is “full-width-header-image”, all of the rest of those things went away because what we did was we replaced the array of body classes with this.

Now, obviously that’s not really what you want to do. All you really want to do is add to this. So the way you add to an array is to leave empty square brackets there and what that means then is next element in the classes array make it full-width-header-image.

Now if we save it, upload it and reload it, this has all of those body classes plus my full-width-header-image body class. I can go ahead then and change this from .page-template-my-templatescustom-header-template-php to that body class that we added.

We added this full-width-header-image body class to it. So what I can do then is replace this with that so full-width-header-image that’s the body class, .site-header .wrap padding:0.

Anytime I add full-width-header-image to the body class I’m going to get 0 padding in that heading. So hit Save Custom CSS and reload it.

If there’s a chance that you are going to want to reuse the styles on various templates then you don’t want to rely on the automatic template body class but you want to use a body class that gives you the ability to reuse the styles which is what we just did here.

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