Customise Color Picker Swatches

• frysteen

• March 28, 2014 at 10:24 am

Hello all,

I was just wondering if there is a way to customise the 8 swatches that appear at the bottom of the colour picker when selecting a colour?

Would be great o put my client’s colours in there so that it is just that little easier for them to not stuff up my design 😉

• Matthew McVickar

• March 29, 2014 at 5:06 pm

The color picker uses Iris. You can send a palette to existing Iris objects via Javascript as described in the Iris documentation. Here’s some example code to change all of the swatches/palettes on the post edit page. Put this in your theme’s functions file:

function load_javascript_on_admin_edit_post_page() {
  global $parent_file;

  // If we're on the edit post page.
  if ($parent_file == 'post-new.php' ||
      $parent_file == 'edit.php') {
    echo "
      <script>
      jQuery(document).live('acf/setup_fields', function(e, div){
        jQuery('.color_picker').each(function() {
          jQuery(this).iris({
            palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
          });
        });
      });
      </script>
    ";
  }
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• Matthew McVickar

• March 29, 2014 at 5:53 pm

I discovered something else: you can use the Iris change callback to make it so the ‘Current Color’ swatch (the one this you click to open the color picker) gets updated live along with the color changes instead of needing a Save and page refresh before updating.

Here’s the updated code doing both the custom swatches and ‘Current Color’ updating:

function load_javascript_on_admin_edit_post_page() {
  global $parent_file;

  // If we're on the edit post page.
  if ($parent_file == 'post-new.php' ||
      $parent_file == 'edit.php') {
    echo "
      <script>
      jQuery(document).ready(function(){
        jQuery('.color_picker').iris({
          palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],
          change: function(event, ui){
            jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
          }
        });
      });
      </script>
    ";
  }
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• curiouser

• July 15, 2014 at 7:09 am

@Matthew McVickar has a great answer and it worked for me with minor modification. $parent_file has query parameters appended to it sometimes:

function load_javascript_on_admin_edit_post_page() {
	global $parent_file;

  // If we're on the edit post page.
	if (
	  strpos($parent_file, 'post-new.php') !== -1 ||
	  strpos($parent_file, 'edit.php') !== -1 ||
	  strpos($parent_file, 'post.php') !== -1
	) {
		echo "
		  <script>
		  jQuery(document).ready(function(){
			jQuery('.color_picker').iris({
			  palettes: ['#031649', '#FFF', '#CCC', '#999', '#666', '#333', '#000'],
			  change: function(event, ui){
				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
			  }
			});
		  });
		  </script>
		";
	}
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• curiouser

• July 15, 2014 at 7:19 am

Oops, I had a syntax error, PHP’s strpos doesn’t return -1 if a string isn’t found, it returns FALSE.

function load_javascript_on_admin_edit_post_page() {
	global $parent_file;

  // If we're on the edit post page.
	if (
	  strpos($parent_file, 'post-new.php') !== -1 ||
	  strpos($parent_file, 'edit.php') !== -1 ||
	  strpos($parent_file, 'post.php') !== -1
	) {
		echo "
		  <script>
		  jQuery(document).ready(function(){
			jQuery('.color_picker').iris({
			  palettes: ['#031649', '#FFF', '#CCC', '#999', '#666', '#333', '#000'],
			  change: function(event, ui){
				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
			  }
			});
		  });
		  </script>
		";
	}
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• ciceron

• August 7, 2014 at 5:18 am

I’m trying this with version 5, and I had to adjust this a little — to change the jQuery selector from ‘.color_picker’ to ‘.acf-color_picker’. Here’s my code:

function load_javascript_on_admin_edit_post_page() {
	global $parent_file;

  // If we're on the edit post page.
	if (
	  strpos($parent_file, 'post-new.php') !== -1 ||
	  strpos($parent_file, 'edit.php') !== -1 ||
	  strpos($parent_file, 'post.php') !== -1
	) {
		echo "
		  <script>
		  jQuery(document).ready(function(){
			jQuery('.acf-color_picker').iris({
			  palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
			  change: function(event, ui){
				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
			  }
			});
		  });
		  </script>
		";
	}
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• ciceron

• August 8, 2014 at 4:21 am

Update. My bad about the strpos() !== -1. Instead, those should be strpos() !== FALSE. Also, I was finding errors on some other jQuery-heavy admin pages, so I added a javascript check for the ‘.acf-color_picker’ element. Here’s my revised code:

function load_javascript_on_admin_edit_post_page() {
	global $parent_file;

  // If we're on the edit post page.
	if (
	  strpos($parent_file, 'post-new.php') !== FALSE ||
	  strpos($parent_file, 'edit.php') !== FALSE ||
	  strpos($parent_file, 'post.php') !== FALSE
	) {
		echo "
		  <script>
		  jQuery(document).ready(function($){
			if ($('.acf-color_picker').length) {
			$('.acf-color_picker').iris({
			  palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
			  change: function(event, ui){
				$(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
			  }
			});
			}
		  });
		  </script>
		";
	}
}
add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');

• AC

• December 19, 2014 at 11:02 am

Kudos to you guys for trying to solve this. I tried above solution but can’t get it to work 100%.

I managed to solve to things:

1. When changing palettes the mode in iris changes aswell. i solved this by adding: mode: ‘hsv’,(See documentation: http://automattic.github.io/Iris/). This is standard in wpColorPicker that acf uses.
2. Sometimes the values in the hex value box didn’t change when i did changes on the color picker, i think that is solved now.

See my revised jquery code below:

 <script>
        jQuery(document).ready(function($){
          if ($('.acf-color_picker').length) {
            $('.acf-color_picker').each(function() {
              $( this ).iris({
                mode: 'hsv',
                palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
                change: function(event, ui){
                  $(this).find('.wp-color-result').css('background-color', ui.color.toString());
                  $(this).find('.wp-color-picker').val(ui.color.toString());
                }
              });
            });
          }
        });
        </script>

HOWEVER
I use Flexible Content for some of my color picker fields and those are not initialized on page load. Therefore above hack doesn’t affect them.

I think the best solution is to do these changes when ACF initializes.

The only way i could accomplish this was to change the file: /wp-content/plugins/advanced-custom-fields-pro/js/input.min.js

Which isn’t good since it will get removed on updates.

I would really appreciate if Elliott or someone could help to solve this via a function or a plugin.

Best regards
Anton

• 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.

• AC

• December 19, 2014 at 12:20 pm

Also solved a problem where the value in the colorpicker (not the input field) gets nulled after each post update.

Above code updated.

• AC

• March 4, 2015 at 4:51 am

ABOVE CODE SLOWS DOWN BACKEND!

I’m using nested Flexible Content fields and this function really slows down my backend when dealing with alot of fields. Also it slows down the Media-modal that comes up when you choose a picture for example.

It seems append is called to often? I can’t figure out why it slows down at the moment, i’m putting this on ice until i have more time.

Hopefully Elliot makes this functionality part of core!

• paulgeisler

• March 10, 2015 at 9:11 pm

Praise and honor to you AC. Thanks for the code!

• idflood

• April 10, 2015 at 9:45 pm

Maybe this alternate solution is a little bit faster. It simply change the default option of the colorpicker when there are acf fields on the page.

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

  echo "<script>
  (function($){
    try {
      $.wp.wpColorPicker.prototype.options = {
        palettes: " . json_encode($client_colors) . "
      };
    }
    catch (e) {}
  })(jQuery)
  </script>";
}

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

• SudoCat

• October 14, 2015 at 9:55 am

I got stuck on this today, and all of these solutions seems a little overkill to me. I came up with this, which seems to be working fine for me. I’ve got mine pulling in the palettes from an options page, but the general idea should still be clear.

function acf_iris_palette(){
  $palette = json_encode( array_column( get_field('palette', 'options'), 'colour' ) );
  ?>
	<script type="text/javascript">
    jQuery(function($){
      var acfColourPicker = $('[data-type="color_picker"] input[type="text"]');
      if ( acfColourPicker.length )
        acfColourPicker.iris('option', 'palettes', <?php echo $palette; ?>);
    });
	</script>
  <?php
}
add_action( 'admin_print_scripts', 'acf_iris_palette', 90 );

Hope that helps somebody 🙂

Edit: Apologies, I realise this doesn’t work on repeater fields or other dynamically generated fields. I’ll update this when I fix it.

• PthPndr

• March 5, 2016 at 2:46 am

@idflood, this was working great for me until ACF 5.3.3 and above.

Now it no longer loads the custom palette. Any chance someone has a fix or update for this?

• kevinch

• March 29, 2016 at 12:37 pm

Quick heads up. Tested idflood‘s solution and it was working locally but not online (same Wp configuration, didn’t understand why) and got it working with AC‘s answer from December 19, 2014, both locally and online.
If it can help.

• ractoon

• April 12, 2016 at 7:52 am

Recently updated my solution at https://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/ to address performance issues and compatibility with recent ACF PRO versions. Can give it a shot and see if it works for you as well.

• emrl

• March 2, 2017 at 5:39 am

Just for future reference, this has been added in v5.3.6.

At bottom of page here:
https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

acf.add_filter('color_picker_args', function( args, $field ){
	
	// do something to args
	args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
	
	
	// return
	return args;
			
});

• whoisandywhite.com

• June 28, 2017 at 11:29 pm

This is a lovely answer, thank you SudoCat