Add a custom body class to your (Custom) Post Type

There are many cases where you want to add a custom body class to your page, single post or custom post type. I’m here to show you some examples. By using the following code snippets, that you add to your functions.php, you can easily achieve that.

function custom_body_classes( $classes ) {
	$classes[] = 'class-name';
	$classes[] = 'class-name-two';

	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

The code above shows you how to add a custom bodyclass to all your posts and pages. We can now modify it for our needs. For example, you can specify a Custom Post Type (CPT) to add your custom class. Here we use is_singular(). This function will check if the query is for one of the Posts Types.

function custom_body_classes( $classes ) {
	if ( is_singular( 'custom_post_type_slug' ) ) { // Change 'custom_post_type_slug' to your Custom Post Type slug. For example: 'tutorials'.
		$classes[] = 'class-name';
		$classes[] = 'class-name-two';
	}
	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

You can also specify pages based on page-id, page-title or page-slug by using is_page().

Use it like the examples below:

is_page( 56 ); // Based on page/post ID.

is_page( 'Contact' ); // Based on page/post title.

is_page( 'about-me' ); // Based on page/post slug.

is_page( array( 56, 'Contact', 'about-me' ) ); // Combined as array.

In this example we only want to target the pages about-me, contact and blog:

function custom_body_classes( $classes ) {
	if ( is_page( array( 'about-me', 'contact', 'blog' ) ) ) {
		$classes[] = 'class-name';
		$classes[] = 'class-name-two';
	}
	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

But, you probably want it a bit more advanced. I can imagine you want to add your categories to your body class on your single post page. Well that’s possible too!

Here we make use of the is_single() function. This function will check if the query is for one of the Posts specified. You can use it the same way as the is_page() examples above. So ID, title,slug and array are allowed.

We make use of the get_the_category() function to retrieve the post categories. This function only returns results from the default β€œcategory” taxonomy. We also need to use global $post; to be able to obtain the current post ID.

function custom_body_classes( $classes ) {
	if ( is_single() ) {
		global $post;
		foreach ( ( get_the_category( $post->ID ) ) as $category ) {
			$classes[] = $category->category_nicename;
		}
	}
	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

Of course it’s also possible to use your custom taxonomy as a custom body class. For custom taxonomies we use get_the_terms(). This retrieves the terms of the taxonomy that are attached to the post. Use the following code snippet:

function custom_body_classes( $classes ) {
	if ( is_single() ) {
		global $post;
		foreach ( ( get_the_terms( $post->ID, 'custom_taxonomy_slug' ) ) as $term) { //Change 'custom_taxonomy_slug' to your Custom Taxonomy slug
			$classes[] = $term->slug;
		}
	}
	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );

Make it more secure!

Note: It’s even better to make a variable for the category and to check if there are any categories selected and to check if there are no errors by using wp_error(). Use the more advanced code snippet below to optimize your current code. This of course works for all the above examples. You can easily adjust it to your case.

function custom_body_classes( $classes ) {
	if ( is_single() ) {
		global $post;
		$my_terms = get_the_terms( $post->ID, 'custom_taxonomy_slug' ); //Change 'custom_taxonomy_slug' to your Custom Taxonomy slug.
		if ( $my_terms && ! is_wp_error( $my_terms ) ) {
			foreach ( $my_terms as $term ) {
				$classes[] = $term->slug;
			}
		}
		return $classes;
	}
}
add_filter( 'body_class', 'custom_body_classes' );

That’s it!

You might like this too!

Leave a Reply

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