Element color background in repeater with ACF

Create ACF field group and assign it to posts.

Create field label and name it color and choose field type Color picker.

Assign color to each post

Create a repeater in Oxygen builder

Select first child of Repeater

  1. Add class to that element “data-color-bg”
  2. Go to advanced > attributes > Add attribute. First field needs to be “data-color” and second one use data > Advanced Custom Field > Color

Add code block bellow repeater or for better experience use Scripts Organizer.

Paste JavaScript into JavaScript Tab


(function($){

    $(function() {

		$(".data-color-bg").css('background', function () {
			return $(this).data('color')
		});

		
    });

})(jQuery);

Final result

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You’ll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You'll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

Click to Copy