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!

6 Comments


  1. This is the one I was looking for. I would like to style my page that has the same top parent the same. This is gold!
    Thanks.

    Reply

  2. 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

    Reply

  3. Thanks for sharing! I had code that would go as far as “grandparent” pages, but not “great grandparent” page. This works like a charm!

    Reply

  4. I actually found an issue while having debugging set to true. On the homepage, you get an error.

    I solved it by editing line three:

    if( is_page() && !is_front_page() )

    Reply

    1. 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!
      Thanks,
      Dave

      Reply

  5. 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.

    Thanks,
    Dave

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *