Styling different pages in WordPress is a relatively easy process if you make use of the default body classes that are made available to you, especially the unique page ID class “page-id-123“.
The problem with using the ID class to identify an individual page is that a page ID can quite easily change when working with a development version or even migrating your blog from one install to another.
One solution to this problem is to append the post type and slug as a class name to the body, e.g. ‘page-about‘ or ‘post-hello-world‘.
Simply add the following to your functions.php file to automatically append the classes:
function add_body_class( $classes )
{
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_body_class' );
Note: This method will also apply to individual post pages and custom post types.
Stv.Whtly 
Nailed it! Exactly what I needed. I’ve been used to having the page name as a class from other frameworks I’ve used.
LikeLike
This is great, one of the better implementations I’ve seen! Word of warning, for some reason whenever add_filter is after the function, it doesn’t always run. I like to put it before the actual function.
LikeLike
Hey,
I added this code to my functions.php file but my body classes of each page/post don’t seem to be getting populated with the slug? Can you advise what I might be doing wrong please?
Many thanks
Kyle
LikeLike
Same problem here. Is there something else that needs to be set in order for this to work?
LikeLike
It seems that one of the recent WordPress version updates has broken this code’s functionality.
I’d love to know of an update to the code to fix it.
LikeLike
function wpprogrammer_post_name_in_body_class( $classes ){
if( is_singular() )
{
global $post;
array_push( $classes, “{$post->post_type}-{$post->post_name}” );
}
return $classes;
}
add_filter( ‘body_class’, ‘wpprogrammer_post_name_in_body_class’ );
Works on WP 3.5.2.
LikeLike