WordPress Body Class 101: Tips and Tricks for Theme Designers
Through out our experience of using WordPress, we have found that often theme designers overthink a certain functionality. They are looking for crazy WordPress filters and hooks to accomplish a task when all they need is some simple CSS. WordPress by default generates a lot of CSS classes. (WordPress CSS Cheat Sheet). One of these CSS classes area ia the body class styles. In this article, we will explain the WordPress body class 101 along with sharing some useful tips and tricks for beginning theme designers.
What is WordPress Body Class?
Body Class (body_class) is a WordPress function that gives the body element different classes, so theme authors can style their sites effectively with CSS. HTML body tag is present in mostly your header.php file which loads on every page. When coding a theme, you can attach the body_class function to your body element like so:
<body <?php body_class($class); ?>>
By adding this little element, you give yourself the flexibility of easily modifying the look of each page by using CSS. Depending on the type of page being loaded, WordPress automatically adds the appropriate class. For example, if you are on an archive page, WordPress will automatically add archive class to the body element if you choose to use it. It does that for just about every page. Here are some examples of common classes that WordPress might add:
.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, by having such a powerful resource at hand, you can entirely customize your WordPress page by using just CSS. You can customize specific author profile pages, date based archives etc. So how and when would you use this?
How to use WordPress Body Class
In most cases, WordPress body class is the simple solution that theme designers often ignore. Yes, this includes us as well. About a year ago, we needed to style a WordPress menu item that was only on a specific page. We decided to dig deep to find a filter to add a special navigation class to the menu items which would be added using conditional statement. For example, if it is a single page, then add the class “Blog” to the menu items. After spending all the time in figuring out all that and writing a post about it, one of our users pointed out that we could’ve easily done that with existing body class like so:
.single #navigation .leftmenublog div{display: inline-block !important;}
Notice: how it uses the .single body class that is added in all single post pages.
Boy didn’t we feel stupid after that. Ever since then, we have made a note to see if things can be done with the body class first before digging deeper.
To give you another example. Once a user approached us asking for a way to change the logo image on their website based on the category page. Most theme designs including his was loading the logo using a CSS (#header .logo). We suggested how about using the .category-slug body class to change his logo like so:
.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;} .category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}
This new theme designer had the same ah-hah moment that we had. Hopefully now you are getting a hang of how you can utilize body class in your theme designs. But wait, this gets even more powerful because there is a way for you to add custom body classes using a filter. Let’s take a look at how to do that.
How to Add Custom Body Classes
WordPress has a filter that you can utilize to add custom body classes when needed. We will show you how to add a body class using the filter before showing you the specific use case scenario just so everyone can be on the same page.
Because body classes are theme specific, you would need to write a custom function in your functions.php file like so:
function my_class_names($classes) { // add 'class-name' to the $classes array $classes[] = 'test-class-name'; // 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 “test-class-name” to the body tag on every page on your website. That’s not so bad right? The real power of this function is in the conditional tags. You can say add XYZ class only on single pages etc. Let’s take this example and apply it to real use-case scenario.
Add Category Class to Single Post Pages
Lets say you want to customize the single post pages of each category. Depending on the type of customization, you can use body classes for it. To keep things simple, lets say you want to change the background color of the page based on the category of single posts. You can do so by adding category classes to your single post page views. Paste the following function in your theme’s functions.php file:
// add category nicenames 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('body_class', 'category_id_class');
The code above will add the category class in your body class for single post pages. You can then use css classes to style it as you wish.
Add Page Slug in Body Class of your WordPress Themes
Paste the following code in 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 . '-' . $post->post_name; } return $classes; } add_filter( 'body_class', 'add_slug_body_class' );
Read our article on page slug in body class that will explain why we needed this.
Browser Detection and Browser Specific Body Classes
Sometimes you may need to have special CSS styles for everything to work right in certain browsers (HINT: Internet Explorer). Well Nathan Rice suggested a very cool solution that adds browser specific classes to body class based on the browser the user is visiting the site from.
All you have to do is paste the following code in your functions.php file:
<?php add_filter('body_class','browser_body_class'); function browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; if($is_lynx) $classes[] = 'lynx'; elseif($is_gecko) $classes[] = 'gecko'; elseif($is_opera) $classes[] = 'opera'; elseif($is_NS4) $classes[] = 'ns4'; elseif($is_safari) $classes[] = 'safari'; elseif($is_chrome) $classes[] = 'chrome'; elseif($is_IE) $classes[] = 'ie'; else $classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; return $classes; } ?>
You can then use classes like:
.ie .navigation {some item goes here}
If it is a small padding or margin issue, this is a fairly fast way of fixing it.
More Use Cases:
We can probably list a lot more uses cases, but we won’t otherwise this article will get out of hand. The whole point of it was to help new theme developers understand the basics of WordPress body class and it’s advantages. The use cases are limited to your imagination. We have seen commercial theme developers (Genesis) use body classes to offer various layout options. For example Full Page Layout, Sidebar Content, Content Sidebar etc. Doing so, the user can easily switch the layout of their page without worrying out the look issues because it’s already taken care for with CSS.0
We have seen some developers adding HTTP requests to load CSS files for various color schemes that they offer. In a lot of cases, the changes are very minor as well. There is no point in having 3 stylesheets being loaded when one can do the job. Just use body class for that.
Hopefully, you found this article useful. We would be happy to hear your thoughts on Body Class, and how you have used it in the past or plan to do so in the future.
