{"id":17078,"date":"2012-02-25T15:14:25","date_gmt":"2012-02-25T15:14:25","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/add-url-slugs-as-body-classes\/"},"modified":"2015-05-15T20:26:27","modified_gmt":"2015-05-15T20:26:27","slug":"add-url-slugs-as-body-classes","status":"publish","type":"plugin","link":"https:\/\/sq-xk.wordpress.org\/plugins\/add-url-slugs-as-body-classes\/","author":4371718,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.3","stable_tag":"1.3","tested":"4.2.39","requires":"3.1","requires_php":"","requires_plugins":"","header_name":"Add URL Slugs as Body Classes","header_author":"Aaron T. Grogg","header_description":"","assets_banners_color":"","last_updated":"2015-05-15 20:26:27","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"http:\/\/aarontgrogg.com\/2012\/02\/24\/wordpress-plugin-add-url-slugs-as-body-classes\/","header_author_uri":"http:\/\/aarontgrogg.com\/","rating":4.8,"author_block_rating":0,"active_installs":700,"downloads":6648,"num_ratings":5,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":"1","5":"4"},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.1","1.3"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[2858,1241],"plugin_category":[],"plugin_contributors":[83694],"plugin_business_model":[],"class_list":["post-17078","plugin","type-plugin","status-publish","hentry","plugin_tags-body","plugin_tags-class","plugin_contributors-aarontgrogg","plugin_committers-aarontgrogg"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/add-url-slugs-as-body-classes.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n

This plug-in takes the URL, chops it into pieces, and adds each \"piece\" as an additional\nclass to the body<\/code> tag.<\/p>\n\n

Meaning, if your page's URL is:\nhttp:\/\/www.example.com\/2012\/02\/24\/wordpress-plugin-add-url-slugs-as-body-classes\/\nYour page's body<\/code> tag would have at least these classes:\n 2012 02 24 wordpress-plugin-add-url-slugs-as-body-classess<\/p>\n\n

It gets much stronger when you start thinking about Categories or nested Pages:\n http:\/\/www.example.com\/category\/wordpress\/\nwhich would add:\n category wordpress\nwhile:\n http:\/\/www.example.com\/movies\/star-trek\/wrath-of-khan\/\nwould add:\n movies star-trek wrath-of-khan<\/p>\n\n

This allows you to very easily add custom CSS and\/or JS to these pages based on these new CSS classes.<\/p>\n\n

Please let me know if you have any questions\/suggestions\/thoughts,\nAtg\nhttp:\/\/aarontgrogg.com\/\naarontgrogg@gmail.com<\/p>\n\n\n

    \n
  1. Download the ZIP<\/li>\n
  2. Unzip the ZIP<\/li>\n
  3. Copy\/paste the unzipped files into your WP plug-in directory (\/wp-content\/plugins\/<\/code>)<\/li>\n
  4. From within WP's Plugin Admin panel, Activate the plug-in<\/li>\n
  5. Write some wicked CSS to amaze your friends and befuddle your enemies...<\/li>\n<\/ol>\n\n\n
    \n
    What does this do, exactly?<\/dt>\n
      \n
    • Additional CSS classes are added to the HTML body<\/code> tag so you can easily add custom CSS and\/or JS to Posts or\nPages. Basically anything that appears in the URL after your domain name, will be split on the \"\/\", then \npushed back together separated by spaces in the HTML's body<\/code> tag.<\/li>\n<\/ul><\/dd>\n
      What classes?<\/dt>\n
        \n

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

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

        Or a nested Page that could be found at this URL:\n http:\/\/www.example.com\/movies\/star-trek\/wrath-of-khan\/\nwould get these additional CSS classes:\n movies star-trek wrath-of-khan\nSo you could add custom CSS just<\/em> for your Movies pages, other custom CSS for just<\/em> the Star Trek Movies pages, \nand still more custom CSS for just<\/em> the Wrath of Khan Star Trek Movie page.<\/p><\/li>\n<\/ul><\/dd>\n

        Why would I want to do this?<\/dt>\n
          \n
        • Really only if you used some custom CSS or JS to some specific webpages. You could add custom background images, \nuse different fonts, add sound effects, add different JS libraries, the list is limited only by your needs, really.<\/li>\n<\/ul><\/dd>\n\n<\/dl>\n\n\n

          1.3<\/h4>\n\n

          2015-05-15:\n* Tested & verified in WP 4.2.2, and added a few FAQs<\/p>\n\n

          1.1<\/h4>\n\n

          2013-01-11:\n* Tested & verified in WP 3.5<\/p>\n\n

          1.0<\/h4>\n\n

          2012-02-24:\nWell, this is the first version, so... here it is!<\/p>","raw_excerpt":"Add URL Slugs to body Class","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/17078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=17078"}],"author":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/aarontgrogg"}],"wp:attachment":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=17078"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=17078"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=17078"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=17078"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=17078"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=17078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}