Reply To: Customise Color Picker Swatches

• 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');