An Introduction to the WordPress Body Class
WordPress, by default, adds a lot of different CSS classes you can utilize to customize your website. Some of them can be found within the <body> element. These are created thanks to the body_class() function and are often used for styling purposes.
Whether you are a young and aspiring developer who wants to expand your existing WordPress knowledge or a WordPress website owner that wants to learn additional styling tricks, learning more about this function can be quite worth it. For this reason, we have decided to create this article on the WordPress body_class and its uses.
Without further ado, let us begin. Here’s what we’ll be talking about:
Qode Themes: Top Picks
View Collection
The WordPress body_class() function is responsible for displaying all the class names for the <body> element on each WordPress page or post. This is why the call to this function is commonly inserted inside the header.php file of any theme, since that file loads on any page or post. More precisely, the call to the body_class() function is commonly inserted directly after the opening <body> tag.
As an example, we have included a screenshot of the header.php file belonging to the Lekker theme we used for the article. In the screenshot, the opening <body> tag and the call to the body_class() function have been highlighted.
That said, the body_class() function is part of the WordPress core files, and is located in the wp-includes/post-template.php file. A closer look at the function reveals that it simply echoes the class attribute, alongside all the class names created using the get_body_class() function, which is also part of the previously mentioned file.
As for the get_body_class() function, it creates an array of body class names dynamically, based on the page or post you are on. For example, it can create classes like home, blog, privacy-policy or search for your homepage, blog page, privacy policy, and search page, respectively. Following that, if a page has a certain page template enabled, classes like page-template or page-template-<file-name> are also added. On the other hand, posts can have classes like single, single-<slug> or postid-<id>, archives can have classes like archive, post-type-archive, author-<nicename>, category-<slug>, tag-<id>, tax-<slug>, and so on.
For those wondering what is the purpose of the <> notation, it is simply to showcase that in some cases even a part of the class name can be created dynamically. For example, a post with the ID of 321 will have the class of postid-321, a portfolio custom type item could have a class of single-portfolio-item, if portfolio-item is the slug of that custom post type, while an author could have a class of author-john-doe, if his nice name is John Doe.
That said, there are additional helpful classes like logged-in, admin-bar, rtl, or wp-custom-logo, corresponding to the specific conditions met on a particular page or post. Furthermore, a page or post can also contain some custom classes, which will be the main topic of this article.
But, before we delve into the how-tos of this article, we still have to explain the way of establishing which of the body class names is present on a current page or post and how these classes or any custom ones can be used.
Firstly, to figure out all the body class names of any page or post, you need to inspect it using the browser inspector tool. To do so, open a page or post you wish to inspect and right-click anywhere within it. Then, click the “Inspect” option from the menu that opens.
This will open the developer tools of your current browser and place you within the Elements tab, on the HTML element that you right-clicked, which will also be highlighted on the page.
While creating suitable CSS code, you need to inspect the HTML structure of a certain element or part of the page thoroughly. In this case, you only need to locate the opening <body> tag. To do so, scroll to the top of the HTML structure using the side scroller. Having found the opening <body> tag, you will see all the class names of the current page or post after the class=” part.
Another closer look at the previous screenshot reveals some of the default WordPress classes we discussed (highlighted below) mixed with additional classes added by the Lekker theme, its bundled plugins, or additional third party plugins like Elementor.
Having shown that, the only thing that remains is to explain how these body class names can be used and why in some cases adding new class names can be more beneficial.
New Body Class Names and New Body Classes
Generally speaking, you can use one or multiple body class names to apply specific CSS styling rules intended for all the pages that share that specific class/those specific classes. When it comes to choosing a suitable CSS selector for a CSS code, there are two approaches you can take. Firstly, you can use the body classes only, if you want to apply a set of CSS rules directly to the <body> element that has those classes.
Meaning, you would use selectors like .body-class-name (e.g. .home, .page, .postid-27, etc.) or selectors which use multiple class names that are joined into a singular CSS class selector (e.g. .page.page-template-default.logged-in). Doing so, you would apply CSS rules to the <body> element of pages that have the specific body class name or have all of the body class names that were used, respectively.
And, while there is some merit to applying the CSS rules to the <body> element, as some CSS properties can be inherited to inner HTML elements, it is more common to write CSS code targeting the specific HTML elements on the pages denoted by the body class names. To do so, you would need to create an additional CSS selector and append it to the body class name selectors we mentioned previously. Meaning, more frequently, your CSS code would have the structure of the following example.
<body-class-selector> <additional-css-selector> {
// CSS rules go here
}
Of course, to create this additional CSS selector, as well as any CSS rules that are used, you will need at least a basic understanding of CSS code. But, even if you overcome this hurdle, in some cases the default classes provided by the body_class() function aren’t sufficient to properly style the pages you need to. This is the reason why some plugins and themes include custom body class names that are given based on the functionalities they correlate.
That way, you will have more ways to style the pages and posts according to your needs. Furthermore, you can even extend your styling reach by adding custom body classes to specific pages and posts or types of pages and posts. We will cover more on this topic in the following part of the article.
While your theme or some of your plugins might also include their specific class names printed using the body_class() function, in this article, we will cover the two ways of how you can do so on your own – either using a suitable WordPress plugin or through custom code snippets.
While there are not many newer plugins for this purpose, we were able to find an older WordPress plugin called Custom Body Class which we properly tested and found it working perfectly with the latest WordPress version. The plugin has been created specifically for this niche purpose and offers a very limited set of functionalities which we will cover below. Let us begin.
After installing and activating the plugin, navigate to the Settings > Custom Body Class section. The plugin offers two ways of adding a custom body class in WordPress. The first is to add a global class to all your pages and posts, while the second is to enable a custom class meta box on all post types, including custom post types so you can insert a specific class on a specific page or post. Apart from that, the plugin offers a way to restrict its usage to administrators only, has an autocomplete option, as well as an alternative way of disabling its functionality.
However, in this article, we won’t focus on these additional functionalities the plugin provides but only talk about two ways of using it. Firstly, to add a global class to thetag of all your pages and posts, enter the name of your global class in the input field next to the “Global Class” label and click the “Save Changes” button.
The custom class that you insert will, then, be a part of the class property of the <body> tag, which you can see by inspecting any of your website’s pages or posts using developer tools of your current browser. Those who aren’t sure how to inspect a page or post are advised to review the previous section of this article, in which we made a general overview of the WordPress body classes, i.e. class names, and how they can be inspected.
Having said that, as an example, we added a class called my-global-css-class, which can be seen in the screenshot below. However, as your theme or some other plugins may also include their custom classes, finding the added CSS class can be a bit difficult. Thus, we advise clicking on a HTML tag within the Elements tab and pressing the Ctrl and F keys (Cmd and F, for macOS users) simultaneously to activate and use the search feature. Then, you can search for the added class specifically, which will be highlighted as on our screenshot below, if it was added successfully.
After ensuring the CSS class was successfully added, you can create the suitable CSS styling rules you wish to apply to that class, thus applying them to all pages and posts on your website. A possible example is given below. Needless to say, for it to work properly, you would need to replace the “my-global-css-class” placeholder with the actual name of the class that you added previously, as well as replace the comment line with relevant CSS rules.
.my-global-css-class {
// CSS rules go here
}
Having said that, let us continue to the second use case of the Custom Body Class plugin – enabling the Classes meta box. To do so, navigate to the Settings > Custom Body Class section and locate the Post Types part of the options. There, you will be able to see all the post types registered on your website and tick the checkbox next to the one(s) for which you wish to enable the Classes meta box. After enabling it using the plugin options, you will need to locate the meta box on a specific page or post and use it, which we will cover below. Tick the checkboxes next to post types for which you wish to enable this meta box and click the “Save Changes” button.
As for the use of this meta box, it is the same regardless of the post type you choose. Nevertheless, we will show how it can be both for a page and a portfolio item, which is a custom post type enabled by the Lekker theme we are using in our example. The reason why we referred to the meta box as the Classes meta box is due to it having the word classes as part of the title.
However, to form the full meta box title, this word is preceded by the name of the custom post type. Meaning, for pages, it will be named Page classes, for portfolio items, it will be Portfolio Item classes, for product – Product classes, and so on. Having said that, let us proceed.
To add a custom CSS class to a specific page, click to edit that page and locate the Page classes meta box section on the right.
You will find a singular field with a placeholder stating “Click here to add classes”. By clicking on it, you will be able to add a CSS class which will be preceded with a dot(.), i.e. showing in the form of a suitable CSS selector. To save what you have done, click the “Update” button afterward. Of course, you can add multiple CSS classes to that particular page by repeating the above-mentioned process or remove some classes that you previously inserted by using the “X” link next to them. For this article, we have added a class named page-specific-class, as seen below.
This class can, then, be observed as the part of the classes assigned to the <body> tag on that particular page, when inspected using the browser inspector tool.
Afterward, to apply a particular styling on that specific page only, you can simply add CSS rules which target the above-mentioned CSS class. Here is an example for our case:
.page-specific-class {
// CSS rules go here
}
Of course, to make use of this code, you will need to replace the page-specific-class part with the CSS class you added and replace the comment line with corresponding CSS rules.
Additionally, we must mention what to do if you are unable to find the Page classes meta box initially. If you are using the Gutenberg editor screen, then it is possible that the Page classes panel simply isn’t enabled. To enable it, click on the three dots menu in the top-right corner of the screen and click on the “Preferences” option from the menu that appears.
This will open the Preferences popup window and position you in the General tab. Open the Panels tab and make sure that the Page classes panel is on. Then, you can close the Preferences popup window and proceed to add the page-specific class as mentioned above.
This concludes our part on adding page-specific CSS classes and its uses. As mentioned, we will also showcase how you can add a CSS class to the body tag of a specific portfolio item post. While the portfolio item is a specific custom post type provided by the Lekker theme we are using, the same steps we will cover below can be performed for any other custom post type. Furthermore, we have purposefully used the Classic Editor screen this time to show an equivalent set of steps to the one we described above. That said, let us proceed.
To find the Classes meta box on your custom post type item, click to edit it and locate the CPT name classes meta box, where the “CPT name” part is replaced with the corresponding custom post type name. In our case, that is the Portfolio Item classes metabox, as previously mentioned.
Having found it, click the meta box and add a specific class to that post item. Afterward, click the ”Update” button to save the changes you made.
For this example, we have used the “portfolio-item-specific-class” as the class name. Of course, once added in this manner, that class will be one of many <body> tag CSS classes on that particular post item, as seen when inspecting the item using developer tools.
Then, to make use of it, you will need to write some CSS code similar to our example below, with both the CSS class and comment line replaced as appropriate.
.portfolio-item-specific-class {
// CSS rules go here
}
Finally, as we did with our previous example, we mustn’t fail to mention what you should do if unable to see the CPT name classes meta box initially. If you are using the Classic Editor as we have in this example, you can simply enable the meta box in the Screen Options.
To do so, locate the Screen Options in the top-right corner of your screen and click to open the section. Then, locate the CPT name classes option within the Screen elements subsection and tick it on. Afterward, click on the Screen Options once more to hide them and proceed to add a CSS class in the manner we discussed above.
With it, we conclude our overview of the Custom Body Class plugin.
Apart from using a WordPress plugin, adding a new CSS class to the <body> tag of pages and posts can be done with a bit of custom code. While this is not the preferred choice of many WordPress users, the DIY approach can be quite effective when it comes to adding new functionalities and changing existing ones. And, in this particular case, it only requires a moderate amount of coding knowledge.
Nevertheless, we will try to explain the code examples we prepared for this article so that they are understandable to all WordPress users. But, in this part of the article, we will only focus on the code which enables you to add additional CSS body class names. For more tips on creating the CSS code that uses the added CSS class names, we advise reading the first part of this article, as well as our general overview of CSS code.
Additionally, as a precautionary measure, we advise making a backup of your website before inserting any of the code snippets included below. Furthermore, as inserting those snippets requires at least a basic understanding of FTP, we advise brushing up your knowledge on that subject as well. Having done that, proceed as described below.
In this article, we will cover how you can add custom body class names by creating suitable functions and hooking them onto the body_class filter hook that is responsible for filtering which body class names get to be displayed for any given page or post. Of course, to understand this process, you need to have at least a basic understanding of what WordPress hooks are and how they are used. For that reason, we will do a quick overview on the topic of WordPress hooks before delving into the code snippets we prepared for the article.
WordPress hooks are pieces of placeholder code left by developers so that other advanced WordPress users can use them for adding new functionalities or changing existing ones. That is why WordPress hooks are divided into two categories – action hooks, used for adding new functionalities, and filter hooks, which are used to change existing ones.
Using WordPress hooks requires you to write custom functions, called callback functions or callbacks, with the code that enables a given functionality. But, for it to work, the callback function needs to be “hooked onto” a suitable WordPress hook. This is done using the add_action() function for action hooks and add_filter() function for filter hooks. Both functions accept the same four arguments: the name of the hook, the name of the callback function, its priority, and the maximal number of arguments that the callback function can accept, in that order. Of these four arguments, in most cases, only the first two are used, assuming default values for the remaining two.
And while the most difficult part of properly using WordPress hooks is finding the suitable action or filter hook, in this particular case, it is not an issue. For this article, we will be using the filter hook that is also present in the wp-includes/post-template.php file, called the same way as the function that is our main topic – body_class. To make use of this filter hook, you will need to write custom snippets similar to the following pseudo example:
function name-of-the-function( some-variables-go-here ) {
// Some code goes here
return $one-of-the-variables;
}
add_filter( 'body_class', 'name-of-the-function' );
This kind of example will make much more sense after reviewing the actual examples we prepared for the article. Therefore, we advise reviewing this piece of code one more time after going through the examples we left below.
That said, there is still something we must add. While using WordPress hooks can be seen as a difficult practice, it has merits over directly editing template files, which was done in the past. Since all customization code should be inserted either in the functions.php file of your child theme or a site-specific plugin, you won’t have to worry about losing it after updating a theme, plugin, or WordPress core files. Furthermore, by storing it in such a way and through proper function-naming practices, you will have an easy way of tracking all the coding customization you have added to a WordPress website.
Having said that, let us proceed to the code snippets.
Global Body Class Name
Adding a global body class name is an obvious way to start our coding snippets. It is also a part of the plugin we covered above, as it enables you to write CSS code which can be applied to every page and post. The relevant code snippet is included below.
function qode_add_global_body_class( $classes ) {
$classes[] = 'qode-global-css-class';
return $classes;
}
add_filter( 'body_class', 'qode_add_global_body_class' );
Its code is quite simple – it represents a custom callback function called qode_add_global_body_class() which is hooked onto the body_class filter. In the callback function, we have added our custom class called qode-global-css-class to the $classes variable, which is then returned. This variable represents an array of all the body class names for the current page or post.
But, since our callback function doesn’t include any conditional statements which can restrict the scope of the added CSS class, the added class will be a part of the <body> tag for all pages and posts. Therefore, the code above represents the simplest way of adding a global body class name. As mentioned above, the added class name can be seen when inspecting any page or post using the developer tools of your current browser. Then, the said class name can be used as a CSS selector or a part of a CSS selector for the code that is meant to be applied globally.
This concludes our example on the global body class. In the following three examples, we will showcase the use of conditional statements to restrict the scope of the added class name, which is the more common approach when using the body_class filter hook.
Conditional Body Class Names
Whereas a global CSS class has some uses in applying certain CSS rules to all pages and posts, it is far more likely that you will need to differentiate certain CSS rules and apply them only to certain posts or pages, or a group of them. For example, you might need to apply some stylization only on your homepage, or to all your portfolio category pages, blog posts, products, and so on. Therefore, you will need to modify the above-mentioned code so that it includes a certain condition in which the desired class is added. To do that, you will need to include a conditional statement with a conditional tag within the code of your callback function.
Thus, a possible example of the code snippet you would have to create would look as follows:
function name_of_the_function( $classes ) {
if ( condition-goes-here ) {
/*
Some code that assigns a new class
to the $classes[] variable.
*/
}
return $classes;
}
add_filter( 'body_class', 'name_of_the_function' );
Of course, when looking at an example such as this one, there are several things to consider.
First of all, apart from an if statement, you could also use the if … else statement, if … elseif … else statement, or a switch statement. As for the condition part, you could use a singular conditional tag or multiple ones in conjunction with suitable logical operators.
As for the code denoted by the comment within the if statement, it has to assign your custom body class name to the $classes array, but it can have additional lines of code, depending on the complexity of what you are trying to achieve.
Finally, while the name of the callback function can be less relevant, naming the function according to the purpose of the code that it contains is the best practice. Of course, when doing so, make sure to replace both name_of_the_function placeholders we left above so that the callback function would be properly hooked onto the body_class filter hook.
Having said that, let us delve into the remaining snippets we prepared for this article. Each represents a niche use case of the body_class filter, so reviewing the explanation to the code is highly advised to achieve the desired result or to, if needed, change the snippet slightly to work in your case.
-
Template-specific body class
Since the WordPress 4.7 update, you can create custom template files used for all post types, not only pages. This is why it has become increasingly easier to create a custom template file and edit your pages and posts similarly. But, when it comes to the styling of those pages and posts, you need to use .page-template-<template-slug> and .post-template-<template-slug> body classes in conjunction, as there isn’t a unified body class name.
While this is only a minor inconvenience for most WordPress users, it can be rectified by adding a custom class to both pages and posts that have a certain template enabled. And, it is exactly what we have done in our following example.
More precisely, we have written a custom function called qode_add_template_specific_body_class() and hooked it onto the body_class filter hook. In the function, we have included a simple conditional statement which checks whether the template of the current page or post is the one given by the file full-width.php, located in the directory of your currently active theme.
Of course, if you choose to use this snippet, you will need to replace the full-width.php part with the name of the custom template, or its relative path, if it is located within a subdirectory of your currently active theme.
function qode_add_template_specific_body_class( $classes ) {
if ( is_page_template( 'full-width.php' ) ) {
$classes[] = 'qode-full-width';
}
return $classes;
}
add_filter( 'body_class', 'qode_add_template_specific_body_class' );
Having said that, we have added a CSS class name of qode-full-width to the list body class names for the pages and posts that have fulfilled the previously mentioned conditional statement.
This, in turn, means that you can use the added CSS class to style all the pages and posts that have the said template enabled using a set of suitable CSS rules.
-
CPT-specific class
While specific body classes are added to every custom post type (CPT) by default, as previously mentioned, there are still cases in which new ones can be added. One possible use that came to our mind is when you want to apply different styling to specific custom post type items based on the authors which created them. This task is quite easy on author archive pages, as author-specific body class names are added there, but is quite difficult otherwise. Luckily, this can be changed using the snippet we included below.
In it, we have created a function called qode_add_cpt_specific_body_class() and hooked it to the body_class filter hook, as previously mentioned. As for the content of the function, its content is placed within an is_singular() conditional tag, which checks if the current post has the post slug of portfolio-item. As mentioned previously, this is the custom post type provided by the Lekker theme we are using. Needless to say, you would need to replace the portfolio-item part with the slug of your custom post type.
That said, the inner part of the code can be broken into twos. In the first part, we have added a body class name called “qode-portfolio-item”. In the second part, we have added the code concerning the author-specific body class. More precisely, using the get_the_author_meta() function we have gotten the author’s display name. Then, we have added a new class called author-<display-name>, which has been properly sanitized using the sanitize_html_class() function by stripping any invalid characters.
Finally, as a precaution, in the case that the author’s name contains only invalid characters, we have set the author’s ID as the fallback. Meaning, if the author’s display name is invalid, the author-<ID> class will be added instead.
function qode_add_cpt_specific_body_class( $classes ) {
if ( is_singular( 'portfolio-item' ) ) {
$classes[] = 'qode-portfolio-item';
$post = get_queried_object();
$author_id = $post->post_author;
$author_name = get_the_author_meta( 'display_name', $author_id );
$classes[] = 'author-' . sanitize_html_class( $author_name, $author_id );
}
return $classes;
}
add_action( 'body_class', 'qode_add_cpt_specific_body_class' );
Having said that, the two added classes can be seen when inspecting a portfolio item page using the browser inspector tool.
Finally, to apply author-specific styling to your custom post type items (in our case portfolio items), you will need to use both the CSS classes that were displayed to form the correct CSS selector. In our case, that means using .qode-portfolio-item.author-admin as the CSS selector to which the CSS rules are applied.
-
Custom field class
Finally, in some cases, you might want to adjust the styling of specific pages, posts, or custom post types. The easiest way of doing so is adding a specific body class name to that post or page and then writing the CSS code targeting the class. You will recall that this was enabled using the Classes meta box in the Custom Body Class plugin we previously covered. However, a similar thing can be done using the Custom Fields section and the following code snippet.
function qode_add_custom_field_body_class( $classes ) {
if ( is_single() || is_page() ) {
$value = get_post_meta( get_queried_object_id(), 'qode_body_class', true );
if ( ! empty( $value ) ) {
$body_classes = explode( ',', $value );
foreach ( $body_classes as $body_class ) {
$classes[] = str_replace( ' ', '', rtrim( $body_class ) );
}
}
}
return $classes;
}
add_filter( 'body_class', 'qode_add_custom_field_body_class' );
It represents a custom function called qode_add_custom_field_body_class() that is hooked onto the body_class filter hook. The main part of the function is placed within the ( is_single() || is_page() ) conditional statement, i.e. the code will work as long one of the conditional tags is fulfilled.
Since the is_single() conditional tag returns true for all single posts, except attachments and pages, while the is_page() conditional tag is true only for single pages, it means that our code will be applied only to single posts and pages, excluding attachments. That said, the code executed when the previous conditions have been met relies on the Custom Fields section, as mentioned above.
First, we have stored the value belonging to the custom field we named qode_body_class using the get_post_meta() function in the $value variable. Technically speaking, we could have added the $value variable directly to the $classes[] array at this point which will insert anything you add in the custom field section as a singular entry. But, as seen from the previous example, there are cases where you might need to add multiple classes.
For that reason, we have adjusted the code so that it allows you to insert as many body CSS class names as you want, as long as they are separated by commas. You can insert them in either of the following forms:
class-name-1, class-name-2, class-name-3,…
or
class-name-1,class-name-2,class-name-3,…
i.e. with or without a trailing white space after the comma sign. Written in such a way, your entry will be properly parsed and added to the $classes[] variable as separate body class names. This concludes the explanation of the code snippet. But, since this code snippet is a bit more challenging than the previous one, there are additional things we must mention.
Firstly, the code relies heavily on the use of the Custom Fields section, so it is important to know how to enable this section. If the section is enabled by default, but hidden, then you only need to tick the correct option to reveal it. This can be the case with pages and blog posts. But, as displaying the Custom Fields section can vary based on the editing screen you are using, we advise reviewing our article on how to solve the issue of custom fields not showing for additional information.
On the other hand, if the Custom Fields section isn’t enabled for the custom post types which are provided by your theme or third party plugin, then we advise consulting with their authors on how to enable it.
Secondly, even after enabling it, you have to understand how to use it properly. To achieve the desired effect, open a page or post and locate the Custom Fields section which you have previously enabled. In the top part of the section, you will have a list of custom fields and their values that you have previously added, while in the bottom part, you will be able to add a new custom field. Locate the “Enter new” link within the Add New Custom Field subsection and click it.
Then, enter the custom field name and corresponding class value(s) in the mannere discussed above. Needless to say, you will have to name the custom field the same name that was used in the code for the code to work properly. Of course, this means that if you wish to change the custom field name, you will have to change it both in the code snippet and in the corresponding Name part.
After adding both the custom field name and value, click the “Add Custom Field” button found below.
As you can see from the screenshot below, we have added two classes – new-class-1 and new-class-2, separated by a comma and a singular white space. To make sure they are properly stored in the database, make sure to click the “Update” button, afterward.
These classes can, then, be seen when inspecting the specific page or post on which they are added using the Custom Fields section.
As a result, you can use either of them or even both, to form the corresponding CSS selector and stylize your page or post accordingly. Furthermore, you can even extend this by using the Custom fields section on other pages and posts and inserting the same custom class or classes.
Therefore, you can uniformly style any collection of pages and posts based on the shared custom field and class value, regardless of whether they share any other similarities, like categories, tags, or other custom taxonomies, for example. Therefore, it will make the website styling possibilities restricted only by the amount of CSS knowledge you possess. With that note, we conclude the article.
Final Thoughts
WordPress body classes can be used to apply styling adjustments to various pages and posts. In this article, we made a general overview of what those may look like and gave pointers regarding how they could be used. Furthermore, we have thoroughly elaborated on the general ways of extending the list of body classes and provided some niche examples to strengthen the points made in the article.
Additionally, we have touched upon many important WordPress coding concepts like WordPress hooks, custom fields, conditional tags, and proper function naming practices, which can be beneficial to any intermediate WordPress user or aspiring young developers. We advise bookmarking this article and revising it, or some of its parts, at a later date to fully grasp all the points we covered.
