Mastering WordPress Body Class: Essential Tips and Tricks for Theme Designers

As an aspiring WordPress theme designer, mastering CSS is essential for achieving greater control, customization, and efficiency in your design process.

Fortunately, WordPress automatically generates CSS classes that you can leverage in your themes. Many of these classes are added to the section of each page on a WordPress site.

In this article, we will explain the concept of WordPress body classes. Additionally, we will provide valuable tips and tricks from our extensive theme development experience to help you improve your projects.

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

Understanding WordPress Body Class

The body class (body_class) function in WordPress enables you to assign CSS classes to the body element.

The HTML body tag typically starts in a theme’s header.php file, which is loaded on every page. This setup enables you to dynamically determine the current page a user is viewing and add the corresponding CSS classes.

Most starter themes and frameworks usually include the body class function within the HTML body tag. If your theme lacks this feature, you can easily add it by modifying the body tag like this:

>

WordPress automatically adds the appropriate classes based on the type of page being displayed.

For instance, if you are viewing an archive page, WordPress will automatically assign the ‘archive’ class to the body element. This applies to nearly every page type.

Related: Discover how WordPress operates behind the scenes (infographic).

Here are some examples of common classes that WordPress may add, depending on the page being displayed:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single-post-id-(id) {}
.attachment-id-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child-parent-page-id-(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) {}

With this powerful resource, you can fully customize your WordPress site using only CSS. This allows you to tailor specific author profile pages, date-based archives, and more.

Now, let’s explore when and how to effectively use the body class in WordPress.

When to Utilize the WordPress Body Class

Ensure that your theme’s body element includes the body class function as demonstrated above. If it does, it will automatically incorporate all the WordPress-generated CSS classes listed above.

You can easily add your own custom CSS classes to the body element whenever necessary.

For instance, if you want to modify the styling of articles written by a specific author within a certain category.

How to Add Custom Body Classes in WordPress

WordPress provides a filter that allows you to add custom body classes as needed. We will guide you through the process of adding a body class using this filter, followed by a specific use case to ensure clarity for everyone.

Since body classes are specific to each theme, you will need to insert the following code into your theme’s functions.php file or use a code snippets plugin.

function my_class_names($classes) { // Add 'wpb-class' to the $classes array $classes[] = 'wpb-class'; // Return the updated $classes array return $classes;
} // Now apply the custom class to the filter
add_filter('body_class','my_class_names');

The code above will add the class ‘wpb-class’ to the body tag on every page of your website.

We suggest using WPCode, the leading code snippets plugin available, to safely and easily incorporate custom code into WordPress without modifying your theme’s functions.php file.

Begin by installing and activating the free WPCode plugin. For detailed instructions, refer to our guide on installing a WordPress plugin.

Once the plugin is activated, navigate toCode Snippets»+Add Snippetfrom your WordPress dashboard.

Next, locate the ‘Add Your Custom Code (New Snippet)’ section and click the ‘+ Add Custom Snippet’ button below it.

Then, select a code type from the options displayed on your screen.

For this tutorial, choose ‘PHP Snippet.’

After that, provide a title for your snippet that helps you recall its purpose.

Then, paste the code from above into the ‘Code Preview’ box.

Finally, toggle the switch from ‘Inactive’ to ‘Active’ and click the ‘Save Snippet’ button.

You can now use this CSS class directly in your theme’s stylesheet.

If you’re managing your own website, you can also add the CSS through the custom CSS feature in the WordPress theme customizer.

For more information, check out our comprehensive guide on adding custom CSS to your WordPress site effortlessly.

How to Add Body Class with a WordPress Plugin

If you’re not working on a client project and prefer not to code, this method will be more convenient for you.

First, install and activate the Custom Body Class plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.

After activation, navigate to Settings » Custom Body Class page. Here, you can adjust the plugin settings.

You can choose the post types where you want to enable the body class feature and specify who can access it. Remember to click the ‘Save Changes’ button to apply your settings.

Next, go to edit any post or page on your WordPress site. On the post edit screen, you will see a new meta box on the right labeled ‘Post Classes’.

Click to add your custom CSS classes. You can enter multiple classes separated by spaces.

Once you’re finished, simply save or publish your post. The plugin will automatically add your custom CSS classes to the body class for that specific post or page.

Utilizing Conditional Tags with the Body Class

The true strength of the body_class function is revealed when combined with conditional tags.

Conditional tags are boolean values that determine whether a specific condition is met in WordPress. For instance, the conditional tag is_home verifies if the currently displayed page is the homepage.

This functionality enables theme developers to evaluate conditions before applying a custom CSS class to the body_class function.

Let’s explore some examples of using conditional tags to incorporate custom classes into the body class.

Imagine you want to style your homepage differently for logged-in users with the author role. While WordPress automatically assigns a .home and .logged-in class, it doesn’t account for user roles or add them as classes.

This is where you can leverage conditional tags along with custom code to dynamically include a specific class in the body class.

To implement this, you will need to insert the following code into your theme’s functions.php file or a code snippets plugin.

function wpb_loggedin_user_role_class($classes) { // Check if the current page is the homepage
if ( is_home() ) { // Verify if the logged-in user has the author role. $user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) { // The user has the "author" role // Add the user role to the body class $classes[] = 'author'; // Return the updated classes array return $classes; } } else { // If it is not the homepage, return the default classes
return $classes; }
} add_filter('body_class', 'wpb_loggedin_user_role_class');

Next, let’s explore another practical example. This time, we will check if the page being displayed is a preview of a WordPress draft.

To achieve this, we will utilize the conditional tag is_preview and add our custom CSS class.

function add_preview_class($classes) { if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes; }
add_filter('body_class','add_preview_class');

Now, we will include the following CSS in our theme’s stylesheet to make use of the new custom CSS class we just added.

.preview-mode .site-header:before { content:'Preview Mode';
color:#FFF;
background-color:#ff0000;
}

Here’s how it appeared on our demo site:

Consider exploring the complete list of conditional tags available in WordPress. This resource will provide you with a useful collection of tags ready for implementation in your code.

Additional Examples of Dynamically Adding Custom Body Classes

In addition to conditional tags, you can utilize various methods to retrieve information from the WordPress database and generate custom CSS classes for the body class.

Incorporating Category Names into the Body Class of a Single Post Page

If you want to tailor the look of individual posts based on their assigned categories, using the body class is an effective approach.

To begin, you need to include category names as CSS classes on single post pages. You can achieve this by adding the following code to your theme’s functions.php file or using a code snippets plugin like WPCode:

// Add category nicenames to the 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('body_class', 'category_id_class');

The above code will add the category class to your body class on single post pages, allowing you to style it with CSS as desired.

Incorporating the page slug into the body class

Insert the following code into your theme’s functions.php file or use a code snippets plugin:

// Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

We recommend using a code snippets plugin like WPCode to add this code in WordPress, ensuring your site remains safe from potential issues.

Begin by installing and activating the free WPCode plugin. If you need assistance, check out this guide on how to install a WordPress plugin.

After activating the plugin, navigate toCode Snippets»Add Snippet in the WordPress dashboard.

Next, click the ‘Use snippet’ button located beneath the ‘Add Your Custom Code (New Snippet)’ section.

Then, choose ‘PHP Snippet’ as the type of code.

After that, provide a title for your code snippet and paste the code from above into the ‘Code Preview’ area.

Finally, switch the status from ‘Inactive’ to ‘Active’ and click the ‘Save Snippet’ button.

Browser Detection and Browser-Specific Body Classes

Occasionally, you may encounter situations where your theme requires additional CSS for a specific browser.

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

You simply need to verify if WordPress has identified 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 or your code snippets plugin:

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-internet-explorer';
elseif ($is_winIE) $classes[] ='windows-internet-explorer';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='microsoft-edge';
else $classes[] = 'unknown'; return $classes;
}
add_filter('body_class','wpb_browser_body_class');

You can then apply classes such as:

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

If you’re dealing with a minor padding or margin issue, this is a simple solution to resolve it.

The body_class function can significantly simplify your coding process in various scenarios. For instance, when using a theme framework like Genesis, it allows you to easily incorporate custom classes into your child theme.

Utilize the body_class function to seamlessly add CSS classes for various layout elements, including full-width pages, sidebar content, headers, and footers.

Comprehensive Guides for WordPress Theme Design

Looking for more tutorials? Explore our additional resources on WordPress theme design:

• A Step-by-Step Guide to Adding a Parallax Effect to Any WordPress Theme
• Four Effective Methods to Edit the Footer in WordPress
• How to Add Beautiful Falling Snowflakes to Your WordPress Blog
• A Complete Guide to Updating Your WordPress Theme Without Losing Customizations
• Tips for Gathering Website Design Feedback in WordPress

We hope this article has helped you understand how to effectively use the WordPress body class in your themes. You might also find our guide on styling individual WordPress posts and our comparison of the best WordPress page builder plugins useful.

If you enjoyed this article, please consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.