Skip to content

The Magic of WordPress’ body_class

Over the last month, whilst I’ve been working with WPZOOM in their support forum, I’ve found one of the things that has helped me the most when answering people’s requests for help is the amazing function, body_class.

It was introduced back in WordPress 2.8, but it doesn’t really get the respect it deserves; body_class is awesome. 

If you don’t know what it is,  it’s essentially a piece of code you can add to the <body> element which adds various unique classes to your posts, pages, archives, custom post types etc. Why is this handy? It lets you add CSS to specific posts/pages/whatever. And that’s really handy.

Installation

The installation bit of body_class is really easy. You’ve just got to change your opening <body> tag to <body <?php body_class(); ?>>. And that’s it!

Before we go any further, though, we’re going to add a little custom code to our functions.php file which adds classes for custom post types. Hat tip here to WPEngineer.

function fb_add_body_class( $class ) {
	if ( ! is_tax() )
		return $class;
	$tax   = get_query_var( 'taxonomy' );
	$term  = $tax . '-' . get_query_var( 'term' );
	$class = array_merge( $classes, array( 'taxonomy-archive', $tax, $term ) );
	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' ); // or post_class as hook

So what’s so useful?

In the support forum world, this is really handy because it lets you answer the questions like “can I have a different colour background on this post only?”

Without body_class, the answer is “um, sure; you just need all these conditional template tags”. With body_class, though, you just need to grab the post ID off the site (as it’s listed as one of the classes applied to body) and tell the client to add a line of code to their custom stylesheet:

body.postid-1{ background-color: #fff;  }

And that’s literally all there is to it. This post uses it! It’s made my life so much easier answering support tickets, but let’s look at a more common real life example.

Real life usage: menu highlights

CSS Tricks

This technique’s used on CSS-Tricks, too!

I’m using body_class here on Shout in order to get the menu to highlight depending on what page you’re on on the site. As I want the highlight to show on posts, custom page templates and pages, sometimes with a combination of the two, WordPress’ built in menu builder and the .current class it adds to the “current” page wouldn’t work here — I need to be able to effectively have custom control over which type of content highlights each menu.

With body_class, I can!

If you’ll excuse the cheesyness, you’ll see why I love this function so much. I’ve got the menus set up so that when the body_class adds its classes to certain types of pages, for example the “contact” item highlights when the  class .pagename-contact is active, the “articles” item highlights when one of .archive, .single-post or .pagename-articles (the custom page template used for the archives) are active.

I’ll walk you through a simplified version of the code. There’s not really much to this:

First off, we’ve got the original menu. This uses the id #main-nav and uses something like the following:

#main-nav li a { float:left; list-style:none; margin:0; padding:20px; color:#3a3a3a  }

We’ve then get the “current menu item” style which is something like:

#main-nav li a.current { border-bottom: 5px #f15a23; border-top: 5px #f15a23; background: #f8f8f8; }

As you can see, this just adds a couple of borders and changes the background. So that’s the “current” style sorted. So how do we integrate this with body_class to get this to show when on the pages, posts etc we want?

This bit’s simple — you’ve just got to find the unique classes body_class adds to the particular content types you want to highlight on the menu.

For me, it was things like .single-post and .home, but body_class lets you select content types right down to categories and the IDs of individual posts. All that’s left now is just adding those unique classes to the .current CSS we created earlier, ending up with something like this:

#main-nav li a.current,
/* The homepage */ .home li a
/* Highlights for articles tab */ .archive li a, .single-post li a, .pagename-articles li a,
/* Screencast highlight */ .single-screencast li a,
/* And the contact page*/ .pagename-contact li a
{ border-bottom: 5px #f15a23; border-top: 5px #f15a23; background: #f8f8f8; }

And then you’ve got your highlights sorted! If you want to see exactly how I’ve done it here on Shout, then check out the live site in Firebug/Chrome Web Tools.

Wrapping up

Hopefully this tutorial has been helpful in showing you how to get started with one of my favourite little functions built into WordPress. If you’ve used it recently, please share in the comments!

Yay! 🎉 You made it to the end of the article!
Alex Denning

11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
séparation
July 13, 2013 9:24 pm

When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added
I get three e-mails with the same comment. Is there any way you can remove me from that service?
Many thanks!

tumor of bone
June 26, 2013 3:38 am

Hello, i think that i saw you visited my website thus i
came to “return the favor”.I am attempting to find
things to improve my website!I suppose its ok to use some of your ideas!
!

Adam Nguyen
January 7, 2013 6:01 am

Body_class very useful!
Thanks for sharing great tips 🙂

converse
September 19, 2012 4:32 am

awesome i body_class

Ricardo
August 10, 2012 8:26 am

Quite interesting tutorial. I will test this function into my wordpress sites!

Elliott Richmond
August 1, 2012 8:04 pm

Do you need the function for custom post types? I believe if you use the body_class function it will return the custom post type name anyway?

Edward Caissie
July 31, 2012 7:19 pm

body_class is so awesome it is required to be included with every theme submitted to the WordPress Extend Repository.

PS: Don’t forget about the equally awesome post_class function. EAC

Jon
July 31, 2012 6:27 pm

Awesome write-up. I’ve used body_class before but I never thought about using it for highlighting the current page.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

11
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...