A common method to target elements of a particular static Page is by its ID like this: .page-id-2
Wouldn’t it be handy if you could instead use the slug of the Page like this? .page-about
Adding the following in child theme’s functions.php will automatically add a page-slug class to the body element for all static Pages for easier targeting in CSS.
| add_filter( 'body_class', 'sk_body_class_for_pages' ); | |
| /** | |
| * Adds a css class to the body element | |
| * | |
| * @param array $classes the current body classes | |
| * @return array $classes modified classes | |
| */ | |
| function sk_body_class_for_pages( $classes ) { | |
| if ( is_singular( 'page' ) ) { | |
| global $post; | |
| $classes[] = 'page-' . $post->post_name; | |
| } | |
| return $classes; | |
| } |
What a brilliant idea! Thanks, Sridhar :).
Thank you! You pushed me to the right way.
Thank you! 🙂
Thanks a lot.
Exactly what I was looking for.
Thanks, Buddy. You saved my ass! 😀