Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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: '/' });

            // Apply any selected colours
            applySpotColours();
        }
    });
share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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)

share|improve this answer
    
Perfect mate, does exactly what I wanted. –  DigitalSea Feb 11 '13 at 0:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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