Slug as body class
Add a unique class to the body tag for easy styling of individual pages
The facts
- Rating
- 5★ from 6
- Active installs
- 100+
- Price
- Free
- Last updated
- 11 Aug 2014
- Added
- Aug 2014
- Requires WP
- 3.7
- Tested up to
- WP 3.9.40
- Downloads
- 3,585
Our analysis
AI-assistedSlug as Body Class is a WordPress plugin that adds a unique class to the body tag of individual pages and posts. The class is formatted as '[post_type]-[post_name]', allowing for targeted CSS styling based on the specific content. For example, a page with the slug 'about' will have the class 'page-about'.
This plugin is suitable for users who want to apply custom CSS styles to specific pages or posts without affecting the entire site. It does not currently add slugs for archive and category pages, but users can request this feature.
Best for: This plugin is best for WordPress users looking to customise CSS for individual pages or posts.
What it does well
- ✓Adds unique classes to body tags for custom styling
- ✓Formatted as '[post_type]-[post_name]' for easy identification
- ✓Free to use from the WordPress.org directory
Where it falls short
- •Does not add slugs for archive and category pages
- •Limited information on additional features
Verdict
Slug as Body Class provides a straightforward solution for applying specific styles to content. However, its limitations regarding archive and category pages may affect some users.
From the developer
Carlo Roosen's own description of Slug as body class, lightly tidied.
Want to have css styling rules for individual pages or posts?
This plugin adds a unique class to the body tag of the html. The added class is formatted as “[post_type]-[post_name]”. For a page with slug (= post_name) “about” it will be “page-about”, and for a post named “today” it will be “post-today”. Currently no slug will be added for archive and category pages. Please let us know if you need this and we will add it.
example
Say you want to have a red title on your contact page. With this plugin all you need to do is add this line to your css:
body.page-contact h1 {
color : red;
}
Acknowledgements
Thanks to Damiaan van Vliet for this plugin idea http://www.albuswebdesign.nl/.