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?

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag