Add Dynamic Body CSS Class Control – Bricks Builder Page Settings Customization

Saw a feature request from Bricks forum with huge amount of likes, which requested to add CSS classes to HTML body using dynamic data. My hand is feeling itchy and let’s DIY this ourselves in 30 minutes while Bricks team is working on more important features.

Tutorial Environment

• Bricks Theme 1.5.6
• WordPress 6.0.3
• JetEngine 3.0.5 (You can use ACF or Metabox etc.)
• PHP 7.4
• Local NGINX docker server
• All custom codes in this tutorial place in child theme functions.php

Objective & Plan

Got the ability to add additional CSS classes into each page / post body class. Should support dynamic data as well.

Expected Result:

Step 1: Add Custom Field

I am using JetEngine in this tutorial. Create a simple field and set it to enable for post, page and all custom post types which has single template. You can use a text field or pre-defined select field, depends on your project requirement.

Once completed, custom field should available in your pages or posts. Go ahead and set the additional body class from the new field.

Step 2: Add CSS Rules

Add some simple CSS rules in Bricks. Since this CSS will be using in entire website, I will place it in Bricks > Settings > Custom Code > Custom CSS

/**CSS***/
.dark-bg {
 background-color: #abb8c3
}

Note that I did not set .dark-light CSS rule because I want default as white. Design and plan yours based on your scenario. However, if you are using select field or custom field with default value, please please ensure that each post, page or CPT trigger update again in order to get default value in this new custom field. (Example: All existing posts and pages got empty value on my “page-body-class” meta field because those were created in the past. Although you did set a default value in your custom field plugin.)

Step 3: Add New Control In Builder’s Page Settings Section

Now, we need to add new control into Bricks Page Settings. Use builder/settings/page/controls_data filter. Add this into functions.php or WPCodebox / Code Snippet plugin etc.

<?php

add_filter( 'builder/settings/page/controls_data', 'itchy_additional_page_controls', 40 );

function itchy_additional_page_controls( $data ) {

	if ( ! isset( $data['controls']['bodyClass'] ) ) {
		
		// Add a new text control in general tab
		$data['controls']['bodyClass'] = [
			'group'       => 'general',
			'type'        => 'text',
			'label'       => esc_html__( 'Extra Body Class', 'itchycode' ),
			'default'     => '',
			'placeholder' => esc_html__( 'Enter additional body class', 'itchycode' ),
			'description' => esc_html__( 'Separated by space. Without class dot.', 'itchycode' ),
		];
	}

	return $data;

}

Navigate to builder mode, check if the new control added. To add a static class to the current editing page / template, enter the CSS class name without class dot. To add multiple classes, just separate them with a space. You can mix static class and dynamic data together as well!

Step 4: Use body_class filter

Lastly, add our additional CSS classes by using body_class WordPress filter. We will use \Bricks\Database::$page_settings to retrieve our settings from the builder. Use bricks_render_dynamic_data function to render {dynamic_data} to actual data. This function added since v1.5.5. More useful functions & tips in Bricks Builder.

<?php

add_filter( 'body_class', 'itchy_add_body_class', 40 );

function itchy_add_body_class( $classes ) {

	// I only want to apply my additional classes in frontend
	if ( ! bricks_is_frontend() ) {
		return $classes;
	}
	
	// Get the current page settings
	$page_settings = \Bricks\Database::$page_settings;
	if ( isset( $page_settings['bodyClass'] ) ) {
	
		// Try to render the dynamic_data if it is
		$additional_classes = bricks_render_dynamic_data( $page_settings['bodyClass'], get_the_ID() );
		// Seperate each class by space
		$additional_classes = explode( ' ', $additional_classes );
		// Join the existing classes with our additional classes
		$classes            = array_merge( $classes, $additional_classes );
	}

	return $classes;

}

Read my comment to understand what each line does.

Check Result

Now inspect those pages or posts in front end. If all working good, you should see the class applied successfully. Otherwise, check if you have other higher priority CSS rules overriding it. **If you found the default value from custom dropdown field not applied or blank, re-save your post / page to get the default value, I explained earlier in Step 2**

Conclusion

Sometimes a great tool is not perfect yet, if you can make it greater with a little effort, just do it and share with others as a contribution.

Action & Filter hooks used in this tutorial:

• body_class filter
• builder/settings/page/controls_data filter
• \Bricks\Database::$page_settings static variable
• bricks_render_dynamic_data() function
• bricks_is_frontend() function