Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
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 experts 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 »


  1. Murhaf Sousli says:

    This’s exactly what I’m looking for, I pasted the code in function.php, but unfortunately there is no class added to body! any ideas?

  2. WPBeginner Staff says:

    It is bundled with WordPress. However the front-end of your site is handled by themes that’s why it is left for theme authors to decide whether or not to use it.

  3. MJ says:

    Awesome! I wish this functionality was bundled with WP though

  4. Miluette says:

    Thank you sooo much. Just what I needed.

  5. Suat says:

    It’s great way for editing css.
    Thank you

  6. Weerayut Teja says:

    You save my work time.
    Thanks Syed :)

  7. Mike says:

    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:

  8. Todd M. says:

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

  9. Gaurav Ramesh says:

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

  10. Randy Caruso says:

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

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.