Oxygen Builder Tutorial

Using Dynamic Colours from an ACF Color Picker Field in Oxygen

Get Help with Oxygen
Blue globe and ball image
Categories: ,
Using dynamic colours from an ACF colour picker in Oxygen

Unfortunately, at the time of writing this tutorial, Oxygen doesn't support dynamic colours. However, there is a workaround using Oxygen's Attributes and a jQuery snippet in a Code Block element.

To start, create your Advanced Custom Fields field group and add an ACF Color Picker field to the group. Apply the ACF field group to the appropriate post type.

Edit your post in the WordPress admin area and set your ACF colour. Next, edit the post (or the post template) in Oxygen. Add a class to the element where you want to use the dynamic colour, such as "custom-bgcolour". With that class selected, go to Advanced > Attributes and add a new attribute with the name "data-colour". Set the attribute value dynamically to the ACF colour field.

Next, add a Code Block element to the builder. Remove the default code from the PHP & HTML tab of the Code Block and replace it with:

<!-- -->

On the JavaScript tab of the Code Block, ad the following code:

jQuery(".custom-bgcolour").css('background-color', function () {
 return jQuery(this).data('colour') 

The code won't work in the builder, but if you view the post on the front-end of the site, you will see that the class "custom-bgcolour" will be using your ACF colour picker field as the background colour.

Phe Simmonds

Tutorial written by Phe Simmonds

Director & Web Developer at WinuSoft Web Design. When she's not working, Phe can usually be found mountain biking with her partner, Luis and dog, Bubba.
Blue background image Blue ball image

Other Tutorials

Blue circular lines

Get In Touch

Whether your business is just getting started or you’re in the middle of a growth spurt, we can design and develop a website that will help you scale.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.
Copyright © 2024 WinuSoft Web Design