Customising Wordpress Color Picker - wordpress

Question

Is there any way to customize the Wordpress 3.8 color picker (on the custom field types) to use only colors i will define?
I need to have only 6 colors for a client, but they do not want to have all those colors, apart from 6 gradient colors.
Will be greatful for any help... I have been trying to do it for several days, but no positive solution:(
Thank you

Answer 1

Wordpress 3.5+ uses the Iris colorpicker which has several options available for use.
When initializing the object just assign the palettes option with an array of colors.
var colorOptions = {
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: ['#4444,44','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
};
jQuery('.my-color-picker-class').wpColorPicker(colorOptions);

Answer 2

If your using TinyMCE editor you can modify the color palette like so.
function my_mce4_options( $init ) {
$custom_colours = '
"e14d43", "Color 1 Name",
"d83131", "Color 2 Name",
"ed1c24", "Color 3 Name",
"f99b1c", "Color 4 Name",
"50b848", "Color 5 Name",
"00a859", "Color 6 Name"
';
$init['textcolor_map'] = '['.$custom_colours.']';
// Set number of color rows
$init['textcolor_rows'] = 3;
// Set number of color columns
$init['textcolor_cols'] = 2
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Answer 3

We need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the functions.php file. Just include a jQuery file and stylesheet file by this script.
// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );
}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);
Now create a new javascript file as like cp-active.js and keep it avobe defined “/js/cp-active.js” file path using bellows code.
jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});
Add a textbox to your settings page with a CSS class for the color picker, where you want to dispaly the input text. I have use “color_code” for input $variable.
<input id="color_code" class="color-picker" name="color_code" type="text" value="" />
Please see more details on Add jQuery Color Picker WordPress Theme or Plugin

Answer 4

Here's a quick & dirty solution:
Go to wp-admin/js/iris.min.js
Search the palette colors there (about 1/3 from the beginning of the file). I found this:
_palettes:["#000","#fff","#d33","#d93","#ee2","#81d742","#1e73be","#8224e3"]
Replace these defaults with your own custom colors. I left black and white and then added our brand colors instead of #d33 and the rest.
Upload to server.
Works for now. But haven't tried yet if this survives the next Wordpress update.