{"id":104,"date":"2021-07-25T11:14:40","date_gmt":"2021-07-25T11:14:40","guid":{"rendered":"https:\/\/winusoft.co.uk\/oxygen-tutorials\/using-dynamic-colours-from-an-acf-colour-picker-field-in-oxygen\/"},"modified":"2024-02-06T11:21:16","modified_gmt":"2024-02-06T11:21:16","slug":"using-dynamic-colours-from-an-acf-colour-picker-field-in-oxygen","status":"publish","type":"oxygen-tutorials","link":"https:\/\/winusoft.co.uk\/oxygen-tutorials\/using-dynamic-colours-from-an-acf-colour-picker-field-in-oxygen\/","title":{"rendered":"Using Dynamic Colours from an ACF Color Picker Field in Oxygen"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full tutorial__image--center\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"379\" src=\"https:\/\/winusoft.co.uk\/wp-content\/uploads\/2023\/01\/Oxygen-Attributes.jpg\" alt=\"\" class=\"wp-image-218\" srcset=\"https:\/\/winusoft.co.uk\/wp-content\/uploads\/2023\/01\/Oxygen-Attributes.jpg 300w, https:\/\/winusoft.co.uk\/wp-content\/uploads\/2023\/01\/Oxygen-Attributes-237x300.jpg 237w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Next, add a Code Block element to the builder. Remove the default code from the PHP &amp; HTML tab of the Code Block and replace it with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!-- --&gt;<\/code><\/pre>\n\n\n\n<p>On the JavaScript tab of the Code Block, ad the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">jQuery(\".custom-bgcolour\").css('background-color', function () {\n return jQuery(this).data('colour') \n});<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n","protected":false},"author":1,"featured_media":105,"template":"","tutorial_category":[7,9],"acf":[],"_links":{"self":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/oxygen-tutorials\/104"}],"collection":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/oxygen-tutorials"}],"about":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/types\/oxygen-tutorials"}],"author":[{"embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"tutorial_category","embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/tutorial_category?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}