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! 😀