How To Add a Custom Body Class

If you’ve done much theme development, you’ll know how handy it is to be able to add specific classes to the <body> tag depending on which page is being viewed. Since WordPress version 2.8, that’s a simple thing to do. That version added a function called ‘body_class()‘ which, used in conjunction with the correct action, lets us easily add new classes whenever we need them, with a few lines in the theme’s functions.php file.

One of the biggest advantages to using this function/action method is that it keeps the logic out of the header.php template file, giving us cleaner coding in the template, and allowing us to split out appearance/function even more.

Using the body_class() function

Using the body_class() function is easy – write a function to add a class or classes depending on certain conditions, then ‘hook’ that function into the body_class action. (As always, a quick look at the WordPress Codex entry for body_class() can be helpful.)

One note – your theme must be coded to handle the body class function. Check the theme’s “header.php” file, look for the <body> tag. It needs to look like this:

<body <?php body_class($class); ?>>

(i.e., the tag has the call to the body_class() function). If it isn’t there, add it.

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  $classes[] = 'my-custom-class';
  return $classes;
}

Just adding a class like that wouldn’t do us a lot of good, though. We need some conditions, which we’ll add using WordPress conditional tags.

Adding a class to a specific page by page slug:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_page( 'sample' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Adding a class to a specific page by page ID:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_page( '1' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Adding a class to a specific category page, by category slug:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_category( 'custom-category' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Or, we can get a little more complicated…

Adding a class to specific post, but only if that post is a ‘video’ post (assuming you are using custom post types):

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  global $post;
  if ( 'video' == $post->post_type AND 'my-post' == $post->post_name )
    $classes[] = 'my-custom-class';
  return $classes;
}

Do you need to drill down to a very specific page/post?

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  global $post;
  $classes[] = $post->post_name;
  return $classes;
}

You’re really only limited by your imagination when it comes to adding custom body classes. You can use any of the WordPress Conditional tags, you have access to the $post object for specific properties – whatever you want to do, you can probably do.

Comments

  1. says

    Great post! I was looking for this exact method for CPT. thanks so much for posting!

    I ended using the first one that’s global but I really wanted to use the CPT version. I was able to get it to work on the CPT archive page but didn’t work on a CPT single. I’m not sure what to change or add, thoughts? Thanks Again!

    • Steve says

      No reason it shouldn’t work on a CPT single. Do you have WP_DEBUG turned on to see if you’re generating any errors?

  2. says

    I added it on my client’s website http://www.proforbes.com
    But it was on her desire not suggestion of mine. But after read your article a question occur in ma mind.
    When we add custom body class as you mentioned above does it make any impact whole source of page? or any impact on google crawling?

Leave a Reply