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.
Many thanks! Literally copied & pasted this code into my functions.php. Worked perfectly.
How about using global $wp_query instead of $post? I’ve noticed that $post gets overwritten if you’ve run a wp_query before the functions.php gets executed.
This needs a conditional statement to only apply it to single.php, not archive.php etc.
How can I put the post-id in the body class?
Awesome! Just what I needed. Thank you so much!
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
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.
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
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.
When you put in !is_search() –How did you write the code?
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?
I have the exactly same issue
Hello, it working for me. send me your link so i can check.
Thank you
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.
Awesome! I wish this functionality was bundled with WP though
Thank you sooo much. Just what I needed.
It’s great way for editing css.
Thank you
You save my work time.
Thanks Syed
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
This is a great snippet for all WordPress devs. Comes as standard in my theme setup now.
Thanks for this. Such small tips and tricks help a lot to beginners like me.
Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.