How To Add a Body Class to a Page and its Descendants in WordPress

Meet The Parents

Once in awhile you may want to apply some CSS to all descendants of a particular Page. For instance, I’ve been asked to treat a top-level Page and everything under it as a distinct section in a site. So I might use a special background color, font color, accent color, or really any other page characteristic for a particular Page and everything underneath it. Another popular idea would be to use a special background image (or header image) for an entire section.

We Are Family

Parent Cat and Her Lovely Descendant Kitten
Parent Cat and Her Lovely Descendant Kitten

NOTE: To use my method, you’ll need to do a bit of code editing and then write some CSS. If this sounds scary, get a developer to do it for you. The following code goes into the functions.php of your theme. (Appearance…. Edit, look for “Theme Functions” on the right) When the Page you’re on is a descendant of another page, this code will add a class to your BODY tag, with the ID number of the top level parent. Bonus: the “else” statement gives you the same class right at the top of the chain, even though it’s not a descendant!

The Style Section

So after activating this code, view a top level Page’s source. You will see the class “top-parent-[blah]”, with “blah” being that Page’s ID. Then look at any Page under it and you’ll see the same handy class. Then you just write your CSS for that class, and all of those Pages will use it. Loads of CMS fun!

Many of you know that any WordPress Page does have a generated class that refers to its ID. I decided not to play with that class in my function – this way you can still use the top parent’s class to style only the top level Page and none of its descendants if desired.

See? Dogs can be stylin too!
See? Dogs can be stylin’ too!

17 thoughts on “How To Add a Body Class to a Page and its Descendants in WordPress”

  1. Jake,
    I’m very glad to hear that! If you feel like sharing, when you’re done, I’d be interested in seeing your site.

    Best, Dave

    • Hey Thad,
      I re-tested with debug on and also a static home page. I changed my function above to get rid of that error at the top of the chain. I just added one more get_the_ID(). No globals were harmed in the making of this movie! 😉

      Of course, your method will work, too, you just might need to account for one more CSS class at the very top of the chain.

      Good catch!

  2. Thad,
    Great job, thanks, and I’m glad that was helpful for you!

    It’s been awhile, but I may have done all my testing on a non-static front page. Nowadays I usually go for the static home and blog pages, so I’ll have to look into that.


  3. This is beautiful – just what I was after. As you say, perfect for sites where the top level parent page and ancestors is considered a ‘section’ that requires individual styling.

  4. Hi,

    It is not working for me properly.
    I have 3 top level pages and all these pages have child pages.
    In my case no matter who is the parent of the children all pages have the exactly same ID.

    • Hi,
      My first thought is that this is really weird. WordPress pages each have their own ID. The code will use that ID to create the classes of the children, so logically that should work.

      My first guess is that you have a theme or plugin that is hijacking this stock WordPress behavior. If that’s the case, my method won’t work. I have run into this sort of thing when using Elegant Themes, or themes from Themeforest that are very pimped out.

      If you’d care to shoot me a link, I’ll take a look.

      • Tyler,
        Glad you like it! That’s considerably easier than what I had. You just replace everything inside the function with the following 3 lines. I don’t like using global particularly, but it’s the quickest way to get this. Just grabbing the slug, which is the post_name, is either than playing with parentage and ID. Also, I’m not distinguishing between pages and posts with this code. If you want to do that, I’m sure you can work it out. 🙂 The “slug-is” bit is optional, too, but would make the class easier to find when viewing source. This reminds me of the absurd number of body classes that WordPress produces. 🙂

        global $post;

        $classes[] = ‘slug-is-‘ . $post->post_name;

        return $classes;


Leave a Comment