Body Classes

This feature requires and uses: CSS, basic HTML understanding and child parent heriarchy/relationships.

Description

Body Classes allows the ability to style a section of a website based on the child’s pages parent slug.

How does it work?

Navigate to the parent page and view the pages source. In the source, locate the body tag and find the body class attribute. Mixed in all the class locate a class that represents shows the pages slug. Should look like this, “page-slug-name”. This will be the parent page selector, to style the rest of the section, you need to also apply to create a class that uses the parent pages slug but instead of using the “page-slug-name”, use “parent-slug-name”.

Limitations

This only works for 3 child levels (Including the parent). For example, if the hierarchy is parent > child > child of child, then the class based on the parent will apply to all children of the parent and all children of the parent child.

But if…

The hierarchy goes beyond 3 levels, the style will be lost. For example: parent > child > child of child > child of child of a child. Child of child of a child will not have the style applied.

Solution:

Use the child of child of a child’s parent slug (child of child) as a class to style 3 more hierarchy.