Archived topic
Custom CSS Body Class field
5 replies · Started by Benjamin on September 23, 2017
Hey Tom,
There is imho a very simple, yet very useful function missing to the GP theme : the ability to add a custom body class for each post / page.
GeneratePress Pro's "disable element" feature is super useful to disable header, menus and stuff on landing pages for example, but I still need to be able to control the width of this kind of pages.
Obviously it can be solved by a plugin (or through simple CSS per page but it's less elegant as it's not as centralized as a CSS class) but I would suggest to add it to the core.
Cheers,
WordPress itself adds specific classes to each page in the <body> element.
For example, if your page ID is 10, you could use this class: .page-id-10
yep I know, it's less handy than adding a custom class for example .narrow especially when split testing because you need to remember to add .page-id-XX{width:XXpx;} or you mess up your styling.
Genesis has that feature and it's actually pretty useful instead of ending up with 10 ".page-id-XX" in your custom CSS.
You could use the core WP custom fields meta box.
Give it a name: page_class
And a value: whatever
Then add this function:
add_filter( 'body_class', 'tu_page_specific_body_class' );
function tu_page_specific_body_class( $classes ) {
if ( is_singular() && get_post_meta( get_the_ID(), 'page_class', true ) ) {
$classes[] = get_post_meta( get_the_ID(), 'page_class', true );
}
return $classes;
}Wow. Unless I'm missing something, this works perfectly.
It looks like I'm four years late, but thank you Tom.
Phil
No problem! :)
