WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Function Reference/body class

This article is marked as in need of editing. You can help Codex by editing it.

Description

Themes have a template tag for the body tag which will help theme authors to style more effectively with CSS. The Template Tag is called body_class. This function gives the body element different classes and can be added, typically, in the header.php's HTML body tag.

Usage

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

The echoed class attribute may include one or more of the following values for the class attribute, dependent upon the pageview.

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • page-id-(page_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)
  • tax-(taxonomy name) (since 3.1)
  • term-(term name) (since 3.1)
  • admin-bar (since 3.1)

The optional argument $class may contain one or more classes to add to the class list.

Default Values

The body_class CSS classes appear based upon the pageview Conditional Tags as follows.

Front Page
If using Reading Settings for typical chronological blog post displays, the class selectors are blog home [ paged paged-n ].

If using Reading Settings for static front page displays, the class selectors are home page page-id-ID [*].

If using a post as the static front page, the class selectors are blog [ paged paged-n ]

Single Post
Single post template files and pageviews feature the class selectors: single postid-ID [ paged paged-n single-paged-n]

Page
Page template files and pageviews feature the class selectors: page page-id-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]

If Page is a parent Page: page page-id-ID page-parent [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]

If Page is a child Page: page page-id-ID page-child parent-pageid-parent-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]

Author
Author template files and pageviews feature the class selectors: archive author author-user_nicename [ paged paged-n author-paged-n ]

Category
Category template files and pageviews feature the class selectors: archive category category-slug [ paged paged-n category-paged-n ]

Tags
Tag template files and pageviews feature the class selectors: archive tag tag-slug [ paged paged-n tag-paged-n ]

Archives
Archive pageviews and pageviews feature CSS classes: archive author author-user_nicename [ paged paged-n author-paged-n ]

Archives by date feature class selectors: archive date [ paged paged-n date-paged-n ]

Search
Search template files and pageviews feature the class selectors: search search-results [ paged paged-n search-paged-n ] for find results and search search-no-results [ paged paged-n search-paged-n ] for no results found.

Attachment
Attachment template files and pageviews feature the class selectors: attachment single postid-ID attachmentid-postID attachment-mime-type

404 Page Error
404 Page Errors template files and pageviews feature the class selectors: error404

Logged-in
Login template files and pageviews feature the class selectors: logged-in

Paged/Multiple Pages
Paged, pageviews with multiple pages, template files and pageviews feature the class selectors: paged. If less than two pages paged, and if more than 2 pages paged-n page-paged-n.

Text Direction
Pages and posts with text direction, such as right-to-left, template files and pageviews feature the class selectors: rtl

Parameters

How to pass parameters to tags with PHP function-style parameters

class
(string or array) (optional) One or more classes to add to the class attribute, separated by a single space.
Default: null

Examples

Implementation

The following example shows how to implement the body_class template tag into a theme.

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

The actual HTML output might resemble something like this (the About page from a default WordPress installation):

<body class="page page-id-2 page-template page-template-default logged-in">

In the WordPress Theme stylesheet, add the appropriate styles, such as:

.page {
	    /* styles for all posts within the page class */
	    }
.page-id-2 {
	    /* styles for only page ID number 2 */
	    }
.logged-in {
	    /* styles for all pageviews when the user is logged in */

Adding More Classes

The classes are restricted to the defaults listed.

To add more classes, the template tag's parameter can be added. For example, to add a unique class to any template file:

<body <?php body_class('class-name'); ?>>

The results would be:

<body class="class-name post post-id-24">

Add Classes By Filters

You can add additional body classes by filtering the body_class function.

To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:

// Add specific CSS class by filter
add_filter('body_class','my_class_names');
function my_class_names($classes) {
	// add 'class-name' to the $classes array
	$classes[] = 'class-name';
	// return the $classes array
	return $classes;
}

To add a category class to single post pageviews and template files, add the following to the functions.php.

// add category nicenames in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');



Add Sidebar Classes

You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown? Here's a working example you can post in your themes functions.php file to add a sidebar class to the output of body_class. From: Add CSS Class to body when Sidebar is Present

add_action('wp_head', create_function("",'ob_start();') );
add_action('get_sidebar', 'my_sidebar_class');
add_action('wp_footer', 'my_sidebar_class_replace');
 
function my_sidebar_class($name=''){
  static $class="withsidebar";
  if(!empty($name))$class.=" sidebar-{$name}";
  my_sidebar_class_replace($class);
}
 
function my_sidebar_class_replace($c=''){
  static $class='';
  if(!empty($c)) $class=$c;
  else {
    echo str_replace('<body class="','<body class="'.$class.' ',ob_get_clean());
    ob_start();
  }
}

Source Code

body_class() is located in wp-includes/post-template.php.

Changelog

  • Since: 2.8

Related

See also index of Function Reference and index of Template Tags.