Meta Box Color Picker to CSS Custom Property Workflow in Bricks

This Pro tutorial provides the steps to declare a custom property (CSS variable) whose value is equal to the post-specific color set via a custom field created using Meta Box in Bricks builder 1.5 Beta and above.

We shall

• create a field group for page post type i.e., static Pages having a page_color Color Picker type of field
• write code that checks if the current page being viewed is a static Page and that Meta Box is active and
  • store the value of page_color field in a variable
  • set it to a default/fallback color if the field is empty
  • build CSS having a --page-color custom property with the value of the page_color variable
  • add the above CSS to one of the enqueued stylesheets

With this in place, we can simply specify the color value as var(--page-color) in Bricks editor and the Page-specific color or a fallback color will be used depending on whether the field is populated or not.

Step 1

Install and activate Meta Box.

Create the field group having a Color Picker type of field and attach it to your desired post type – page in this example.

Edit your Pages and populate the field by selecting the Page-specific color.

Step 2

Add the following in the function hooked to wp_enqueue_scripts in your child theme‘s functions.php:

if ( is_page() && function_exists( 'rwmb_meta' ) ) { // if this is a static Page and Meta Box is active
	// store the value of page_color field in a variable
	$page_color = rwmb_meta( 'page_color' );

	// if the page_color field is not empty, set a fallback/default color
	$page_color = $page_color ? $page_color : '#fc5778';

	// build CSS having a "--page-color" custom property with the value of the page_color variable
	$custom_css = "
	:root {
		--page-color: {$page_color};
	}";

	// add the above CSS to "bricks-child" stylesheet
	wp_add_inline_style( 'bricks-child', $custom_css );
}

Step 3

Switch to RAW in the color picker when setting text color or background color in Bricks editor and paste:

var(--page-color)

to apply/use the color set for your Page.

References

https://docs.metabox.io/fields/color/#template-usage

https://developer.wordpress.org/reference/functions/wp_add_inline_style/