De-bloating the page classes

And the answer is like this;
I figured the most useful bits for me was something that read like this;

<body class="page my-page page-id-28 template-mypage">

where page is the post type, mypage is the page slug, then the id and finally an elegant form of the template. (my templates are all of the form page-templates/page-mypage.php so you’ll need to put your own structure in here – most of the code is cleaning up the template slug.

Put this into functions.php

//Modify body_class()
function modify_body_class( $classes ) {

global $post;

// Empty class array
$classes = array();

if (is_front_page()) {
    $classes[] = 'home';
}

// add post type
// add slug
// Add page ID
// Add template slug (first sanitise)
$template_slug = get_page_template_slug();
if ($template_slug) {
    $template_slug = str_replace('page-templates/', "", $template_slug);
    $template_slug = str_replace('.php', "", $template_slug);
    $template_slug = str_replace('page-', "template-", $template_slug);
} else {
    $template_slug = null;
}


if ( isset( $post ) ) {
    $classes[] = $post->post_type;
    $classes[] = $post->post_name;
    $classes[] = $post->post_type .'-id-'.$post->ID;
    $classes[] = $template_slug;
}
return $classes;
}

add_filter( 'body_class', 'modify_body_class' );

Related Posts: