Home / css / Add custom body class for specific pages
  • How to Add custom body class for specific pages

    add-custom-body-class-for-specific-pages

    Adding this snippet to the functions.php of your wordpress theme will let you add a custom body class for specific pages. Add the second snippet to the header.php template replacing your default html body tag.

    wordpress snippet : PHP

    <>
    add_filter( 'body_class', 'my_neat_body_class');
    function my_neat_body_class( $classes ) {
         if ( is_page(7) || is_category(5) || is_tag('neat') )
              $classes[] = 'neat-stuff';
    
         return $classes; 
    }
    

    wordpress snippet : PHP

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

    ( WordPress codex functions, hooks, in this snippet. )

    body_class, is_page, is_category, is_tag, add_filter, _n,
  • http://www.squareonemd.co.uk Elliott the web design guy

    Now that’s a very neat snippet for custom page layouts – awesome!

    • http://wpsnipp.com Kevin Chard

      Cool glad you like it!

  • http://twitter.com/jamusreynolds Jamie Reynolds

    Very handy. Can something simular be done using page parent?

    • http://wpsnipp.com Kevin Chard

      Sure you could do something like this, however if your pages only have a single parent the body_class will already add “page-parent” class to the body. This is only a problem if you have many child pages as each sub page may also be a parent page. What is it that you are trying to do?

  • Anonymous

    Is there anything you need to do after you add the class? I’m not seeing any way to add a custom class for a page…

    • http://wpsnipp.com Kevin Chard

      Hi Trevor,
      Yes you will need to add the body_class(); function within the body tag I updated the snippet to avoid confusion.

  • Jhardy1974

    you this be combined with the other body class snippet so if the pages are not specified they default to have their own page as the class?

    • http://wpsnipp.com Kevin Chard

      Should be able to just do

           if ( is_page(7) || is_category(5) || is_tag(‘neat’) ){
                $classes[] = ‘neat-stuff';          }else{
                $classes[] = ‘other-class';

                }

  • Scott Dixon

    Thanks for this, I wanted a shorter body class name for a custom page template, using is_page_template (‘template-name.php’) and this worked perfect.

  • Michael

    Thanks a lot for this, really appreciated!

  • padrino431

    Works flawlessly for me, nice job!

  • http://www.splinterteal.com/ Freelance Web Designer

    where can i add class once above steps are done?

    • http://wpsnipp.com Kevin Chard

      change the class in the code ‘neat-stuff’ to whatever you would like. You could even add
      multiple classes if need be.

      • http://www.splinterteal.com/ Freelance Web Designer

        i want different id / class for each page… how do i assign it to specific page?

        • http://wpsnipp.com Kevin Chard

          This snippet is not what you need, it will only add a single class to

          “is_page(7) || is_category(5) || is_tag(‘neat’)”

          A page with the ID of 7 or the category of 5 or a page that has the tag neat. I think what would better fit your needs is the following.

          http://wpsnipp.com/index.php/functions-php/add-parent-page-slug-to-body_class/

          This will add the page slug as the class for the page with a prefix of parent-{page_slug}. Other than adding this snippet to the functions.php nothing more needs to be done. Also take a look at this search result for more snippets related to the body_class http://wpsnipp.com/?s=body_class

          I’m sure you can find a few that are useful.

          • http://www.splinterteal.com/ Freelance Web Designer

            thanks!

  • thomas

    great! really helped me out.