Published on Jul 2, 2019

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

Sridhar Katakam

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.

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

ACF options page
CSS variable as property value

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right