Color Picker Palette(s) more than one

• SiteLift

• March 24, 2020 at 11:07 pm

I’m creating a multiple Color Pickers to help my users pick colors, but I want to offer theme custom palettes which I’ve been able to do using this..

https://www.advancedcustomfields.com/resources/javascript-api/#filters-color_picker_args

However I want two different color pickers to have two different palettes. The code I currently have makes one palette apply to both the color pickers. See the two images attached.

How can I make one palette apply to color_primary and another palette apply to color_secondary?

Here is the code I have so far – I’m using WordPress functions.php to enter the code.

function my_acf_color_picker_palette_primary() {
	
?>
<script type="text/javascript">
(function($) {
	
	acf.add_filter('color_picker_args', function( args, $field ){
	
	// find a specific field
	var $field = $('color_primary');	
		
	// do something to args
	args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
	
	
	// return
	return args;
			
});
	
})(jQuery);	
</script>
<?php
		
}

add_action('acf/input/admin_footer', 'my_acf_color_picker_palette_primary');*

color1.png.png

color2.png.png

• SiteLift

• March 24, 2020 at 11:16 pm

I’m creating a multiple Color Pickers to help my users pick colors, but I want to offer theme custom palettes which I’ve been able to do using this..

https://www.advancedcustomfields.com/resources/javascript-api/#filters-color_picker_args

However I want two different color pickers to have two different palettes. The code I currently have makes one palette apply to both the color pickers. See the two images attached.

How can I make one palette apply to color_primary and another palette apply to color_secondary?

Here is the code I have so far – I’m using WordPress functions.php to enter the code.

function my_acf_color_picker_palette_primary() {
	
?>
<script type="text/javascript">
(function($) {
	
	acf.add_filter('color_picker_args', function( args, $field ){
	
	// find a specific field
	var $field = $('color_primary');	
		
	// do something to args
	args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
	
	
	// return
	return args;
			
});
	
})(jQuery);	
</script>
<?php
		
}

add_action('acf/input/admin_footer', 'my_acf_color_picker_palette_primary');*

color1-1.png.png

color2-1.png.png