body_class() │ WP 2.8.0

Displays the class names describing the current page. Intended for use in the <body> element.

This function is especially helpful for theme developers, as it allows to use CSS selectors more efficiently. It adds different classes to the BODY tag, depending on which page the visitor is on, whether he is logged in or not, etc. (for example, class="home logged-in").

To add additional classes, use either $class parameter or body_class filter (See below).

Uses: get_body_class()
1 time — 0.000176 sec (fast) | 50000 times — 3.11 sec (fast) | PHP 7.0.14, WP 4.7

No Hooks.

Return

null. Nothing (null).

Usage

body_class( $css_class );
$css_class(string|string[])
Space-separated string or array of class names to add to the class list.
Default: ''
Contents:

The list of classes that may be displayed

rtl                — is_rtl()
home               — is_front_page()
blog               — is_home()
privacy-policy     — is_privacy_policy()
archive            — is_archive()
date               — is_date()
error404           — is_404()

// is_search()
search             — is_search()
search-results     — has results
search-no-results  — no results

// is_singular()
single                — is_single()
single-(post_type)    — is_single() && $post->post_type
postid-(post_id)      — is_single() && $post->post_type

// post-formats
single-format-(post_format)  — get_post_format()
single-format-standard       — ! get_post_format()

// is_page()
page                    — is_page()
page-id-(page_id)       — is_page()
page-parent             — child page
page-child              — $post->post_parent
parent-pageid-(id)      — $post->post_parent
page-template page-template-(название файла шаблона)   — is_page_template()

// is_attachment()
attachment              — is_attachment()
attachmentid-(id)       — is_attachment()
attachment-(mime-тип)   — is_attachment()

// is_post_type_archive()
post-type-archive              — is_post_type_archive()
post-type-archive-(post_type)  — is_post_type_archive()

// is_author()
author                         — is_author()
author-(user_nicename)         — is_author()

// terms: is_category(), is_tag(), is_tax()
category
category-(slug)
category-(id)
tag
tag-(slug)
tag-(id)
tax-(taxonomy)
term-(term slug)
term-(id)

// is_paged()
paged                            — is_paged()
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)

// Other
logged-in              — is_user_logged_in()
admin-bar              — is_admin_bar_showing()
no-customize-support   — is_admin_bar_showing()

custom-background      — current_theme_supports( 'custom-background' )

wp-custom-logo         — has_custom_logo()
wp-embed-responsive    — current_theme_supports( 'responsive-embeds' )

When the specific classes are displayed

Conditional tags are used to output classes. Below you can see which conditional tags are used for which classes:

is_front_page() — home

is_home() — blog

is_attachment() — attachment

is_404() —error404

is_user_logged_in() — logged-in

is_admin_bar_showing() — admin-bar no-customize-support

is_search() — search

  • If true: search-results.
  • If false: search-no-results.

is_single() — single postid-(post ID)

  • If a post: single-post
  • If custom post type: single-(post type)
  • If formats are supported: single-format-{format} or single-format-standard
  • If an attachment: attachment single-attachment attachmentid-{ID} attachment-mime-type

is_page() — page page-id-{page ID}

  • Parent page: page-parent
  • Child page: page-child parent-pageid-{ID}
  • Page template:
    • Template is specified: page-template page-template-{file name}-php
    • Template is not specified: page-template-default

is_archive() —archive

  • By date:date
  • Post type: post-type-archive post-type-archive-{post type}
  • Author: author author-{name}
  • Category: category category-{slug}
  • Tag: tag tag-{slug}
  • Taxonomy: tax-{taxonomy name} term-{term slug} term-{ID}
  • Post format: tax-post_format term-post-format-{format} term-{ID}

is_paged() — paged paged-{page number}

  • Post: single-paged-{page number}
  • Page: page-paged-{page number}
  • Category: category-paged-{page number}
  • Tag: tag-paged-{page number}
  • Archive by date: date-paged-{page number}
  • Author archive: author-paged-{page number}
  • Search: search-paged-{page number}
  • Custom post type: post-type-paged-{page number}

If there is a custom background

  • custom-background
    Then this condition is used: 
    if ( get_theme_mod( 'background_color' ) || get_background_image() )

is_rtl() — rtl

Examples

0

#1 Basic usage

This example demonstrates how this function is typically used:

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

In the result, we will get the following HTML:

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

And CSS styles can be used like so:

.page {
	/* page style */
}
.page-id-2 {
	/* styles for page with ID=2 */
}
.logged-in {
	/* styles for all pages where user is logged in */
}
0

#2 Add a custom class 

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

Result:

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

#3 Add a custom class using body_class filter

You can add a specific class for single pages using body_class filter and is_page() conditional tag:

add_filter( 'body_class','my_class_names' );
function my_class_names( $classes ) {

	// add 'class-name' class to $classes array
	if( is_page() )
		$classes[] = 'it_is_page';

	return $classes;
}

This is only for demonstration purposes. By default single pages always have a class for them.

0

#4 Add the name of the current post's category to the classes 

add_filter( 'post_class', 'category_id_class' );
add_filter( 'body_class', 'category_id_class' );
function category_id_class( $classes ) {

	if( is_single() ){
		global $post;

		foreach( get_the_category($post->ID) as $category )
			$classes[] = $category->name;
	}

	return $classes;
}
0

#5 Add the name of the parent page to the classes

This example only works when the current page has a parent:

add_filter( 'body_class', 'add_page_parent_to_body_class' );
function add_page_parent_to_body_class( $classes ){
	global $post;

	if( is_page() && $post->post_parent ){
		$post_data = get_post( $post->post_parent );
		$classes[] = 'parent_page-' . $post_data->post_name;
	}

	return $classes;
}

This is only for demonstration purposes. By default child pages always have a class for the parent.

0

#6 Add a class only when the sidebar is shown

The below example demonstrates how to add a specific class when the sidebar is shown:

add_action( 'get_sidebar', 'sidebars_body_classes' );
add_action( 'wp_head',     'sidebars_body_classes__ob_start' );
add_action( 'wp_footer',   'sidebars_body_classes__ob_end' );

# Remember clesses
function sidebars_body_classes( $name = '' ){

	static $classes = 'withsidebar';

	if( $name ){
		$classes .= " sidebar-$name";
	}

	return $classes;
}

# Enable buffer output
function sidebars_body_classes__ob_start(){
	ob_start();
}

# Add classes to body
function sidebars_body_classes__ob_end(){

	$html = ob_get_clean();

	if( $classes = sidebars_body_classes() ){
		echo str_replace( '<body class="', "<body class=\"$classes ", $html );
	}

	echo $html;
}

Changelog

Since 2.8.0 Introduced.

body_class() code WP 6.6.2

wp-includes/post-template.php 
function body_class( $css_class = '' ) {
	// Separates class names with a single space, collates class names for body element.
	echo 'class="' . esc_attr( implode( ' ', get_body_class( $css_class ) ) ) . '"';
}

Decor (design, layout, styling, class)

Other Theme Functions

Posts, Pages, ...