If you’ve done much theme development, you’ll know how handy it is to be able to add specific classes to the <body> tag depending on which page is being viewed. Since WordPress version 2.8, that’s a simple thing to do. That version added a function called ‘body_class()‘ which, used in conjunction with the correct action, lets us easily add new classes whenever we need them, with a few lines in the theme’s functions.php file.
One of the biggest advantages to using this function/action method is that it keeps the logic out of the header.php template file, giving us cleaner coding in the template, and allowing us to split out appearance/function even more.
Using the body_class() function
Using the body_class() function is easy – write a function to add a class or classes depending on certain conditions, then ‘hook’ that function into the body_class action. (As always, a quick look at the WordPress Codex entry for body_class() can be helpful.)
One note – your theme must be coded to handle the body class function. Check the theme’s “header.php” file, look for the <body> tag. It needs to look like this:
<body <?php body_class($class); ?>>
(i.e., the tag has the call to the body_class() function). If it isn’t there, add it.
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
$classes[] = 'my-custom-class';
return $classes;
}
Just adding a class like that wouldn’t do us a lot of good, though. We need some conditions, which we’ll add using WordPress conditional tags.
Adding a class to a specific page by page slug:
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
if ( is_page( 'sample' ))
$classes[] = 'my-custom-class';
return $classes;
}
Adding a class to a specific page by page ID:
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
if ( is_page( '1' ))
$classes[] = 'my-custom-class';
return $classes;
}
Adding a class to a specific category page, by category slug:
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
if ( is_category( 'custom-category' ))
$classes[] = 'my-custom-class';
return $classes;
}
Or, we can get a little more complicated…
Adding a class to specific post, but only if that post is a ‘video’ post (assuming you are using custom post types):
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
global $post;
if ( 'video' == $post->post_type AND 'my-post' == $post->post_name )
$classes[] = 'my-custom-class';
return $classes;
}
Do you need to drill down to a very specific page/post?
## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
global $post;
$classes[] = $post->post_name;
return $classes;
}
You’re really only limited by your imagination when it comes to adding custom post types. You can use any of the WordPress Conditional tags, you have access to the $post object for specific properties – the sky is the limit.
{ 0 comments }
