WordPress: Configure the color picker of a custom…

WordPress: Configure the color picker of a custom field type

To set up the default colors for the color picker of custom type fields, simply add a JavaScript snippet to override the default configuration.In your functions.php file, add the following code, and configure the palette as you wish: add_action( 'admin_foo...

Written by Thomas Bourdin Published on May 15, 2014 Updated on August 20, 2026 1 min read

To set up the default colors for the color picker of custom type fields, simply add a JavaScript snippet to override the default configuration.
In your functions.php file, add the following code, and configure the palette as you wish:

add_action( 'admin_footer', 'backgroundColor_hook' );
function backgroundColor_hook( $hook_suffix )
{
?&gt;
&lt;script type="text/javascript"&gt;

jQuery( document ).ready(function() {
jQuery('.js-types-colorpicker').each(function(){
jQuery(this).wpColorPicker({
palettes: ['#d21268','#146c52','#82b600','#00949b','#010080','#001c4b']
});

});

});
&lt;/script&gt;
&lt;?php
}

Reproduce this customization today

The principle of the hook remains useful, but the administration screens and WordPress APIs have evolved since the publication. Test the code in a staging environment with the exact version of the site's core, theme, and plugins.

Save the files and the database before making any changes.
Control user capabilities, nonces, input validation, and output escaping.
Place customizations in a dedicated plugin or a child theme to preserve updates.

Reference: official WordPress plugin development manual.