Reply To: Customise Color Picker Swatches

• AC

• December 19, 2014 at 12:08 pm

Eureka!

Thanks to @ractoon and this snippet i managed to solve it:
http://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/

This is how my function looks right now:

In my child themes functions.php i declare the colors:

// Adds client custom colors to WYSIWYG editor and ACF color picker. 
$client_colors = array(
    "222222",
    "8dc4d5",
    "e1523d",
    "eeeeee",
    "323232"
);

Then in my main themes functions.php:

global $client_colors;
  array_push($client_colors, "FFFFFF", "000000");

  function change_acf_color_picker() {

    global $parent_file;
    global $client_colors;
    $client_colors_acf = array();

    foreach ( $client_colors as $value ) {
      $client_colors_acf[] = '#'.$value;
    }

    $client_colors_acf_jquery = json_encode($client_colors_acf);

    echo "<script>
    (function($){
      acf.add_action('ready append', function() {
        acf.get_fields({ type : 'color_picker'}).each(function() {
          $(this).iris({
            color: $(this).find('.wp-color-picker').val(),
            mode: 'hsv',
            palettes: ".$client_colors_acf_jquery.",
            change: function(event, ui) {
              $(this).find('.wp-color-result').css('background-color', ui.color.toString());
              $(this).find('.wp-color-picker').val(ui.color.toString());
            }
          });
        });
      });
    })(jQuery);
  </script>";
  }

  add_action( 'acf/input/admin_head', 'change_acf_color_picker' );

One problem remains though: when i click(not drag circle) on the colorpicker, it seems to hold the old color value from when i’ve grabbed the circle and dragged it around. This becomes obvious when i drag the vertical slider.