Body class

[Chad Biggs]

How is the best way to add a body class for a specific page?

GeneratePress 1.3.46

GP Premium 1.2.96

[Jamal]

Hi Chad

Looking at the documentation it looks like we can use the following

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
 
    if ( is_shop() ) {
     
        $classes[] = 'class-name';
        $classes[] = 'class-name-two';
         
    }
     
    return $classes;
     
}

https://code.tutsplus.com/tutorials/adding-to-the-body-class-in-wordpress–cms-21077

Hope that works for you.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Yep, that’s perfect 🙂

For a specific page, you would replace is_shop() with is_page( 'page-slug' )

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chad Biggs]

Thank you Jamal and Tom.

[Tom]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jonathan]

How would you add the page/post name (title) to the function so that you don’t have to hard code the class?

i.e If I have an about page I would want the body to include .about as a class

[Leo]

Any reason you don’t want to use the unique .page-id-xxx class that comes with each page?

It should work exactly the same.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jonathan]

Semantic reasons. The class .page-id-xxx is meaningless while I .about-us is clear.

[Jonathan]

I used this piece of code in functions.php of my child theme to make the class:

add_filter( 'body_class', 'sk_body_class_for_pages' );

function sk_body_class_for_pages( $classes ) {

  if ( is_singular( 'page' ) ) {
    global $post;
    $classes[] = 'page-' . $post->post_name;
  }

  return $classes;

[Leo]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jonathan]

Anyone know how to make a class based on the meta value? So if I create a custom field called ‘my-body-class’ and have a value of ‘whatever is put in here’ what do I need to show the value part?

[David]

Hi there,

try this:

<?php
function db_custom_field_body_class($classes) {
if(get_post_meta(get_the_ID(), 'custom_body_class', true))
    $classes[] = get_post_meta(get_the_ID(), 'custom_body_class', true);
    return $classes;
}

add_filter('body_class','db_custom_field_body_class');
?>

the custom field name is: custom_body_class or whatever you want to change it to.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jonathan]

Thanks. That worked well.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts