Jump to content

How do a add page-specific classes to target with CSS?


ryan
 Share

Recommended Posts

As for adding a class to the current page based on the current's page URL name and the parent's URL name, you have many options. Here's how I might do it, by adding a class to the body tag that would make it possible to target any element on a page in your CSS:

<body class='<?php echo "page_{$page->name} parent_{$page->parent->name}"; ?>'> 

If you were on a page with URL "/news/press/", the result would look like this:

<body class='page_press parent_news'>

Rather than assigning body classes based on the current page and current parent, I usually find it's more convenient to assign a class based on the current section, or "root parent page" as it's called in ProcessWire. Typically these section pages are those that appear in the top navigation. Having every page identify it's section via a <body> class means we can easily highlight the current section in the navigation with our CSS. So here's how I might output the body tag:

<body id="section_<?php echo $page->rootParent->name?>">

If we were on the page /news/press/, the result would be:

<body id="section_news">
  • Like 3
Link to comment
Share on other sites

  • 6 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...