Home Forums General Issues Iris Color Picker Palette Problem


Iris Color Picker Palette Problem

  • I’m trying to add custom palette support to my ACF color pickers.

    I’ve tried the following method called in acf/input/admin_enqueue_scripts:

    acf.add_action('ready append', function( $el ){
      var palette =  ['#f9e0c5', '#dcc6b2', '#f9ebe1', '#344857'];
      acf.get_fields({ type : 'color_picker'}, $el).each(function(){
        $(this).iris('option', 'palettes', palette);

    But the following error is thrown:

    cannot call methods on iris prior to initialization; attempted to call method ‘option’

    The following code adds the palette as expected, however (strangely) the color picker stops selecting the correct color when interacting with the draggable gradient. Not sure why.

    <?php function load_color_palette_options() {?>
        var palette = ['#f9e0c5', '#dcc6b2', '#f9ebe1', '#344857'];
        if ($('.acf-color_picker').length) {
            palettes: palette
    <?php } 
    add_action( 'admin_print_footer_scripts', 'load_color_palette_options' );?>

    Anyone got a suggestion as to what’s the best way to add a custom color picker palette to ACF5 color-picker fields without breaking its functionality?

  • Updated method posted at

    The method below runs into performance issues when combined with repeater/flexible content fields.

    This method has worked for me:

    function my_acf_admin_head() {
    	echo "
      	acf.add_action('ready append', function() {
      		acf.get_fields({ type : 'color_picker'}).each(function() {
      			  palettes: ['#efefef', '#0093d0', '#235164', '#203051', '#1b2945', '#181717'],
      			  change: function(event, ui) {
      					$(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
    add_action( 'acf/input/admin_head', 'my_acf_admin_head' );
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.