1

I'm transferring a 20 page static HTML site to a custom Wordpress Theme. On each page of the static site the body tag has a custom CSS class i.e. 'banking-page'.

I know that WP generates page id classes in the body tag to represent the individual pages (i.e. .page-id-27), but in terms of readability (and transferability), is it possible to add a bit of php onto each page which will insert a specific class into the body tag CSS for that particular page? Using the body_class() function won't do it because it will show on every page.

Thanks in advance

Emily.

Improve this question

4 Answers 4

Reset to default
2

In your functions.php:

function my_body_class($classes) {

    if(is_page()){
      global $page;
      $title = get_the_title(  $page );
      $classes[] = $title;

    }
    return $classes;
}

add_filter('body_class', 'my_body_class');

That will add the page title as a class to each page.

Improve this answer
2
  • this code throws an error on the classes[] = $title line.
    – pjk_ok
    Commented Oct 11, 2019 at 12:32
  • I forgot the $ on classes.
    – KGreene
    Commented Oct 11, 2019 at 14:18
4

Couple of options for you.

Option 1: Use the body_class() function to add the page slug to the class.

function add_slug_body_class( $classes ) {
     global $post;
  if ( isset( $post ) ) {
     $classes[] = $post->post_name;
  }
  return $classes;
}

add_filter( 'body_class', 'add_slug_body_class' );

Then whatever the url is, say "yourdomainpage.com/banking-page" then it'll grab "banking-page" as a class for the body. This does mean your urls needs to line up with your classes, so that may not be the ideal solution.

Option 2: Add a body class meta box to your pages. I prefer using ACF for this, but it can also be done using the add_meta_box()function.

Once you've got that filled in, you use the same function as listed in option 1, except you replace $post->post_name; with your meta box / ACF field value.

Improve this answer
0

You want to add different CSS class on different page. You can do it by checking it by page or page id. It's going to bit long work for you. However, you can do it two way. (May be more ways are there but I suggest you these two)

For both you should have added following code into active theme's header file where you render body tag

<body <?php body_class( 'class-name' ); ?>>

  1. Check the page using code in the body_class filter(Hook):

    add_filter( 'body_class', 'add_custom_class', 10, 1);
function add_custom_class( $classes ) {
    if ( is_page( 57 ) ) { 
        // 57 is your desire page id for example
        // if ( is_page ( 'home' ) ) { // the slug of page
        array_merge( $classes, array( 'home-class' ) );
    } elseif( is_page( 58 ) ) { 
        // elseif ( is_page('about-us') ) {
        array_merge( $classes, array( 'about-class' ) );
    } elseif ( is_page( 60 ) ) { 
        // elseif( is_page('contact-us') )
        array_merge( $classes, array( 'contact-class' ) );
    } 
    // until all your pages are finished.
    return $classes;
}

  2. Another way is add meta box or custom field on each page in wp-admin and add class of that page and modify above code as follow:

    add_filter( 'body_class', 'add_custom_class', 10, 1);
    function add_custom_class( $classes ) {
        // If you're using custom-field or meta that should be shaved in postmeta table
        global $post;
        $page_class = get_post_meta( $post->ID, 'meta_key', true );
        // You can use Advance custom field plugins to add fields into your posts/pages
        // If you use ACF plugin you can use get_field( 'selector', $post->ID ) instead of get_post_meta(...);
        if ( is_page() ) {
            if( '' != $page_class ) {
                array_merge( $classes, array( $page_class ) );
            }
        } 
        return $classes;
    }
Improve this answer
0 
// add body class for that.
add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
    if ( is_single() && 'post' == get_post_type() ) {
        $classes[] = 'article-page';
    }

    else{
      if(!is_page('library'))  $classes[] = 'home';
    }
    if(is_page('contact-page')){
       $classes[] = 'contact-page';
    }   
    if(is_page('banking-page')){
      $classes[] = 'banking-page';
    }
  return $classes;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.