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
Special WordPress Hosting offer for WPBeginner Readers
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. Aaron McGraw says:

    Awesome! Just what I needed. Thank you so much!

  2. Daneil says:

    Thank you for putting it out there, simple bit of code, but useful and allows you to write more human friendly css files, rather than classes based on ID. Cheers

  3. Austin says:

    Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry. :)

  4. Kevin says:

    Many thanks for this. Had some problems initially due to the position of code in my stylesheet CSS but once moved to the bottom worked great. Just wish this was standard for WP as others have said and that i had known about this a long time ago

  5. Tom McGinnis says:

    This code works quite well. I was finding, however, that search results would end up with the body class including the slug from the first item listed. Sometimes the first item would have styles that would override the styles for the search results page. Strange, huh!

    I figured out that if you put !is_search() inside the if statement, then this problem is eliminated. If anybody else runs into this problem, the fix is simple.

  6. 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?

  7. 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.

  8. MJ says:

    Awesome! I wish this functionality was bundled with WP though

  9. Miluette says:

    Thank you sooo much. Just what I needed.

  10. Suat says:

    It’s great way for editing css.
    Thank you

  11. Weerayut Teja says:

    You save my work time.
    Thanks Syed :)

  12. 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:

  13. Todd M. says:

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

  14. Gaurav Ramesh says:

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

  15. 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.