The mother of all WordPress body tags
March 2nd, 2010It took us a long time to perfect this gorgeous body tag, it includes everything you’d want as a front end developer, it inserts the name of the page you’re on into the class attribute, it adds the pages parent as the id, works on home, 404, search, tag, and category pages as well.
NOTE: we’ve updated the code to also show what template you’re using, so if you have an old version, grab it again below
NOTE: In order for this to work you’ll need to set your permalink structure to something that uses post names in the urls instead of numbers. You set that in Settings > Permalinks. We use /%year%/%monthnum%/%category%/%postname%/
So without further ado, here’s it is:
<body id="<?php $post_parent = get_post($post->post_parent); $parentSlug = $post_parent->post_name; if (is_category()) { echo "category-template"; } elseif (is_archive()) { echo "archive-template"; } elseif (is_search()) { echo "search-results"; } elseif (is_tag()) { echo "tag-template"; } else { echo $parentSlug; } ?>" class="<?php global $wp_query; $template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true ); $tn = str_replace(".php", "", $template_name); echo "template-".$tn." "; ?><?php if (is_category()) { echo 'category'; } elseif (is_search()) { echo 'search'; } elseif (is_tag()) { echo "tag"; } elseif (is_home()) { echo "home"; } elseif (is_404()) { echo "page404"; } else { echo $post->post_name; } ?>">
And in case you want to see what’s going on, here it is broken down onto multiple lines. (Use the above example in your templates, this expanded view is just for reference)
<body
id="
<?php
$post_parent = get_post($post->post_parent);
$parentSlug = $post_parent->post_name;
if (is_category()) { echo "CategoryPage"; }
elseif (is_search()) { echo "SearchResults"; }
elseif (is_tag()) { echo "Tag"; }
else { echo $parentSlug; }
?>"
class="
<?php global $wp_query;
$template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
$tn = str_replace(".php", "", $template_name); echo "template-".$tn." "; ?
>
<?php
if (is_category()) { echo 'category'; }
elseif (is_search()) { echo 'search'; }
elseif (is_tag()) { echo "tag"; }
elseif (is_home()) { echo "home"; }
elseif (is_404()) { echo "page404"; }
else { echo $post->post_name; }
?>"
>
8 Comments
so would this create a class for each page, being the page name… so I could write up css for each page class with a different background image for each … say…
Tricia, That’s one of the things it does, it also makes it easy to do the same thing within a section. So say if you had a page called ‘info’ and in it you had a ‘location’ sub-page and also a ‘contact’ sub-page, everything with the parent of ‘info’ gets applied the about info id, that way you could have a background image for all pages within your ‘info’ section and still target the ‘contact’ page through the class… make sense?
yes, very nice indeed, thanks!
It’s fucking brilliant. I’m using with the “Simplest” theme for a weird combination of super-powerful, yet minimal code. Thanks for sharing this bit of awesomeness!
always happy to distribute awesomeness !
I’m super excited about the possibilities this code offers! I’m just not quite sure how I’d incorporate the styles in my CSS. Let’s say I had site with a “Courses” page and a subsequent sub-page of: “Desktop Training”. Would the styles in my style.css look like this:
#courses { blahblah: blah; }
#desktop-training { moreblah: blabla; }
Or have some other format?
Sorry if this is obvious, I really have no idea how PHP works.
Thanks so much for sharing!
Yeah basically that’s it, you could just view the source of your page and see the class and ID that gets put on the body, you can target either of them in your css.
great trick. was about to conjure something like this myself, and came across your wonderfully thoughtful solution while doing some research. thanks for sharing!
3 Trackbacks
[...] of features:• Custom template examples and 404 & 503 error pages • It Includes the The mother of all WordPress BODY tags • Support for WordPress’ new new menu system • Modernizr (HTML5 feature detection) and [...]
[...] this framework, you get custom templates (including 404 and 503 error pages), the mother of all WordPress body tags, support for WordPress’ new menu system, Modernizr (i.e. HTML5 feature detection) and an HTML5 [...]
[...] Custom template examples and 404 & 503 error pages • It Includes the The mother of all WordPress BODY tags • Support for WordPress’ new new menu system • Modernizr (HTML5 feature detection) and HTML5 [...]