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: