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


if( function_exists( '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.

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


This is a premium members-only content.

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

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: