WordPress Plugin: Add URL Slugs to <body> Class

Funny, I had built this some time back for my own personal use, thought it could be useful to others, planned on pushing it to the WordPress Repository, then apparently never got around to it…

Anyhow, another quick and simple WP plug-in. This one deconstructs a page’s URL and, after filtering out the site’s domain name, adds anything separated by a “/” as an additional class to the <body> tag.

So, if your page’s URL is:
https://aarontgrogg.com/2012/02/24/wordpress-plugin-add-url-slugs-as-body-classes/
Your page’s <body> tag would have at least these classes:
"2012 02 24 wordpress-plugin-add-url-slugs-as-body-classess"

While the above example isn’t all that useful, it gets a little stronger when you get to category pages, like…
https://aarontgrogg.com/category/wordpress/
which would give you:
"category wordpress"
or Pages, like…
https://aarontgrogg.com/contact/
which would give you:
"contact"
or even better, if we use nested Pages or Custom Post Types, like…
https://aarontgrogg.com/movies/star-trek/wrath-of-khan/
which would give you:
"movies star-trek wrath-of-khan"

Now start thinking about how CSS can come into play when you suddenly have those additional classes on your <body> tags…

Downloadable now from the WordPress Repository:
http://wordpress.org/extend/plugins/add-url-slugs-as-body-classes/

Happy WordPressing,
Atg

8 Responses to WordPress Plugin: Add URL Slugs to <body> Class

  1. Mimi says:

    Hello, and thank you for this plugin!! It was exactly what I needed. I have a question however.

    It is working fine on this page:

    http://pechepassion.ca/boutique/produits/categorie/leurresouples/

    Specifically I needed “boutique” as a body class and it works perfectly.

    However, on another page… http://pechepassion.ca/boutique/panier/ it is NOT including the body class…neither “boutique” nor “panier” are showing up in the body classes although that is clearly in the URL. Can you help?

    Thank you so much!

    • aarontgrogg says:

      @Mimi:

      Hmm, a good question, strange that it works on all other pages, including this one:
      http://pechepassion.ca/contact/
      which gives you the body class of:
      page page-id-36 page-template-default contact

      Makes me wonder if there is anything special going on with that page, like any special plug-in or shortcode that might be interfering with this plug-in? Certainly the URL structure is different from most other page, like this category page:
      http://pechepassion.ca/category/promotions/

      If you find the issue, would you please let me know what it is, so I can try to resolve it within the plug-in, in case any others have a similar issue?

      Thanks,
      Atg

      • Mimi says:

        Thank you…NO idea. I couldn’t figure out what the issue was and I don’t know how to get to “body_class” to edit that myself so I created a workaround by adding an ID on the body…goes something like this:

        <body id="">

        That is working now in http://pechepassion.ca/boutique/panier/.

        Rather inelegant…my PHP is mostly nonexistent…but it allowed me to target the body tag of the pages in /boutique/ (based on URL) in my CSS so it does what I need it to do. Your plugin was PERFECT but I could not find the issue with it so I just coded it myself. However…that solution might help if you ever find anyone else has issues with it. Thanks for the quick response!

        • aarontgrogg says:

          Another user had an issue that was related to a gallery plug-in they were using, so I imagine it is something similar.

          Glad you were able to find a solution, however inelegant… :-)

          So, my guess is that it has something to do with some other plug-in,maybe try Deactivating other plug-ins one-by-one and refreshing the page, see if the page class suddenly jumps in as expected?

          But, please, if you ever do find anything, please let me know so I can add the solution.

          Thx again,
          Atg

  2. Mimi says:

    wow…that code didn’t come out well!!

    This was the PHP:


    $page = $_SERVER['REQUEST_URI'];
    //echo stripslashes($page); // /boutique/produits/categorie/leurresouples/
    $position = strpos($page, "boutique");
    if ($position == 1)
    echo "boutique";
    else
    echo "regpage";

    to name the ID in the body tag.

  3. David says:

    Very good blog! Do you have any suggestions for aspiring writers?
    I’m planning to start my own site soon but I’m
    a little lost on everything. Would you advise starting with
    a free platform like WordPress or go for a paid option? There are so many
    choices out there that I’m totally overwhelmed .. Any ideas? Cheers!

  4. It doesn´t seem to work with WordPress 3.8 ? I installed the plugin but my body class didnt change :(

    • aarontgrogg says:

      Hi, Jens, have you tried with 3.8.1? I just did, with version 1.1 of the plugin, and it worked fine…

      Are you running any other plugins that might be interfering? What theme are you using?

      Let me know if you still have problems,
      Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.