Function Reference/body class

(重定向自Template Tags/body class
跳转至: 导航搜索 includeonlydiv style=clear:both; background-color:#EEEEFF; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;This article is marked as in need of editing. You can help Codex by editing it./div/includeonlynoinclude


This Template is used by Codex:Template Messages.


pre 检查到模板循环:模板:Message /pre





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.


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


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

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

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9


This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

The name of the parameter.
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
A short description of the parameter.
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared. /div /noinclude

Default Values

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

Front Page

Site front page: home

  • If the site front page displays the blog posts index: home blog.
  • If the site front page displays a static page: home page.

Blog Posts Index

Blog posts index: blog

  • If the blog posts index is displayed on the site front page: home blog
  • If the blog posts index is displayed on a static page: page blog

Single Post

Single post pages: single postid-{ID}

  • Single blog post page: single-post
  • Single custom post type page: single-{posttype}
  • Post Formats (if supported):
    • Post format assigned: single-format-{format}
    • No post format assigned: single-format-standard
  • Single attachment pages: attachment single-attachment attachmentid-{ID} attachment-mime-type


Archive index pages: archive

  • Date archive index pages: date
  • Custom Post Type archive index pages: post-type-archive post-type-archive-{posttype}
  • Author archive index pages: archive author author-user_nicename
  • Category archive index pages: archive category category-slug
  • Tag archive index pages: archive tag tag-slug
  • Taxonomy archive index pages: tax-{taxonomy} term-{term} term-{ID}
    • Post Format archive index pages: tax-post_format term-post-format-{format} term-{ID}


Static page: page page-id-{ID}

  • Page Hierarchy
    • Parent page: page-parent
    • Child page: page-child parent-pageid-{ID}
  • Page Templates
    • Page template: page-template page-template-{directory}{filename}_php if custom page template is assigned, or page-template-default if no custom page template is assigned.


Search results page: search

  • Results: search-results
  • No results: search-no-results

Paged/Multiple Pages

Multi-page index pages and paginated posts: paged. Multi-page index pages and paginated posts with more than 2 pages paged paged-n.

  • Single Blog Post: single-paged-n
  • Static Page: page-paged-n
  • Category archive index: category-paged-n
  • Tag archive index: tag-paged-n
  • Date archive index: date-paged-n
  • Author archive index: author-paged-n
  • Search results index: search-paged-n
  • Custom Post Type archive index: post-type-paged-n

404 Page Error

Error 404 page: error404


If the current user is logged in: logged-in

Text Direction

If text direction is set to "right-to-left": rtl

Custom Background

If using Custom Background to display the site background image or color the class selectors: custom-background

Admin Toolbar

If the admin toolbar is displayed: admin-bar no-customize-support



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 the Tests page from the Theme Unit Test):

<body class="page page-id-2 page-parent 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

By default, the only classes will be those described above.

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

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

The results would be:

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

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
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}";
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());


  • Since: 2.8

Source Code

body_class() is located in onlyincludecodewp-includes/post-template.php/code/onlyinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Template Description

Link to the source code on


  1. filename
  2. (option) path to codetag/code (version) or codetrunk/code. This option is only used for a new /Default: codetrunk/code -- trunk is the latest bleeding edge development version of WordPress.


Link to the stable version: pre检查到模板循环:模板:Trac/pre

Link to trunk: pre检查到模板循环:模板:Trac/pre



Theme Functions

body_class, next_image_link, next_post_link, next_posts_link, post_class, post_password_required, posts_nav_link, previous_image_link, previous_post_link, previous_posts_link, single_post_title, sticky_class, the_category, the_category_rss, the_content, the_content_rss, the_excerpt, the_excerpt_rss, the_ID, the_meta, the_shortlink, the_tags, the_title, the_title_attribute, the_title_rss, wp_link_pages


includeonlydiv style=clear:both; background-color:#F7F7F7; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;See also index of Function Reference and index of Template Tags./div/includeonlynoinclude


This Template is used by Codex:Template Messages.


pre 检查到模板循环:模板:Message /pre