WordPress offers a built in way to create a color picker in the WordPress customizer. This is often used by themes to allow users to create unique color schemes for their site.

The default color picker includes a built in list of predefined colors to allow users to easily set a base color. This is very helpful as the picker with nearly unlimited options can be a bit daunting. However, these colors are set by WordPress and don’t always relate to the theme being used.

It occurred to me that since BigBox adds several color controls it might be nice to give slightly more helpful suggestions to users. The WordPress color picker is a jQuery plugin implementation of Automattic’s Iris color picker. The built in customizer control Javascript implementation unfortunately does not leave much room for expansion when it comes to adjusting the options for the picker.

To get around this a custom control isss created and more relevant colors sent through the palettes configuration option. Below are a few quick code snippets to illustrate the technique:

First, extend the existing control and use the to_json() method to pass a custom list (set when registering the control) of hexadecimal colors that will be accessible in the Javascript.

(This code does not include enqueuing the Javascript below since it is bundled in a single file in BigBox. If you need to do this separately all controls process an enqueue() method which will load scripts at the proper time.)

Unfortunately the existing color control Javascript keeps a lot of variables in the local scope so simply extending and modifying the ready() method of the control won’t work. The entire method needs to be duplicated/overwritten.

The only change here is passing palettes: palettes (lines #21 and #39) to the configuration of the picker (along with a bit of ES6 and standards updates).

Then just implement the control and pass palettes to the arguments:

See line #25. The palette can take any number of colors but 6-8 seems to work the best.

Now users are presented with relevant default color options — much more helpful.