Keep your body classy

5/5 - (209 votes)

As with Customizing the login form and adding a custom logo, a more specific selector takes precedence over any general one. This is obviously more CSS than WordPress. However, to manipulate WordPress functionality here, we need to first understand how Cascading Stylesheets work.

As a web designer, you’ll find yourself needing to target and cascade your styles based first on what class is assigned to the body element of your WordPress theme and then riding that sweet cascading stylesheet wave all the way down to your desired selector.

Now back to your regular scheduled WordPress. If somewhere in your CSS you have something like the following:

body .my-element {
  background: blue;
}

but you’d like for your dear .my-element background to be red when the body element has the class of “red-body” then you need to find a way to inject said “red-body” class into the body.

Luckily this is easy and thankfully, the purposes for it are not as mundane as the need to paint backgrounds red.

For this rather mundane purpose though, all you need to do is add your desired class right into the body_class() like so:

<body <?php body_class('red-body'); ?>>

With that in place, every time the body element is output in your theme — along with the other numerous core-defined CSS classes — WordPress will include your ‘red-body‘ class. Having access to this, and needing to overwrite the previous styling of the the class, you’d include in your CSS file something specific like this:

body.red-element .my-element {
  background: red;
}

This makes sure that your belovéd element bearing the class of my-element is always red whenever the body element has a class of red-element.

If you’ve split your WordPress theme into manageable template parts, you’ll likely have a header.php that contains your HTML <head> and perhaps the top parts of your overall theme.

In this template part you’ll have the beginning of your HTML <body> which WordPress suggests you afford the body_class(). When all’s said and done, for the body element anyway, you’ll likely have something that looks like this:

<body <?php body_class(); ?>>

Ever the web designer’s wet dream, and whether you know it or not, your body class, upon being given access to the body_class() becomes infinitely more valuable to you.

Now, each time you load a specific page using a defined page template or view a category or tag page, etcetera, etcetera, there’ll be WordPress core-generated CSS classes inserted into the <body> class.

Depending on your implementation, there’ll likely be a CSS class for the specific page id. Another based on the status of your visit. i.e., whether you’re logged in or not. Another for the page template, etc.

Seeing Red

If the WordPress defined classes do nothing for you, its easy to manipulate the body_class() to do your own bidding. The first is a rather manual approach.

Let’s say that whenever the body element has a class of red-element you want this element to have a red background. Whatever the existing markup defining this, you know you need to have CSS that defines this, explicitly. In your style.css you’d have the following already in place:

body.red-element .my-element {
  background: red;
}

Then, in whatever template that has the relevant markup for the body element, you’d adjust your body_class() to add the red-element to the finally output classes. like so:

<body <?php body_class('red-element'); ?>>

We’re obviously only covering this because its a possibility but its a thoroughly manual approach. Functions, baby, functions!! You forever want to find ways to make WordPress infinitely easy and repeatable and replicable and adjustable. Putting things into functions and where possible into functions that allow conditionals is the way to go.

So you want your my-element to have a red background only when the body element has a class of red-element. Not a problem. But what if you want something else for when you’re on a page using the contact.php page template? Or when the site for which you’re designing the theme has multiple authors. Or when, taking advantage of the latest and greatest WordPress functionality, the site has a header image. What if things need to behave differently if we’re on the search results page. Or when we have a definitively set front page. What if a very specific theme modification has been made that calls for things to look different, vastly different on the front-end. What then?

Then, we crack open the functions.php and define a function for this.

Defining the function

We don’t want a conditional (if/else) soup here so for the sake of this example, lets define 3 specific ground rules:

When the red-page.php template is used, we want to include a red-bg-elements CSS class in the body_class().
If the user sets a header image, we append a header-image-in-use class.
If we’re viewing a single entry page that is NOT the user-defined static front page, let’s include a class of no-static-single.

With our criteria defined, this is what our function would look like:

function butter_conditional_body_classes( $classes ) {
  // #1
  if ( is_page_template( 'red-page.php' )  ) {
    $classes[] = 'red-bg-elements';
  }
  // #2
  if ( get_header_image() ) {
    $classes[] = 'header-image-in-use';
  }
  // #3
  if ( is_singular() && ! is_front_page() ) {
    $classes[] = 'no-static-single';
  }
  return $classes;
}
add_filter( 'body_class', 'butter_conditional_body_classes' );

With the above function, you can conditionally stuff into the <body> element any classes you need.

With the above in place, you can easily target any element you want and style it as needed in the CSS.

Nothing needed on the front-end with this function. The WordPress body_class() filter handles adding our conditionals and classes, etc.