How to Add Custom Body Classes in WordPress

The “body_class()” ┬áin WordPress adds classes to the body tag of all the pages in your WordPress site. By default a WordPress theme should use the function “body_class()” in their theme files so that WordPress can automatically output correct classes to each page/post and archive.

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

[php]
<body <?php body_class(); ?>>
[/php]

The actual HTML output might resemble something like this:

[php]
<body class="page page-id-2 page-parent page-template-default logged-in">
[/php]

If you want to add your own custom class to the body then the easiest way is to add a add the custom class in this format:

[php]
<body <?php body_class( ‘class-name’ ); ?>>
[/php]

which will output something like this:

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

But the problem with this approach is that the custom class “class-name” will be add to each and every page and post of your site.

Now, In case you want to add the custom class only to specific pages/posts or archives then use following function and edit as per your requirement:

[php]
function wphe_body_classes( $classes ) {
global $post;

if ( is_singular( ‘post’ ) ) {
$classes[] = ‘class-name’; // add custom class to all single posts
}

if ( is_singular( ‘page’ ) ) {
$classes[] = ‘class-name’; // add custom class to all single pages
}

if ( is_singular( ‘customposttype’ ) ) { // change customposttype to your CPT slug
$classes[] = ‘class-name’; // add custom class to all single custom post types
}

if ( is_home() ) {
$classes[] = ‘class-name’; // add custom class to blog homepage
}

if ( is_front_page() ) {
$classes[] = ‘class-name’; // add custom class to blog static page frontpage
}

if ( is_archive() ) {
$classes[] = ‘class-name’; // add custom class to archive pages
}

return $classes;
}
add_filter( ‘body_class’, ‘wphe_body_classes’ );
[/php]

About Author


WP Munk

Leave a Reply

Your email address will not be published. Required fields are marked *