ACF color picker custom fields to CSS custom properties workflow in Oxygen

This members-only tutorial provides the steps to add some "Color Picker" type custom fields in an options page using Advanced Custom Fields Pro, and to create Custom properties (or CSS variables) from the custom field values so they can be used in the Oxygen editor.

This tutorial can also be applied in the case when the custom fields are post-specific instead of present in a Settings page.

After implementing this tutorial, you will be able to do this:

The client or site owner can thus easily change the colors anytime without accessing the Oxygen editor.

Step 1

Install and activate ACF Pro.

Step 2

Let us create an options page.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: ACF Options page

Code:

if ( function_exists( 'acf_add_options_page' ) ) {
	
	acf_add_options_page();
	
}

Set the snippet to run only in admin.

Save changes and activate.

Step 3

Go to Custom Fields > Add New.

Title: Global Options

Add your desired color picker type fields while setting default values where needed.

Set the fields to appear on Options Page.

Here (mirror) is an export of the field group from my test site.

Step 4

Click on the newly added Options menu item in the admin.

Set/change the colors as needed.

Make sure Update button is clicked if you have imported the field group.

Step 5

Let's create CSS custom properties from the above custom field values.

Add a Code Snippet.

Title: Set ACF colors as CSS variables

Code: