Advanced WordPress Targeting with body_class_plus()

Jeff Starr — Mon, 17 Aug 2009 03:56:30 +0000

Since WordPress 2.8, we can target specific types of page views with CSS using the new body_class() tag. Designed for use within the element, body_class() outputs various class attributes according to the current type of page view. This makes it easy to apply page-specific styling such as current-page navigation highlighting and other nifty CSS tricks.

Strengths and shortcomings of the `body_class()` tag

For the uninitiated, here is a quick review of the body_class() tag. When used as follows:

The body_class() tag will output the following class names depending on current page type:

.home — class name output for the home page
.archive — class name output for any archive page
.category — class name output for any category page
.search — class name output for any search page
.tag — class name output for any tag archive page
Plus many more..

So, for example, when you are logged in to WordPress and viewing your blog’s home page, the body_class() tag will result in something like this:

Or, if you were logged out and visiting your “Asides” category archive, your source code would include this:

This functionality enables you to, say, apply styles to the

heading elements on all of your search pages:

body.search h1 {
	border-bottom: 1px solid #ffff99;
	color: #ffff99;
	}

Likewise, the class names output by the body_class() tag make it possible to target conditionally any element on any type of page, thereby greatly increasing the stylistic flexibility of WordPress. Yet despite its awesomeness, body_class() is essentially an “all-or-nothing” proposition. We can apply styles to all category pages, all search pages, all page pages, and so on. We can even use CSS chaining to target all category views when the user is logged in:

.home.logged-in { border: 100px solid red; }

This is powerful, yes, but what if we want to target, say, all categories that include the term “services” in the category slug? Sure, we could declare each of them individually, like this:

.category-coffee-service { color: red; }
.category-brunch-services { color: red; }
.category-dinner-services { color: red; }
.category-snacks-services { color: red; }
.category-drinks-services { color: red; }
.category-inside-services { color: red; }
.category-design-services { color: red; }
.category-health-services { color: red; }
.category-services-info { color: red; }
.category-services-data { color: red; }
.category-services-cost { color: red; }

But that’s pretty inefficient. Plus, what if the user/client needed to create new “services-related” categories? Have fun explaining to them how edit the CSS file with the appropriate rules.

We could, I suppose, use CSS-3’s wildcard substring-matching attribute-selector:

body[class*="services"] { color: red; }

Definitely cleaner, but there a significant number of browsers that do not support CSS 3, so this is less than an ideal solution.

A better solution would be to add pattern-matching functionality to the body_class() tag. After all, body_class() keeps track of just about every possible type of page-view available on your site. So why not filter the output of body_class() for any instances of “services” and output a specific class-attribute for all matching pages. This would allow us to target and apply styles to virtually any subset of page-views, including those new “services-related” categories for our client site. Say “goodbye” to manual code updating and say “hello” to automated advanced targeting with body_class_plus().

Advanced targeting with `body_class_plus()`

The body_class_plus() tag extends the functionality of body_class() by using PHP’s output buffering to conditionally evaluate its contents. This functionality enables us to pattern-match for specific phrases, and execute conditional operations based on the contents of body_class().

Here is the body_class_plus() function that may be placed in your functions.php file:

Update: There is a new & improved version of this code available via plugin!

To call this function in your theme template, include the following tag in the element of your choice (e.g., within the element):

This is a exemplified version of the body_class_plus() function that enables us to target and apply specific class attributes to any page or category containing the following terms in the URL/page-slug:

“services” — will apply class="services"
“products” — will apply class="products"
“business” — will apply class="business"
“pleasure” — will apply class="pleasure"

This makes it easy to match specific groups of categories, pages, posts, or any combination thereof. Even better, the body_class_plus() function makes it possible to do more than apply classes to targeted page types. In addition to, or instead of, applying classes to specific groups of pages, you can implement any type of functionality desired. For example, you could display template tags, echo content, or execute custom scripts depending on page type. The possibilities are endless.

Download the plugin

If custom functions aren’t your thang, and you would rather implement this functionality via plugin, you can grab it here:

body-class-plus_v02.zip (latest version)
body-class-plus_v01.zip (original release)

Thanks to Peter Kahoun for contributing his expertise and improving the functionality of this plugin.

Take-home message

The take-home message is that the body_class_plus() function extends the functionality of the body_class() tag to target and apply styles to any particular subset or combination of page types. Further, the body_class_plus() function takes body_class() beyond the realm of CSS, making it possible to apply template tags, PHP, and other scripts to virtually any custom-defined set of pages and page types.

Complete list of body_class() attribute values

Here is a complete list of the available classes for the body_class() tag:

rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-(id)
attachmentid-(id)
attachment-(mime-type)
author
author-(user_nicename)
category
category-(slug)
tag
tag-(slug)
page-parent
page-child parent-pageid-(id)
page-template page-template-(template file name)
search-results
search-no-results
logged-in
paged-(page number)
single-paged-(page number)
page-paged-(page number)
category-paged-(page number)
tag-paged-(page number)
date-paged-(page number)
author-paged-(page number)
search-paged-(page number)

For more ways to dynamically set body IDs, check out my article, 9 Ways to Set Dynamic Body IDs via PHP and WordPress.

Unique Body ID’s for your Pages

Chris Coyier — Sat, 30 May 2009 16:46:51 +0000

There are many reasons you might want to get a unique ID for your tag. Let’s say you want your header elements to be a different color on your About page, you could style:

h3 { color: blue; }
body#about h3 { color: red; }

But how do you get that ID on the About page, but not on any other page? If you have your permalinks set up to show the page name, like http://yoursite.com/about/, you can use PHP to extract the “about” part of that URL.

Here is the magic:

Digging into WordPress » body