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 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

Code:

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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

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.
  • One thing to keep in mind, wp_add_inline_style() must be called before the CSS file you are adding to is written to the page. I have had to add a higher priority to my wp_enqueue_scripts action to make this work and I think this might be why?

    • Actually, after messing with this for a bit longer, it looks like the real cause of my problem was that the ‘oxygen’ stylesheet must be enqueued before the inline styles are added. Adding a lower priority to the inline style enqueue action if you are adding to the default Oxygen stylesheet is necessary for me. If adding to your own stylesheet as I was in the comment above, making sure that stylesheet is enqueued first is also an option.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: