Reply To: Customise Color Picker Swatches

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