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