Plugin Directory

Add URL Slugs as Body Classes

Add URL Slugs to `body` Class

What does this do, exactly?

  • Additional CSS classes are added to the HTML body tag so you can easily add custom CSS and/or JS to Posts or Pages. Basically anything that appears in the URL after your domain name, will be split on the "/", then pushed back together separated by spaces in the HTML's body tag.

What classes?

  • Say you created a Post that could be found at the following URL: http://www.example.com/2012/02/24/wordpress-plugin-add-url-slugs-as-body-classes/ That page's body tag would have at least these classes: 2012 02 24 wordpress-plugin-add-url-slugs-as-body-classess

    It gets much stronger when you start thinking about Categories or nested Pages, because a Category page like: http://www.example.com/category/wordpress/ get these additional CSS classes: category wordpress This would allow you to add custom CSS and/or JS to all Category pages, or even just the WordPress Category page!

    Or a nested Page that could be found at this URL: http://www.example.com/movies/star-trek/wrath-of-khan/ would get these additional CSS classes: movies star-trek wrath-of-khan So you could add custom CSS just for your Movies pages, other custom CSS for just the Star Trek Movies pages, and still more custom CSS for just the Wrath of Khan Star Trek Movie page.

Why would I want to do this?

  • Really only if you used some custom CSS or JS to some specific webpages. You could add custom background images, use different fonts, add sound effects, add different JS libraries, the list is limited only by your needs, really.

Requires: 3.1 or higher
Compatible up to: 4.2.5
Last Updated: 2015-5-15
Active Installs: 600+


4.7 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.