Customising Wordpress Color Picker

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

yes,

Wordpress uses the Iris colorpicker , and if you will go to it´s page you will see all the methods and options ..

Basically , you add this :

 palettes: ['#e5003d','#A6FF4C','#757584','#99CCFF','#00c1e8','#111111','#ECECFB']

to your option when initializing the object ..

    jQuery('#my-ID .my-color-picker-class').each(function(){
        jQuery(this).wpColorPicker({
            // you can declare a default color here,
            // or in the data-default-color attribute on the input
            //defaultColor: false,

            // 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,
            // set  total width
            width : 200,
            // show a group of common colors beneath the square
            // or, supply an array of colors to customize further
            palettes: ['#444444','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
        });

All this of course if you code your own custom field..

If you use some plugin or such - It will depend on that plugin mechanism ..

Answer 2

I found this information here (link).

You should use the existing Wordpress function to modify the color palette like so:

function my_mce4_options( $init ) {
$default_colours = '
    "000000", "Black",
    "993300", "Burnt orange",
    "333300", "Dark olive",
    "003300", "Dark green",
    "003366", "Dark azure",
    "000080", "Navy Blue",
    "333399", "Indigo",
    "333333", "Very dark gray",
    "800000", "Maroon",
    "FF6600", "Orange",
    "808000", "Olive",
    "008000", "Green",
    "008080", "Teal",
    "0000FF", "Blue",
    "666699", "Grayish blue",
    "808080", "Gray",
    "FF0000", "Red",
    "FF9900", "Amber",
    "99CC00", "Yellow green",
    "339966", "Sea green",
    "33CCCC", "Turquoise",
    "3366FF", "Royal blue",
    "800080", "Purple",
    "999999", "Medium gray",
    "FF00FF", "Magenta",
    "FFCC00", "Gold",
    "FFFF00", "Yellow",
    "00FF00", "Lime",
    "00FFFF", "Aqua",
    "00CCFF", "Sky blue",
    "993366", "Brown",
    "C0C0C0", "Silver",
    "FF99CC", "Pink",
    "FFCC99", "Peach",
    "FFFF99", "Light yellow",
    "CCFFCC", "Pale green",
    "CCFFFF", "Pale cyan",
    "99CCFF", "Light sky blue",
    "CC99FF", "Plum",
    "FFFFFF", "White"
    ';
$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",
    "00aae7", "Color 7 Name",
    "282828", "Color 8 Name"
    ';
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
$init['textcolor_rows'] = 6; // expand colour grid to 6 rows
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

You can also change the number of rows and columns:

$init['textcolor_rows'] = 5;
$init['textcolor_cols'] = 10;

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:

1. Go to wp-admin/js/iris.min.js
2. 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"]
3. 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.
4. Upload to server.

Works for now. But haven't tried yet if this survives the next Wordpress update.