body_class( string|string[] $class = '' )

Displays the class names for the body element.

Contents

Description Description

Parameters Parameters

$class

(string|string[]) (Optional) Space-separated string or array of class names to add to the class list.

Default value: ''

Top ↑

Source Source

File: wp-includes/post-template.php 

function body_class( $class = '' ) {
	// Separates class names with a single space, collates class names for body element
	echo 'class="' . join( ' ', get_body_class( $class ) ) . '"';
}

Expand full source code Collapse full source code View on Trac

Top ↑

Changelog Changelog

Changelog
Version Description
2.8.0 Introduced.

Top ↑

More Information More Information

This function gives the body element different classes and can be added, typically, in the header.php’s HTML body tag.

Basic Usage

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 */
}

Top ↑

Top ↑

Uses Uses

Uses
Uses Description
wp-includes/post-template.php: get_body_class()

Retrieves an array of the class names for the body element.

Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 13You must log in to vote on the helpfulness of this note
    Contributed by Drew Jaynes —

    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">
  2. Skip to note 2 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 12You must log in to vote on the helpfulness of this note
    Contributed by Drew Jaynes —

    Add New Classes via Filter

    You can add additional body classes by filtering the {@see ‘body_class’} hook.

    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', function( $classes ) {
	return array_merge( $classes, array( 'class-name' ) );
} );
  3. Skip to note 3 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 9You must log in to vote on the helpfulness of this note
    Contributed by Sam —

    Here’s a solution for adding a body class to a specific page template:

    add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
	if ( is_page_template( 'page-example.php' ) ) {
        $classes[] = 'example';
    }
	return $classes;
}

    The result on the front-end: 

    <body class="page page-id-7 page-template page-template-page-example page-template-page-example-php example">
  4. Skip to note 4 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 5You must log in to vote on the helpfulness of this note
    Contributed by maijabrazen —

    The above example about how to remove inline classes via filters is incorrect.
    Here is the correct way to do it: 

    add_filter('body_class', function (array $classes) {
    if (in_array('class-to-remove', $classes)) {
      unset( $classes[array_search('class-to-remove', $classes)] );
    }
  return $classes;
});
  6. Skip to note 6 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note
    Contributed by Mahesh Waghmare —

    # Function body_class() add some STATIC classes depends on the page, post, archive, blog, search, 404 etc.
    # List of all default static classes which are added to 

    .rtl {
	/* # Checks if current locale is RTL (Right To Left script). */
}

.home {
	/* # Depends on the site’s “Front page displays” Reading Settings ‘show_on_front’ and ‘page_on_front’. \n If you set a static page for the front page of your site, this function will return true when viewing that page. */
}

.blog {
	/* # Add if blog view homepage, otherwise false. */
}

.archive {
	/* For # Month, Year, Category, Author, Post Type archive */
}

.date {
	/* # For date archive */
}

.search {
	/* # For search */
}

.search-results {
	/* # If found posts in search result */
}

.search-no-results {
	/* # If NOT found any posts in search result */
}

.paged {
	/* # On paged result and not for the first page */
}

.attachment {
	/* # On attachment page */
}

.error404 {
	/* # On 404 page */
}

.single {
	/* # Add for any post type, except {attachments} and {pages} */
}

.single-format-standard {
	/* # standard post format */
}

.post-type-archive {
	/* # post type archive page */
}

.author {
	/* # author page */
}

.category {
	/* # category page */
}

.tag {
	/* # Tags page */
}
	
.page {
	/* # existing single page */
}

.page-parent {
	/* # Parent page only */
}

.page-child {
	/* # Child page only */
}

.page-template {
	/* # Page templates only */
}

.page-template-default {
	/* # Default page templates only */
}

.logged-in {
	/* # Logged in user */
}

.admin-bar {
	/* # Only in admin bar */
}

.no-customize-support {
	/* # Only in admin bar */
}

.custom-background {
	/* # If theme support 'custom-background' or get_background_image() */
}

.wp-custom-logo {
	/* # If the site has a custom logo. */
}

    Expand full source codeCollapse full source code

    # Function body_class() also add some DYNAMIC classes as below:

    .single-/* sanitize_html_class($post->post_type, $post_id) */

.postid-/* $post_id */

.single-format-/* sanitize_html_class( $post_format ) */

.attachmentid-/* $post_id */

.attachment-/* str_replace( $mime_prefix, '', $mime_type ) */

.post-type-archive-/* sanitize_html_class( $post_type ) */

.author-/* sanitize_html_class( $author->user_nicename, $author->ID ) */

.author-/* $author->ID */

.category-/* $cat_class */

.category-/* $cat->term_id */

.tag-/* $tag_class */

.tag-/* $tag->term_id */

.tax-/* sanitize_html_class( $term->taxonomy ) */

.term-/* $term_class */

.term-/* $term->term_id */

.page-id-/* $page_id */

.parent-pageid-/* $post->post_parent */

.page-template-/* sanitize_html_class( str_replace( array( '.', '/' ), '-', basename( $part, '.php' ) ) ) */

.page-template-/* sanitize_html_class( str_replace( '.', '-', $template_slug ) ) */

.paged-/* $page */

.single-paged-/* $page */

.page-paged-/* $page */

.category-paged-/* $page */

.tag-paged-/* $page */

.date-paged-/* $page */

.author-paged-/* $page */

.search-paged-/* $page */

.post-type-paged-/* $page */

    Expand full source codeCollapse full source code

    You can check all these in function get_body_class()

  7. Skip to note 7 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note
    Contributed by Antonio Sanchez —

    To remove a class of the body_class function you have to do that:

    add_filter( 'body_class', function( $classes ) {
	foreach($classes as $key => $class) {
		if( $class == "class-to-remove" ){
			unset($classes[$key]);
		}
	}
	return $classes;
}, 1000);

    The other functions mentioned above are not working since they are ignoring the keys of the array $classes and do not have the needed priority.

  8. Skip to note 8 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
    Contributed by scott.hepler —

    This is from get_page_template_slug as used by this function and is important to remember:

    If the template is stored in a Theme’s subdirectory (or a Parent Theme’s subdirectory of a Child Theme), the value of the wp_postmeta is both the folder and file names, e.g.:

    my-templates/my-custom-template.php

  9. Skip to note 9 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by gecko_guy —

    Add one custom body class to the entire site, as well as additional classes only where needed by conditionally targeting the page slugs.

    In this example the site makes use of front end registration, login and password reset forms, so the goal is to modify the form styling only on these pages:

    add_filter( 'body_class', function( $classes ) {
    if ( is_page( 'login' ) ) {
      $classes[] = 'login wtv-form';
    } else {
      if ( is_page( 'register' ) ) {
        $classes[] = 'register wtv-form';
    } else {
      if ( is_page( 'password-reset' ) ) {
        $classes[] = 'reset wtv-form';
      }
    }
  }
  return array_merge( $classes, array( 'custom' ) );
} );
  10. Skip to note 10 content
    You must log in to vote on the helpfulness of this noteVote results for this note: -1You must log in to vote on the helpfulness of this note
    Contributed by m3lvin —

    Adding maijabrazen. Example if want remove author id from body class. If wish to remove Author name, use user_nicename

    add_filter('body_class', function (array $classes) {
$author = 'author-'.get_the_author_meta('ID') ;
    if (in_array($author, $classes)) {
      unset( $classes[array_search($author, $classes)] );
    }
  return $classes;
});
  11. Skip to note 11 content
    You must log in to vote on the helpfulness of this noteVote results for this note: -2You must log in to vote on the helpfulness of this note
    Contributed by Drew Jaynes —

    Remove Classes via Filters

    Remove an existing body class by un-setting the key from the $classes array.

    // Removes a class from the body_class array.

add_filter( 'body_class', function( $classes ) {
	if ( isset( $classes['class-to-remove'] ) ) {
		unset( $classes['class-to-remove'] );
	}
	return $classes;
} );

You must log in before being able to contribute a note or feedback.