You are here: Home » Blog Design » Using the WordPress body_class Function to Apply Custom CSS Based on Conditions

Using the WordPress body_class Function to Apply Custom CSS Based on Conditions

Yesterday I spent a few hours writing a PHP script for a commenter that would generate an HTML element based on the condition that the visitor was either on the home page or not.  The idea was to create a custom background only for the frontpage with a div layer that wrapped around everything within the body tag.

After I completed the script I thought about using a conditional statement to replace the body tag (with one that had its own ID) rather than outputting a div tag in two places (in header.php and footer.php). I took a look at the documentation for the template tag WordPress 2.8+ blogs use in place of the body tag (<?php body_class( $class ); ?>). What followed was a facepalm of epic proportions.

It looked something like this:

Except for the fact that I am not a fat guy, my desk was not clean and my forehead was dripping with blood afterwards.

It turns out that the nifty body_class function can do exactly what I intended and more with virtually no coding involved.

What does the body_class function do?

The body_class function (which replaces the standard body tag on all WordPress 2.8+ blog themes) generates body classes based on certain conditions. The conditions include things like:

• Location (whether the user is viewing the home page, single post, archive or a regular page)
• Whether a user is logged in or logged out
• The date of a post
• The ID of a post
• A tag, author or category
• The page number (on paginated posts)

And the list goes on and on (check out the official template tag page in the WordPress Codex for more).

So what does that all mean?

If you know anything about CSS, you will understand that classes are a way of identifying HTML elements (like the body tag) and targeting them with specific styles in your style sheet. That means that you can create a new CSS style for any condition that the body_class function supports.

Let’s say, for example, that you want to change the background of only the frontpage of a blog. All you need to do is add a style in style.css for the condition that a user in on the frontpage. The body_class function will automatically generate a custom class only when users are on the frontpage. Here is how your style will look in style.css:

body.home {
background-color: #000000;
}

**Note – You can access your style.css by clicking on the Editor button underneath the Appearance tab in the WordPress control panel. Stylesheet (style.css) will be clickable in the right-hand sidebar of the Edit Themes page.

You now have a black background only on the frontpage!

Let’s say for example you (*ahem* commenter named Mark *ahem*) wanted to do a background image rather than a color. All you would need to do is add this to your style.css:

body.home {
background-image: url('images/location/path/goes/right/here.jpg');
}

And Presto! Again.

Keep in mind that the classes are not stackable. Meaning you cannot only generate a custom class for users that are on the front page and logged in. Targeting a class like body.home logged-in will not work because spaces are not acceptable characters for naming a class or ID in CSS. Believe me, I had several minor face palms before realizing that.

Photo credit: Joe Mott

Tags: coding, styles, wordpress template tags

You might like: