WordPress Body Class 101: Tips and Tricks for Theme Designers

Are you an aspiring WordPress theme designer looking for new ways to use CSS in your themes?

Fortunately, WordPress automatically adds CSS classes that you can use in your themes. Several of these CSS classes are automatically added to the Section of every page on a WordPress site.

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

Here is a brief overview of what you will learn in this article.

What is WordPress Body Class?

Body class (body_class) is a WordPress function that allows you to assign CSS classes to the body element.

The HTML body tag usually starts in the header.php file of a topic, which is loaded on every page. That way you can dynamically find out which page a user is viewing and then add the CSS classes accordingly.

Usually most starter topics and frameworks already contain the body class function in the HTML body tag. However, if your theme doesn't have it, you can add it by changing the body tag like this:

<Body >

Depending on the type of page being viewed, WordPress will automatically add the appropriate classes.

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

Connected: See How WordPress Works Behind the Scenes (Infographic)

Here are some examples of common classes WordPress can add depending on the page you're viewing:

.rtl {}
.At home {}
.blog {}
.Archive {}
.Date {}
.Search {}
.paged {}
.Attachment {}
.Error 404 {}
.single postid- (id) {}
.attachmentid- (id) {}
.attachment (MIME type) {}
.author {}
.author- (user_nicename) {}
.Category {}
.category- (slug) {}
.Label {}
.tag- (snail) {}
.page-parent {}
.page-child parent-pageid- (id) {}
.page-template page-template- (name of template file) {}
.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 can see, with such a powerful resource, you can completely customize your WordPress site using just CSS. You can customize specific author profile pages, date-based archives, and so on.

Now let's take a look at how and when you would use the body class.

When is the WordPress Body Class used?

First of all, you need to make sure that the body element of your topic contains the body class function shown above. If so, all of the above WordPress generated CSS classes are automatically included.

After that, you can also add your own custom CSS classes to the body element. You can add these classes at any time.

For example, if you want to change the appearance of articles by a certain author that are filed under a certain category.

How to add custom body classes

WordPress has a filter that allows you to add custom body classes if needed. We'll show you how to add a body class using the filter before we show you the specific use case scenario so everyone can be on the same page.

Since body classes are topic-specific, you'll need to add the following code to your topic's functions.php file.

Function my_class_names ($ classes) {
// add & # 39; class-name & # 39; to the $ classes array
$ classes () = & # 39; wpb-class & # 39 ;;
// Return the $ classes array
return $ classes;
}}

// Now add a test class to the filter
add_filter (& # 39; body_class & # 39 ;, & # 39; my_class_names & # 39;);

The code above adds a "wpb-class" class to the body tag on every page of your website. It's not that bad, is it?

Now you can use this CSS class right in your theme's stylesheet. If you're working on your own website, you can also add the CSS using the custom CSS feature in the Design Customizer.

Adding custom CSS in the Theme Customizer

Adding a body class with a WordPress plugin

If you're not working on a client project and you don't want to write code, this method will be easier for you.

The first thing to do is to install and activate the Custom Body Class plugin. For more information, see our step-by-step guide to installing a WordPress plugin.

After activation you need to visit Settings »Custom Body Class Page. From here you can configure the plugin settings.

Custom settings for the body class

You can choose post types for which you want to enable the body class feature and who can access it. Don't forget to click the "Save Changes" button to save your settings.

Next, you can edit a post or page on your WordPress site. On the post edit screen, in the right column, you will find a new meta field labeled "Post Classes".

Adding body classes to a post in WordPress

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

Once you're 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.

Using conditional tags with the Body class

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

These conditional tags are true or false data types that check whether a condition is true or false in WordPress. For example, the is_home conditional tag checks whether the currently displayed page is the start page or not.

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

Let's look at some examples of using conditional tags to add custom classes to the Body class.

Suppose you want to design your homepage differently for logged-in users with the user role of Author. While WordPress will automatically generate a .home and a .logged-in class, it doesn't recognize the user role and doesn't add it as a class.

This is one scenario where you can use the conditional tags with custom code to dynamically add a custom class to the Body class.

To do this, add the following code to your theme's functions.php file.

Function wpb_loggedin_user_role_class ($ classes) {

// Let's check if it's a homepage
if (is_home ()) {

// Now let's check if the logged in user has an author user role.
$ user = wp_get_current_user ();
if (in_array (& # 39; author & # 39 ;, (array) $ user-> role)) {
// The user has the role of "Author"
// Add user role to body class
$ classes () = & # 39; author & # 39 ;;
// Return the class array
return $ classes;
}}
} else {
// If it's not a homepage, just return standard classes
return $ classes;
}}
}}

add_filter (& # 39; body_class & # 39 ;, & # 39; wpb_loggedin_user_role_class & # 39;);

Now let's look at another useful example. This time we are going to check that the page shown is a preview of a WordPress draft.

To do this, we'll use the is_preview conditional tag and then add our custom CSS class.

Function add_preview_class ($ classes) {
if (is_preview ()) {
$ classes () = & # 39; Preview mode & # 39 ;;
return $ classes;
}}
return $ classes;
}}
add_filter (& # 39; body_class & # 39 ;, & # 39; add_preview_class & # 39;);

Now let's add the following CSS to our theme's stylesheet to use the new custom CSS class we just added.

.preview-mode .site-header: before {
Content: & # 39; Preview mode & # 39 ;;
Color: #FFF;
Background color: # ff0000;
}}

Here's what it looked like on our demo site:

Added custom CSS class to body class in preview mode

You may want to check out the full list of conditional tags you can use in WordPress. This gives you a handy set of ready-to-use tags for your code.

More examples of adding custom body classes dynamically

In addition to conditional tags, you can use other techniques to pull information from the WordPress database and create custom CSS classes for the body class.

Adding category names to the body class of a single post page

For example, let's say you want to customize the look and feel of individual posts based on the category they are in. You can use the Body class to do this

First, you need to add category names as a CSS class on individual post pages. To do this, add the following code to your theme's functions.php file:

// add category names in body class
Function category_id_class ($ classes) {
global $ post;
foreach ((get_the_category ($ post-> ID)) as $ category)
$ classes () = $ category-> category_nicename;
return $ classes;
}}

add_filter (& # 39; body_class & # 39 ;, & # 39; category_id_class & # 39;);

The above code will add the category class in your body class for individual post pages. You can then use CSS classes to style it your way.

Add a side slug to the body class

Paste the following code into your theme's functions.php file:

// Page Slug Body Class
Function add_slug_body_class ($ classes) {
global $ post;
if (isset ($ post)) {
$ classes () = $ post-> post_type. & # 39; – & # 39 ;. $ post-> post_name;
}}
return $ classes;
}}
add_filter (& # 39; body_class & # 39 ;, & # 39; add_slug_body_class & # 39;);

Browser recognition and browser-specific body classes

Sometimes you run into issues where your theme may need additional CSS for a particular browser.

The good news now is that WordPress automatically detects the browser when it loads and then temporarily stores this information as a global variable.

All you have to do is check that WordPress has detected a particular browser and then add it as a custom CSS class.

Just copy and paste the following code into your theme's functions.php file:

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 () = & # 39; iphone-safari & # 39 ;;
elseif ($ is_chrome) $ classes () = & # 39; google-chrome & # 39 ;;
elseif ($ is_safari) $ classes () = & # 39; safari & # 39 ;;
elseif ($ is_NS4) $ classes () = & # 39; netscape & # 39 ;;
elseif ($ is_opera) $ classes () = & # 39; opera & # 39 ;;
elseif ($ is_macIE) $ classes () = & # 39; mac-ie & # 39 ;;
elseif ($ is_winIE) $ classes () = & # 39; windows-ie & # 39 ;;
elseif ($ is_gecko) $ classes () = & # 39; Firefox & # 39 ;;
elseif ($ is_lynx) $ classes () = & # 39; lynx & # 39 ;;
elseif ($ is_IE) $ classes () = & # 39; Internet Explorer & # 39 ;;
elseif ($ is_edge) $ classes () = & # 39; ms-edge & # 39 ;;
otherwise $ classes () = & # 39; unknown & # 39 ;;

return $ classes;
}}
add_filter (& # 39; body_class & # 39 ;, & # 39; wpb_browser_body_class & # 39;);

You can then use classes like:

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

If it's a minor cushioning or edge problem, this is a pretty easy way to fix it.

There are definitely many other scenarios in which you don't have to write long lines of code with the body_class function. For example, if you're using a theme framework like Genesis, it will allow you to add custom classes to your child theme.

The body_class function lets you add CSS classes for full-width page layouts, sidebar content, headers and footers, and so on.

We hope this article has helped you learn how to use the WordPress body class in your topics. You might also want to check out our article on how each WordPress post is designed differently and our comparison of the best plugins for WordPress site builder.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.