The mother of all WordPress body tags

It 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; }
		?>"
>


« previous postnext post »

16 Comments

  • Tricia Kennedy

    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…

    • http://www.mimoymima.com mimoymima

      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?

      • Tricia Kennedy

        yes, very nice indeed, thanks!

  • Pingback: 10 HTML5-Ready Blank, Bare-Bones and Naked Themes for Wordpress

  • Matth

    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!

    • http://www.mimoymima.com mimoymima

      always happy to distribute awesomeness !

  • Pingback: Free WordPress Themes: 2011 Edition | Designer Malaysia

  • Jay

    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!

    • http://www.mimoymima.com mimoymima

      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.

  • john

    great trick. was about to conjure something like this myself, and came across your wonderfully thoughtful solution while doing some research. thanks for sharing!

  • Pingback: blog.topwebdevelop.com » Blog Archive » 10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress

  • Pingback: Free Premium Wordpress Theme | Blog - Atozanswers

  • http://www.carolynbaggoo.com Carolyn B

    I always delete…." /%year%/%monthnum%/%category% " …. and leave the " /%postname%/ "…so the page name displays better in the url. Will this code still work if I do that?

    • http://mimoymima.com mimoYmima

      yes it will still work, you just need to use some sort of custom permalink structure, not necessarily this exact one

  • Jake Spurlock
    • http://mimoymima.com mimoYmima

      yeah we used it for a while and it has some problems which is why we wrote this… I think the main problem was that it didn't give you a class for the parent of the page you're on, but there might have been other reasons.