How To Add Custom Body Class In Genesis

Do you want to know how to add custom body class in genesis.

In this tutorial, I will show you how to do it easily and in less time.

Adding a custom class to the body in Genesis isn’t a big deal, but it is much easier.

This theme framework provides such feature in two ways.

Two Ways to Add Custom Body Class In Genesis.

At this stage, I am testing the code in Genesis 2.9 (the latest version). These methods apply to the rest of the versions also. But to get no compatibility issues, I thought to remind you about the version of the theme I am currently using for the code.

So we have two ways to get the work done.

Method #1: Inbuilt WordPress body class filter.

Method #2: Unique Genesis in-post meta-box method.

Let’s start with the first one.

Add Custom Body Class using Filter

The reason for choosing WordPress as the best CMS is due to its flexibility and functionality.

WordPress provides us a body class filter to add classes to HTML body attribute to keep this short.

Let’s do it.

Here is the filter to add a custom body class in genesis.

add_filter( 'body_class', 'wg_body_class' );
function wg_body_class($classes) {
    $classes[] = 'custom-archive-class';
    return $classes;
}

I use body_class as a filter to add a custom class to whole website pages in the above code snippet. Remember you, to add the class without any issue; you must pass the $classes to the callback function.

What to do if you want to add body class to specific page?

To do so, you need to use if() { #code } a statement. You may be aware of these functions provided by WordPress.

• is_single(): is used for checking whether the current page the user is viewing is a post or not.
• is_page(): This function is used for checking the pages.
• is_archive(): Is used for checking the archive like category, date, etc. pages.
• is_singular(): This is one is a wrap of the above functions. You can pass values to it in array also like is_singular(array(‘post’, ‘page’)).
• is_home(): To check whether the visitor is viewing the home page or not. is_front_page() Is another function.

WordPress also provides many other functions, which I do not include in this tutorial.

Let’s take an example of functions listed above.

add_filter( 'body_class', 'wg_body_class' );
function wg_body_class($classes) {
    if (is_archive()) {
        $classes[] = 'custom-archive-class';
         return $classes;
     }
 }

In the snippet, I am targeting all the archive pages and adding a class named as custom-archive-class. Then I am returning the value by using to output the class.

The intermediate or advanced WordPress users can use method #1. Or we can say that anyone who knows WordPress’s in and outs can use this method.

Let’s head towards another method which is the easiest method.

Add Custom body Class using In-Post Meta box

You might have asked yourself, “If this method is easiest, then why not method #1?“.

Let me answer in a few words. “You can add class to only one specific post.” If you remind, I earlier mentioned a function is_single(); the same applies here. This meta box applies the class to a specific post by using its ID.

That is the reason I mentioned it as Method #2.

You can find this meta-box inside a post while writing or editing it. You can find it below the post in the admin section.

There you will see a meta-box named Layout Settings. Inside it, you will see an input box with a label as Body Class. Just put class inside it, and the whole work is done quickly and safely without playing with code.

Conclusion

I hope you liked this code tutorial on Genesis. Please do subscribe to our newsletter and YouTube channel. Also, don’t forget to share this piece with your friends and to whom you care about.