BlogThemes

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

When you work on WordPress themes regularly, then it’s most likely greatest to familiarize your self with these default WordPress generated CSS cheat sheet. Just lately whereas engaged on a customized theme mission, we discovered a must customise sure objects primarily based on totally different pages. WordPress has this stuff referred to as physique lessons which outputs the category web page, page-template-{filename} and page-id-{quantity}. We couldn’t use page-id-{quantity} as a result of web page IDs change from growth to deployment. We additionally didn’t wish to create a customized web page template with repetitive code. We knew that we will maintain one factor the identical on all of those pages which had been page-slugs, so we determined so as to add web page slugs in physique class which allowed us to do all of the customizations we wished with none problems. On this article, we are going to present you find out how to add web page slug in physique class of your WordPress themes.

As a result of it is a theme-specific code, we advocate that you just put it in your theme’s features.php file.

1
2
3
4
5
6
7
8
9
//Web page Slug Physique Class
operate add_slug_body_class( $lessons ) {
international $publish;
if ( isset( $publish ) ) {
$lessons[] = $publish->post_type . '-' . $publish->post_name;
}
return $lessons;
}
add_filter( 'body_class', 'add_slug_body_class' );

Now you’ll begin seeing a brand new physique class being outputted like this: page-{slug}. Use that class to override your default kinds and customise components for particular pages.

For instance, if you happen to had been attempting to switch a div with widgets class. You may have your css like this:

1
2
#sidebar .widgets{background: #fff; shade: #000;}
.page-education #sidebar .widgets{background: #000; shade: #fff;}

Download The WPSaviour App Now

Related posts
Tips

Simplify Your Online Presence With WordPress: Themes, Plugins, Products and Services

Tips

Buying WordPress Themes The Smart Way

Tips

WordPress Theme Panel Options Frameworks

Tips

WordPress Child Theme Complete Guide

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro