Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Page Slug in Body Class of your WordPress Themes

Last updated on by
Follow WPBeginner on YouTube
How to Add Page Slug in Body Class of your WordPress Themes

If you work on WordPress themes on a regular basis, then it is probably best to familiarize yourself with these default WordPress generated CSS cheat sheet. Recently while working on a custom theme project, we found a need to customize certain items based on different pages. WordPress has these things called body classes which outputs the class page, page-template-{filename} and page-id-{number}. We couldn’t use page-id-{number} because page IDs change from development to deployment. We also didn’t want to create a custom page template with repetitive code. We knew that we can keep one thing the same on all of these pages which were page-slugs, so we decided to add page slugs in body class which allowed us to do all the customizations we wanted without any complications. In this article, we will show you how to add page slug in body class of your WordPress themes.

Because this is a theme-specific code, we recommend that you put it in your theme’s functions.php file.

//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Now you will start seeing a new body class being outputted like this: page-{slug}. Use that class to override your default styles and customize elements for specific pages.

For example, if you were trying to modify a div with widgets class. You can have your css like this:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Hope you will find this tutorial helpful.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Suat

    It’s great way for editing css.
    Thank you

  • Weerayut Teja

    You save my work time.
    Thanks Syed :)

  • Mike

    Thanks for this. I just used it to create a quick plugin to add the slug and ancestor slugs to the body class. Anyone interested can get that here: https://github.com/bigmikestudios/bms-bodyclass-slug

  • Todd M.

    This is a great snippet for all WordPress devs. Comes as standard in my theme setup now.

  • http://twitter.com/ggauravr Gaurav Ramesh

    Thanks for this. Such small tips and tricks help a lot to beginners like me.

  • Randy Caruso

    Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.