I’ve started fully integrating the WordPress Theme Customisation API into my WordPress theme and it’s phenomenal. One issue I’ve encountered is that including the default colour picker is great, but I am trying to determine how to change the configuration options for the Iris colour picker being used.

By default the colour picker in the Theme Customization pane has a colour palette beneath the picker and on the right hand side it has a lightness vertical bar. I would like to mimick the settings I am using on the front-end of my theme (using the Iris picker).

How would I go about changing the Theme Customization colour picker to use these settings? See below for the settings I am using for the front-end of my site for something completely different.

   $("#theme-color").wpColorPicker({
        border: false,
        controls: {
            horiz: 's', // horizontal defaults to saturation
            vert: 'l', // vertical defaults to lightness
            strip: 'h' // right strip defaults to hue
        },
        mode: 'hsl',
        palettes: false,
        width: 160,
        change: function(event, ui) {
            var selectedColor = ui.color.toString();

            $.removeCookie('spot_colour');

            // Set our cookie to last for 1 day
            $.cookie('spot_colour', selectedColor, { expires: 1, path: "https://wordpress.stackexchange.com/" });

            // Apply any selected colours
            applySpotColours();
        }
    });

1 Answer
1

The color picker thing is registered as a jQuery UI widget, so you could modify its prototype object before the widget is used in the page:

add_action('customize_controls_print_footer_scripts', function(){

  ?>
  <script>

    jQuery(document).ready(function($){

      $.wp.wpColorPicker.prototype.options = {

        border: false,
        // other options here...

      };         
    });   

  </script>
  <?php

}); 

(You should put that in your .js file)

Leave a Reply

Your email address will not be published. Required fields are marked *