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 7 – Part 7 – Add Custom Body Class

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In order for us to style all these for the posts, we have to do the same thing that we did last week with the front page and that is, we have to add a custom body class to our Posts page. The code is going to look essentially identical to the code that we saw last week.

Create Filter Function

We create our function crtc_custom_class_on_posts_page, that’s a filter so it grabs the classes, grabs the content of that filters and places it in these variable classes. Actually, we don’t need to say $classes=$classes here and we’ll say, if (is_home).

Theiss Body Class Filter

The next element in the classes array is going to be posts_page so this is going to show up on the home page then we’ll say return $classes so it returns the full array plus if it’s not the home page then it’s going to return $classes on modified.

If it is the home page, it’s going to return the classes array with the new element in the array called posts_page. That is the thesis_body_classes filter as we looked at last week. I’m not going to describe it too much more, this is just something that we did last week with the front_page.

We’ll go ahead and save it, upload it so you can see what happens before and after. Let’s inspect the element and look at our body, our body class is just custom plus this text that’s added because of this developer tool which is why I shouldn’t show it this way. So, instead we’ll view the page source. We look at our value tag, it’s just custom but when we refresh this, now when we view the page source it says, custom posts_page so we’ve just added this body class to the page.

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