How to Use WordPress’ body_class Function

0

Amongst the myriad of built-in WordPress functions is body_class, which inserts CSS classes into the body tag per page that you’re on. This tutorial covers how it works, with practical examples, and a couple of functions.

In our WordPress template, we want to make our blog look good as well as make it easier for the user to navigate. This can be done in variety of ways by creating an easy to use page structure, thought out menu items, and so on.

Another good way is to change the styling of the page, category, or post that the user is on, to highlight that it may, or may not, belong elsewhere. The body_class function is a great tool that WordPress provides, and can be used to help us achieve just this.

The body_class Function

The body_class function is to be used in the body tag in the template as follows

<body <?php body_class(); >>

The body_class function, depending on the page where the user is, will echo different classes. So, in the theme’s CSS, different styles can written to target pages accordingly

As seen below, the following are tags generated by body_class for the home page of a WordPress site.

body_class inserted classes on the html body tag

Advantages of Using body_class Over Conditional Tags

To achieve different styling for different pages, conditional tags can be used. So, in your theme’s code, you can opt to choose different styles if the user is on a particular page. The major drawback is that a code change in your theme is required to change the style, this becomes very cumbersome and difficult to manage, particularly if you have to do heavy customization for different pages.

The body_class function simply applies the various classes that can be used to style the particular page. This makes the theme clean, as well as more flexible, and easy to change.

Using body_class to Change a Category’s Font

Lets change the font using the body_class of a category page. We will make the font on the Uncategorized category page bold and italic. For this, the body_class outputs the class category-<categoryname> and category-<categoryid> in the body tag.

In the TwentyEleven theme, add the following lines to style.css

body.category-uncategorized
{
	font-style:italic;
	font-weight:bold;
}

Once these are added to style.css, the font on the Uncategorized category page will appear bold and italic as follows.

2

Changing the Background for a Single Page of a Custom Post Type

WordPress has the ability to create custom post types, many sites take advantage of this feature, such as job boards, and image heavy sites, which may require more than what comes out of the box.

As these post types might be in different section of the site, you may wish to style it differently. We’re going to change the background of a single page of a custom post type. First we will create a post type ‘myproducts’ as follows.

Write the following code in functions.php. If you haven’t written functions before, there’s nothing to be afraid of, we have tackled them when before in creating a function in WordPress.

add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
	register_post_type( 'myproducts', 
		array(
			'labels' => array(
			'name' => __( 'My Products' ),
			'singular_name' => __( 'My Products' )
			),
			'public' => true,
		)
	);
} 

Once this is done you can create posts of the type ‘myproducts’ from WordPress admin.

Now, whenever a single page is displayed, WordPress echoes the classes single and single-<custompostname>. Using this we are going to change the background whenever a single page from the myproducts type has been viewed. To do that, the following code to style.css

body.single-myproducts
{
	background: #F00;
}

So whenever the single myproduct post is viewed it will look as follows.

3

The body_class Filter

WordPress also provides the body_class filter in which you can add or remove classes from body_class. The following is a function which hooks into the body_class filter and adds a class, as with above, you can add this to functions.php.

add_filter('body_class','override_body_class');
function override_body_class($classes) {
	
	$classes[] = 'new-class-to-add';
	return $classes;
}

Using the body_class Filter to Change the Layout

The TwentyEleven theme cleverly uses the body_class filter to set the layout from the theme options. This is the function which does it.

function twentyeleven_layout_classes( $existing_classes ) {
	$options = twentyeleven_get_theme_options();
	$current_layout = $options['theme_layout'];

	if ( in_array( $current_layout, array( 'content-sidebar', 'sidebar-content' ) ) )
		$classes = array( 'two-column' );
	else
		$classes = array( 'one-column' );

	if ( 'content-sidebar' == $current_layout )
		$classes[] = 'right-sidebar';
	elseif ( 'sidebar-content' == $current_layout )
		$classes[] = 'left-sidebar';
	else
		$classes[] = $current_layout;

	$classes = apply_filters( 'twentyeleven_layout_classes', $classes, $current_layout );

	return array_merge( $existing_classes, $classes );
}
add_filter( 'body_class', 'twentyeleven_layout_classes' );

Function Breakdown

  • The option from Theme Options is read
    • If the option is content-sidebar or sidebar-content, then the class two-column is added
    • If none of this is true, then the class one-column is added
  • Then, if the layout is content-sidebar, the class right-sidebar is used
    • Otherwise, the class left-sidebar is used
  • Finally, these classes are merged

Conclusion

The body_class function makes it very easy to add different styles, to different pages, in a very clean way. It’s a handy way to add some flair to your site, as well as make it a bit easier to navigate.

Share on Facebook Back to Top

Speak up! Let us know what you think.