Quick Tip: Use Post or Page Slug as CSS Class in WordPress
I don’t know why, but for some reason, I thought WordPress already included the slug of a post or page in either the function body_class() or post_class(). Doing some work over this weekend I realized that’s not the case, but luckily, it’s very easy to do.
The functions body_class() and post_class() serve as a way for you to easily customize a page’s CSS based on attributes of the page being viewed. They will output things like the post ID, the custom post type, if the page is the blog, home, or front page, and more. One thing it does not include, however, is the post slug. This could be useful if you want to style each of your posts a certain way, or in a more likely scenario, style each page a certain way. If you want to do this, the code is fairly straight forward; both functions accept an option argument: a string of your own classes. We use that combine with the $post array, like so:
<?php body_class($post->post_name); ?>
or, if you want to do it on a post-by-post basis:
<?php post_class($post->post_name); ?>
Note the latter must be used inside the Loop. Using this, if you have a page named, “Services” with the slug services, the output would look something like this:
<body class="page page-id-108 page-parent page-template-default services">
Now you can use the .services (or whatever) class name to do some custom stuff instead of needing to know the page or post ID.
You can add this into the 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’ );
Ah nice- thanks Gregg!
Hi Joe,
I was looking for something like this! Well, at least I hope this would take care of what I need.
Can this aggregate posts in a certain category (“studies”) into a grid format? My current theme stacks the blog posts one on top of the other, and I need them to be on a grid of 4-5 feature images with a 2 line description below the feature image, per row, with rows going down. Can this be done with the code above?
I got to you because I am looking at the Rockable’s Build WP themes from scratch book you did, and I thought it perfect you writing this code above at just the right time for me to find it 🙂
Thanks!
Monica, thanks for reading! If I am not mistaken, the categories are already added in
post_class()so if you use that call, and each blog post is in an article element, you should be able to do something like.studies article{ //css here }.Hi there, You’ve done a great job. I will definitely digg it and personally recommend to my
friends. I’m confident they will be benefited from this website.
Hi, i believe that i noticed you visited my weblog so i got here to
return the prefer?.I’m attempting to to find things to improve my site!I
suppose its ok to use a few of your ideas!!
my page; sun dolphin kayak Review (youtube.com)