Are you a budding WordPress theme designer on the lookout for innovative ways to incorporate CSS into your designs?
Fortunately, WordPress has CSS classes that you may use in your themes. On a WordPress site, several of these CSS classes are automatically inserted into the <body> portion of every page.
In this article, we’ll go through the WordPress body class and provide prospective theme designers with some pointers on how to use it in their projects.
What is a WordPress Body Class, and how does it work?
The WordPress function body class (body class) allows you to give CSS classes to the body element.
The HTML body tag is usually found in the header.php file of a theme, which is loaded on every page. This allows you to dynamically determine which page a user is reading and apply the appropriate CSS classes.
In most starting themes and frameworks, the body class function is already included in the HTML body tag. If your theme does not already contain it, you may add it by altering the body tag as follows:
|
1
|
<body <?php body_class($class); ?>> |
WordPress automatically inserts the relevant classes based on the type of page being displayed.
If you’re on an archive page, for example, WordPress will add the archive class to the body element automatically. It does this on almost every page.
Here are some typical WordPress classes that may be added based 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 can see, you can completely change your WordPress page using only CSS if you have such a powerful tool at your disposal. Specific author profile pages, date-based archives, and other features can be customized.
With that out of the way, let’s look at how and when you might use the body class.
When Should You Use The WordPress Body Class?
First, make sure your theme’s body element contains the body class function, as shown above. If it does, all of the WordPress-generated CSS classes stated above will be included immediately.
Following that, you’ll be able to customize the body element with your own CSS classes. These classes can be added at any time.
If you wish to change the appearance of articles written by a given author and categorized under a specific category, for example.
How do I make my own body classes?
When you need to add custom body classes, WordPress has a filter that you can use. To ensure that everyone is on the same page, we’ll show you how to use the filter to add a body class before going over the specific use case scenario.
You’ll need to add the following code to your theme’s functions.php file because body classes are theme-specific.
|
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 filteradd_filter('body_class','my_class_names'); |
On every page of your website, the above code will add the class “wpb-class” to the body tag. Isn’t it that bad?
You may now use this CSS class directly in your theme’s stylesheet. If you’re building your own website, you can use the theme customizer’s custom CSS function to add the CSS.
Using a WordPress Plugin to Add a Body Class
This way would be easier for you if you aren’t working on a client project and don’t want to develop code.
Installing and activating the Custom Body Class plugin is the first step. See our step-by-step guide on installing a WordPress plugin for more information.
You must go to the Settings » Custom Body Class page after activation. You can change the plugin’s settings from here.
You may choose which post kinds to enable the body class functionality on and who has access to it. Don’t forget to save your changes by clicking the Save Changes button.
After that, you can edit any post or page on your WordPress website. In the right column of the post edit screen, you’ll see a new meta box named ‘Post Classes.’
To add your own CSS classes, click here. Multiple classes can be added, separated by a space.
You may save or publish your post once you’re finished. Your custom CSS classes will now be added to the body class for that specific post or page by the plugin.
Using The Body Class with Conditional Tags
When the body class function is combined with conditional tags, the function’s true power is shown.
These conditional tags are true or false data types that determine whether a condition in WordPress is true or false. The conditional tag is home, for example determines if the current page is the homepage or not.
This allows theme creators to verify if a condition is true or false before using the body class method to apply a custom CSS class.
Let’s look at a few examples of adding custom classes to the body class using conditional tags.
Let’s imagine you want to decorate your homepage differently for users who have the author user role and are logged in. While WordPress creates the.home and.logged-in classes automatically, it does not recognize or add the user role as a class.
This is an example of how conditional tags can be combined with custom code to dynamically add a custom class to the body class.
To accomplish this, add the following code to the functions.php file of your theme.
|
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 homepageif ( 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 classesreturn $classes; }} add_filter('body_class', 'wpb_loggedin_user_role_class'); |
Let’s look at another helpful example now. This time, we’ll see if the page we’re looking at is a preview of a WordPress draft.
We’ll do this by using the is preview conditional tag, followed by 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'); |
To use the new custom CSS class we just added, we’ll add the following CSS to our theme’s stylesheet.
|
1
2
3
4
5
|
.preview-mode .site-header:before { content:'preview mode';color:#FFF;background-color:#ff0000;} |
On our sample site, it looked like this:
You might wish to look over the complete list of conditional tags available in WordPress. This will provide you with a ready-to-use set of tags for your code.
Other Examples of Adding Custom Body Classes Dynamically
You may also use other approaches to get information from the WordPress database and generate custom CSS classes for the body class besides conditional tags.
Adding category names to a single post page’s body class
Let’s imagine you want to change the look of individual posts depending on the category they’re placed in. You may do this by using the body class.
On single post pages, you must first add category names as CSS classes. To do so, add the following code to the functions.php file of your theme:
|
1
2
3
4
5
6
7
8
9
|
// add category nicenames in body classfunction 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'); |
For single post pages, the code above will add the category class to your body class. After that, you may style it with CSS classes.
Incorporating a page slug into the body class
In the functions.php file of your theme, paste the following code:
|
1
2
3
4
5
6
7
8
9
|
//Page Slug Body Classfunction 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' ); |
Body Classes for Specific Browsers and Browser Detection
You can get into situations where your theme requires additional CSS for a specific browser.
The good news is that WordPress recognizes the browser automatically when it loads and temporarily saves this information as a global variable.
Simply verify if WordPress has recognized a specific browser and apply it as a custom CSS class.
Simply enter the following code into the functions.php file of your theme:
|
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'); |
Then you may use classes like:
|
1
|
.ms-edge .navigation {some item goes here} |
If the problem is a little padding or margin issue, this is a simple solution.
There are a slew of other situations when the body class function can help you avoid writing long lines of code. If you’re using Genesis as your theme foundation, you can use it to add custom classes to your child theme.
The body class method can be used to add CSS classes to full-width page layouts, sidebar content, headers, and footers, among other things.
We hope this post has shown you how to use the WordPress body class in your themes.
Comments are closed.