The mother of all WordPress body tags

March 2nd, 2010

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: 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 "CategoryPage"; } elseif (is_search()) { echo "SearchResults"; } elseif (is_tag()) { echo "Tag"; } else { echo $parentSlug; } ?>" class="<?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
		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; }
		?>"
>

Leave a Reply

Add a new comment
10 Responses to “The mother of all WordPress body tags”

  1. Tricia Kennedy says:
    August 16, 2011 at 6:55 pm

    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…

    Reply
    • mimoymima says:
      September 20, 2011 at 12:31 am

      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?

      Reply
  2. 10 HTML5-Ready Blank, Bare-Bones and Naked Themes for Wordpress says:
    October 7, 2011 at 7:02 am

    [...] 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 [...]

    Reply
  3. Matth says:
    October 13, 2011 at 9:10 pm

    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!

    Reply
  4. Free WordPress Themes: 2011 Edition | Designer Malaysia says:
    October 23, 2011 at 12:52 pm

    [...] 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 [...]

    Reply
  5. Jay says:
    November 9, 2011 at 1:15 am

    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!

    Reply
    • mimoymima says:
      November 25, 2011 at 11:02 pm

      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.

      Reply
  6. john says:
    November 22, 2011 at 1:04 pm

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

    Reply
Enable Javascript