MENU

Using Dynamic Colours from an ACF Color Picker Field in Oxygen

July 25, 2021
Posted in: , ,

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.

Tutorial written by Soph Simmonds
Director & Web Developer at WinuSoft Web Design & Senior Support Specialist at Oxygen. When she's not working, Soph can usually be found mountain biking with her partner, Luis.

Get in Touch

Contact us about any web, design or branding project that you have in mind. We're sure that you'll find our approach and dedication will be just what you need.

We’re always happy to discuss your project with you. Just fill out the form or give us a call to get started.
info@winusoft.co.uk
07889 216767
winusoft.co.uk
facebook-squarelinkedin-squaregithub-squaretwitterfacebookenvelopelinkedinxinginstagrampaper-planepinterest-pwhatsappcommentinghomemagic-wandcloud-uploaddatabaseenvelopeeyefile-addgraduation-hatpicturebooksmartphonemenuchevron-down