body_class( string|string[] $css_class = '' )
Displays the class names for the body element.
Contents
Parameters
-
$css_class
string|string[] Optional -
Space-separated string or array of class names to add to the class list.
Default:
''
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):
[html]
<body class="page page-id-2 page-parent page-template-default logged-in">
[/html]
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 */
}
Source
File: wp-includes/post-template.php
.
View all references
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 ) ) ) . '"';
}
Changelog
Version | Description |
---|---|
2.8.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.
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:
The results would be:
[html]
<body class="page page-id-2 page-parent page-template-default logged-in class-name">
[/html]
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:
Here’s a solution for adding a body class to a specific page template:
The result on the front-end:
Top ↑
Feedback
Sam’s solution here is brilliant. FYI, you can add multiple CSS classes to the with his function, like so:
add_filter( 'body_class', 'wpdocs_custom_class' ); function wpdocs_custom_class( $classes ) { if ( is_page_template( 'page-example.php' ) ) { array_push( $classes, 'example' ); } if ( wpdocs_another_function() ) { array_push( $classes, 'another' ); } return $classes; }
Ifwpdocs_another_function()
returnsTRUE
, then this is the result on the front-end:body class="example another"
Minor note: I’ve updated the arrays here to usearray_push()
instead of using the short form array syntax e.g.$class[] = 'something'
, due to the updated WordPress Coding Standards for PHP arrays. — By Joe Westcott —The above example about how to remove inline classes via filters is incorrect.
Here is the correct way to do it:
# 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
# Function
body_class()
also add some DYNAMIC classes as below:You can check all these in function get_body_class()
To remove a class of the body_class function you have to do that:
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.
Example: add a new class to
body
.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
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:
Adding maijabrazen. Example if want remove author id from body class. If wish to remove Author name, use user_nicename
Remove Classes via Filters
Remove an existing body class by un-setting the key from the
$classes
array.