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.

Creating Page Color custom field using Meta Box
Populating the Page Color custom field for a specific Page
Button background color for the above Page taken from the custom field value
Button background color for Pages where the custom field is not populated

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro