Tips and Tricks for Theme Developers about WordPress Body Class

Wordpress Body Class featured image

looking for new ways to use CSS in your themes?

WordPress automatically adds CSS classes that you simply can utilize in your themes. Several of those CSS classes are automatically added to the <body> section of each page on a WordPress site.

In this article, we’ll explain the WordPress body class with tips and tricks for aspiring theme designers to utilize them in their projects.

What is WordPress Body Class?

Body class (body_class) may be a WordPress function that permits you to assign CSS classes to the body element.

The HTML body tag normally begins during a theme’s header.php file, which loads on every page. this enables you to dynamically find out which page a user is viewing then add the CSS classes accordingly.

Normally most starter themes and frameworks already include the body class function inside the HTML body tag. However, if your theme doesn’t have it, then you’ll add it by modifying the body tag like this:

1
<body <?php body_class($class); ?>>

Depending on the sort of page being displayed, WordPress automatically adds the acceptable classes.

For example, if you’re on an archive page, WordPress will automatically add archive class to the body element. It does that for almost every page.

Here are some examples of common classes that WordPress might add, depending on which page is being displayed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

As you’ll see, by having such a strong resource at hand, you’ll entirely customize your WordPress page by using just CSS. you’ll customize specific author profile pages, date-based archives, etc.

That being said, now let’s take a glance at how and when would you employ the body class.

How to Add Custom Body Classes

WordPress features a filter that you simply can utilize to feature custom body classes when needed. we’ll show you ways to feature a body class using the filter before showing you the precise use case scenario with great care everyone are often on an equivalent page.

Because body classes are theme specific, you’d got to add the subsequent code to your theme’s functions.php file.

1
2
3
4
5
6
7
8
9
function my_class_names($classes) {
    // add 'class-name' to the $classes array
    $classes[] = 'wpb-class';
    // return the $classes array
    return $classes;
}
 
//Now add test class to the filter
add_filter('body_class','my_class_names');

The above code will add a class “wpb-class” to the body tag on every page on your website. That’s not so bad, right?

Now you can utilize this CSS class in your theme’s stylesheet directly. If you are working on your own website, then you can also add the CSS using the custom CSS feature in the theme customizer.

Adding Body Class Using a WordPress Plugin

If you are not working on a client project and don’t want to write code, then this method would be easier for you.

The first thing you need to do is install and activate the Custom Body Class plugin.

Upon activation, you need to visit Settings » Custom Body Class page. From here you can configure plugin settings.

WordPress Body Class one

You can select post types where you would like to enable body class feature and who can access it. Don’t forget to click on the save changes button to store your settings.

Next, you’ll head over to edit any post or page on your WordPress site. On the post edit screen, you’ll find a replacement meta box up the proper column labeled ‘Post Classes’.

WordPress Body Class two

Click to add your custom CSS classes. You can add multiple classes separated by a space.

Once you are done, you can simply save or publish your post. The plugin will now add your custom CSS classes to the body class for that particular post or page.

How to use The Body Class with Conditional Tags

The real power of the body_class function comes when it’s used with the conditional tags.

These conditional tags are true or false data types that check if a condition is true or false in WordPress. for instance , the conditional tag is_home checks if the page currently displayed is that the homepage or not.

This allows theme developers to see if a condition is true or false before adding a custom CSS class to the body_class function.

Let’s take a glance at some samples of using conditional tags to feature custom classes to the body class.

Let’s say you would like to style your homepage differently for logged in users with the author user role. While WordPress automatically generates a .home and .logged-in class, it doesn’t detect the user role or add it as a category .

Now, this is often a scenario where you’ll use the conditional tags with some custom code to dynamically add a custom class to the body class.

To achieve this you’ll add the subsequent code to your theme’s functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function wpb_loggedin_user_role_class($classes) {
 
// let's check if it is homepage
if ( is_home() ) {
 
// Now let's check if the logged in user has author user role. 
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
    //The user has the "author" role
    // Add user role to the body class
    $classes[] = 'author';
    // Return the classes array
    return $classes;     
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
 
add_filter('body_class', 'wpb_loggedin_user_role_class');

Now, let’s take a look at another useful example. This time we are going to check if the page displayed is a preview of a WordPress draft.

To do that we will use the conditional tag is_preview and then add our custom CSS class.

1
2
3
4
5
6
7
8
function add_preview_class($classes) {
if ( is_preview() )  {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');

Browser Detection and Browser Specific Body Classes

Sometimes you’ll encounter issues where your theme may have additional CSS for a specific browser.

Now the great news is that WordPress automatically detects browser upon loading then temporary stores this information as a worldwide variable.

You just got to check if WordPress detected a selected browser then add it as a custom CSS class.

Simply, copy and paste the subsequent code in your theme’s functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function wpb_browser_body_class($classes) {
    global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
 
if ($is_iphone)    $classes[] ='iphone-safari';
elseif ($is_chrome)    $classes[] ='google-chrome';
elseif ($is_safari)    $classes[] ='safari';
elseif ($is_NS4)    $classes[] ='netscape';
elseif ($is_opera)    $classes[] ='opera';
elseif ($is_macIE)    $classes[] ='mac-ie';
elseif ($is_winIE)    $classes[] ='windows-ie';
elseif ($is_gecko)    $classes[] ='firefox';
elseif ($is_lynx)    $classes[] ='lynx';
elseif ($is_IE)      $classes[] ='internet-explorer';
elseif ($is_edge)    $classes[] ='ms-edge';
else $classes[] = 'unknown';
     
return $classes;
}
add_filter('body_class','wpb_browser_body_class');

You can then use classes like:

	
.ms-edge .navigation {some item goes here}

If it is a small padding or margin issue, then this is often a reasonably easy way of fixing it.

There are definitely more scenarios where using the body_class function can prevent from writing lengthy lines of code. for instance , if you’re employing a theme framework like Genesis, then you’ll use it to feature custom classes in your child theme.

You can use the body_class function to feature CSS classes for full-width page layouts, sidebar content, header and footers, etc.

Leave a Comment

Your email address will not be published. Required fields are marked *