How to add custom body class(es) to Pages in WordPress

In the Oxygen Facebook group a user asks:

Hello Oxy helpers.
I’m trying to find a way to add a css class to the body tag.
I’ve got a hero bg image on each page, but some are light others are dark, so I want to change the logo accordingly. So I thought adding a “light” or “dark” to the body tag would then give me the function to change the logo via css.
Thanks for your help

This tutorial provides the steps to add a “Body Class” meta box for Pages using Advanced Custom Fields and add the text entered in this custom field to the classes list for body element on the front end using the body_class WordPress filter hook.

Step 1

Install and activate Advanced Custom Fields (free or Pro).

Add a new field group titled say, “Page Fields” having a body_class text-type field.

Set the field group to appear on Pages.

Step 2

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add body class to Pages

Code:

add_filter( 'body_class', 'custom_body_class' );
/**
 * Add custom field body class(es) to the body classes.
 *
 * It accepts values from a per-page custom field, and only outputs when viewing a singular static Page.
 *
 * @param array $classes Existing body classes.
 * @return array Amended body classes.
 */
function custom_body_class( array $classes ) {
	$new_class = is_page() ? get_post_meta( get_the_ID(), 'body_class', true ) : null;

	if ( $new_class ) {
		$classes[] = $new_class;
	}

	return $classes;
}

Set the snippet to run only on the front-end.

Save and activate.

Step 3

Edit the Page for which you wish to add a custom body class.

Enter your desired body class in the Body Class meta box.

To add multiple classes, separate them by classes. Ex.: dark has-sidebar.

Update the Page.

Reference

lib/structure/layout.php of Genesis.

Posted

Mar 13, 2020

Free Content, WordPress

Sridhar Katakam

Tags:

ACF, body_class

Comments

5 responses to “How to add custom body class(es) to Pages in WordPress”

pascalinger

Sep 14, 2020

Hi there,

Thank you for the tutorial! Can you tell me how the code would look like when I was to chain different classes? In this particular example I’d like to add one body class for the overall color theme of the page and another one for the header theme (light, dark).

Thank you for your help!

Reply
1. Sridhar Katakam
  
  Sep 15, 2020
  
  To add multiple classes, separate them by classes. Ex.: dark has-sidebar.
  
  Reply
  1. pascalinger
    
    Sep 18, 2020
    
    Oh, sorry, was not specific enough. I have a select field for my client. One is for the overall color theme of the page, the other for the header theme. Can I incorporate both ACF fields into one snippet somehow? I have two at the moment.
    
    Also, would you be so kind as to tell me what I had to change to put these fields in a group called “Colors”?
    
    Thank you!
    
    Reply
  2. pascalinger
    
    Oct 30, 2020
    
    Hi Sridhar,
    
    Do you think you can help me get this setup with the flexibility I need? I also need to be able to apply a certain body class to all custom post types inheriting a certain template.
    
    Willing to pay.
    ([email protected])
    
    Reply
    1. Sridhar Katakam
      
      Oct 30, 2020
      
      Hi. Sent you an email.
      
      Reply