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