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 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 ($27/month).

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?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: