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.

        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();


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

            // Apply any selected colours

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(){



      $.wp.wpColorPicker.prototype.options = {

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




(You should put that in your .js file)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.