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.
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
enqueue() method which will load scripts at the proper time.)
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.