How to Add Custom Body Classes to Custom Post Types in WordPress

Custom body classes are a great way to add specific styles to different parts of your website. By adding custom body classes to your WordPress website, you can target specific areas of your website with CSS styles. In this tutorial, we will show you how to add a custom body class to your Custom Post Type in WordPress.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Access your child’s theme functions.php via FTP or
via Appearance > Theme File Editor > Your child theme > functions.php

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

	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );
Code language: PHP (php)

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' );
Code language: PHP (php)

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.

Code language: PHP (php)

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' );
Code language: PHP (php)

But, you probably want it a bit more advanced. I can imagine you want to add your categories or page slug 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.

Here is an example on how to add the pageslug as body class. We need to use global $post; to be able to obtain the current post ID.

function custom_body_classes( $classes ) {
	global $post;
	if ( isset( $post ) ) {
		$classes[] = $post->post_type . '-' . $post->post_name;
	}
	return $classes;
}
add_filter( 'body_class', 'custom_body_classes' );
Code language: PHP (php)

Next, we can also 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' );
Code language: PHP (php)

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' );
Code language: PHP (php)

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' );
Code language: PHP (php)

That’s it! Adding a custom body class to your Custom Post Type in WordPress is a great way to target specific areas of your website with CSS styles. By following the steps outlined in this tutorial, you can easily add a custom body class to your Custom Post Type and start styling your website to your specifications.

That’s it!