[Support request] Custom CSS Body Class field

Home Forums Support [Support request] Custom CSS Body Class field

Home Forums Support Custom CSS Body Class field

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #390389
    Benjamin

    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,

    #390605
    Tom
    Lead Developer
    Lead Developer

    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

    #390610
    Benjamin

    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.

    #390800
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1904793
    Philip

    Wow. Unless I’m missing something, this works perfectly.

    It looks like I’m four years late, but thank you Tom.

    Phil

    #1906076
    Tom
    Lead Developer
    Lead Developer

    No problem! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.