{"id":3260,"date":"2010-05-19T00:01:14","date_gmt":"2010-05-19T07:01:14","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3260"},"modified":"2010-05-19T09:26:48","modified_gmt":"2010-05-19T16:26:48","slug":"id-the-body-based-on-url","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/wordpress\/id-the-body-based-on-url\/","title":{"rendered":"ID the Body Based on URL"},"content":{"rendered":"
<?php\r\n\t$url = explode('\/',$_SERVER['REQUEST_URI']);\r\n\t$dir = $url[1] ? $url[1] : 'home';\r\n?>\r\n\r\n<body id=\"<?php echo $dir ?>\"><\/code><\/pre>\n
This would turn http:\/\/domain.tld\/blog\/home into “blog” (the second level of the URL structure).  If at the root, it will return “home”.<\/p>\n
Here is an alternate method:<\/p>\n
<?php\r\n       $page = $_SERVER['REQUEST_URI'];\r\n       $page = str_replace(\"\/\",\"\",$page);\r\n       $page = str_replace(\".php\",\"\",$page);\r\n       $page = str_replace(\"?s=\",\"\",$page);\r\n       $page = $page ? $page : 'index'\r\n?><\/code><\/pre>\n
This would turn http:\/\/domain.tld\/blog\/home into “domaintldbloghome”, which is far more specific. It also will remove “.php” file extensions and the default WordPress search parameter.<\/p>\n
More Secure Method<\/h3>\n
function curr_virtdir($echo=true){\r\n        $url = explode('\/',$_SERVER['REQUEST_URI']);\r\n        $dir = $url[1] ? $url[1] : 'home'; \/\/ defaults to this if in the root\r\n        $dir = htmlentities(trim(strip_tags($dir))); \/\/ prevent injection into the DOM through this function\r\n        if ($echo) echo $dir;\r\n        return echo $dir; \/\/ ie. curr_virtdir(false)\r\n}\r\nfunction get_curr_virtdir(){\r\n        curr_virtdir(false);\r\n}<\/code><\/pre>\n
Returns the “middle” directory value:<\/p>\n
On https:\/\/css-tricks.com  it would return “home<\/strong>”
\nOn https:\/\/css-tricks.com\/snippets it would return “snippets<\/strong>”
\nOn https:\/\/css-tricks.com\/forums\/viewforum.php?f=6 it would return “forums<\/strong>”<\/p>\n
The strip_tags() and htmlentities() functions prevent malicious code from being insterted into the URL and ran, e.g. <\/p>\n
<body id=\"foo\"><script>alert(\"Booo\");<\/script><\/code><\/pre>\n
Usage for IDing the body:<\/p>\n
<body id=\"<?php curr_virtdir(); ?>\"><\/code><\/pre>\n
Other usage:<\/p>\n
<?php\r\n  if ( get_curr_virtdir() == \"store\" ){\r\n    echo \"Welcome to our awesome store !\";\r\n  } elseif ( get_curr_virtdir() == \"home\" ){\r\n    echo \"Welcome home :-)\";\r\n  } else {\r\n    echo \"Welcome on some other page\";\r\n  }\r\n?><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
<?php $url = explode(‘\/’,$_SERVER[‘REQUEST_URI’]); $dir = $url[1] ? $url[1] : ‘home’; ?> <body id=”<?php echo $dir ?>”> This would turn http:\/\/domain.tld\/blog\/home into “blog” (the second level of the URL structure). If at the root, it will return “home”. Here is an alternate method: <?php $page = $_SERVER[‘REQUEST_URI’]; $page = str_replace(“\/”,””,$page); $page = str_replace(“.php”,””,$page); $page = […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3229,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":259400,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/dir\/","url_meta":{"origin":3260,"position":0},"title":":dir()","date":"August 23, 2017","format":false,"excerpt":"The :dir() pseudo-class in CSS allows elements to be selected based on the direction of the language, as determined in the HTML markup. There are really only two directions language can flow in a document, which are left-to-right and right-to-left. Think of this as a way to style elements that\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14047,"url":"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/","url_meta":{"origin":3260,"position":1},"title":"direction","date":"September 5, 2011","format":false,"excerpt":"The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row. .main-content { direction: rtl; \/* Right to\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15804,"url":"https:\/\/css-tricks.com\/snippets\/css\/reversing-text\/","url_meta":{"origin":3260,"position":2},"title":"Reversing Text","date":"December 29, 2011","format":false,"excerpt":"For right-to-left languages, you can swap the default left-to-right layout in most browsers simply through the dir attribute. text in right-to-left language You can use that attribute on any text element, it doesn't have to be the body. Likewise, you can swap it with just CSS: body { unicode-bidi:bidi-override; direction:rtl;\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3761,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-diagnostics\/","url_meta":{"origin":3260,"position":3},"title":"CSS Diagnostics","date":"September 4, 2009","format":false,"excerpt":"Find mistakes in HTML and highlight the crap out of them. \/* Empty Elements *\/ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px dotted yellow !important; } \/* Empty Attributes *\/ *[alt=\"\"], *[title=\"\"], *[class=\"\"], *[id=\"\"], a[href=\"\"], a[href=\"#\"] { border: 5px solid yellow !important; } \/* Deprecated Elements\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154321,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/19-2\/","url_meta":{"origin":3260,"position":4},"title":"#19: It’s Just JavaScript","date":"October 29, 2013","format":false,"excerpt":"One thing I want to make absolutely clear in this series is that none of us should be anti vanilla JavaScript. \"Vanilla\" meaning \"raw\" or \"native\" JavaScript. JavaScript that runs in the browser without any frameworks or libraries or anything else. In fact, if this isn't obvious, jQuery itself is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317104,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset\/","url_meta":{"origin":3260,"position":5},"title":"inset","date":"July 17, 2020","format":false,"excerpt":"The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3260"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3260"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3260\/revisions"}],"predecessor-version":[{"id":3293,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3260\/revisions\/3293"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3260"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}