Add Category Name to body_class

The body_class function is nice for adding a bunch of classes to the body tag that have information about what kind of page is currently being displayed. Probably for styling purposes. But for whatever reason, it doesn't include a class for the current category (or categories) for a single post.

This adds that category "nice" name:

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
  if (is_single() ) {
    global $post;
    foreach((get_the_category($post->ID)) as $category) {
      // add category slug to the $classes array
      $classes[] = $category->category_nicename;
    }
  }
  // return the $classes array
  return $classes;
}

Comments

  1. User Avatar
    Henrique Silvério
    Permalink to comment#

    Good tip! =]

  2. User Avatar
    zzzzBov
    Permalink to comment#

    Just be careful that no category conflicts with an existing necessary body class. A better option would be to add a custom [data-*] attribute on the <body> element, so that it’s separate data

    I.E.

    <body data-category="alternative">
    

    The great thing about [data-*] attributes is that you can still style them with CSS:

    [data-category="alternative"] {
        background-color: pink;
    }
    
    • User Avatar
      bublick
      Permalink to comment#

      Great! But how to create this one? Is any ability to do it in functions.php ?

    • User Avatar
      Henry
      Permalink to comment#

      I second that. This would be a very elegant solution. I don’t think it will work inside this filter / function though. You’d have to add_action probably to add an attribute to the body element some how.

  3. User Avatar
    Kaela
    Permalink to comment#

    That second argument $class is throwing an error for me. I removed just that argument and this works perfectly.

  4. User Avatar
    Jason Carlin
    Permalink to comment#

    I found the same thing as Kaela. Works fine so long as I the $class arg. Thanks very much!

  5. User Avatar
    Alexandre Plennevaux
    Permalink to comment#

    Note that you probably don’t want this to run on the Administration interface. Prevent it using is_admin():

    add_filter('body_class','add_category_to_single');
    
    function add_category_to_single($classes) {
      if (!is_admin() && is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
          // add category slug to the $classes array
          $classes[] = $category->category_nicename;
        }
      }
      // return the $classes array
      return $classes;
    }
    
  6. User Avatar
    Tim Brown
    Permalink to comment#

    Using this on https://snapagency.com and the above suggestion took me a second to figure out what the change was… removing the second $class did the trick and the code looks like this:

    add_filter('body_class','add_category_to_single');
    function add_category_to_single($classes) {
      if (is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
          // add category slug to the $classes array
          $classes[] = $category->category_nicename;
        }
      }
      // return the $classes array
      return $classes;
    }
    
  7. User Avatar
    Randy
    Permalink to comment#

    I’m working to make the above work. What I’m attempting to do is add the category name as a class to the individual post even if it shows up on the home page, or blog index. This way, I can make styling adjustments to the post layout based on category. – ie. different color text for each category.

  8. User Avatar
    Nivin NV
    Permalink to comment#

    For me, the following code is working for single post.

    add_filter('body_class','add_category_to_single');
    function add_category_to_single($classes) {
      if (is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
          // add category slug to the $classes array
          $classes[] = $category->category_nicename;
        }
      }
      // return the $classes array
      return $classes;
    }
    

    But, I need something like this for ads page

    Can somebody help me?

  9. User Avatar
    Sian Evans
    Permalink to comment#

    This code seems to only add one class, even if the post is assigned to multiple categories. How could the code be adjusted to add a class for each and every category?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag