Customize Wordpress Color Picker

Question

Can I customize Wordpress 3.8 color picker (in custom field types) to use only the colors that I define?

I need to have only 6 colors for the client, but they do not want to have all these colors except 6 gradient colors.

It will be useful for any help ... I tried to do this for several days, but no positive solution :(

thank

Answer 1

Yes,

Wordpress uses Iris colorpicker , and if you go to its page, you will see all the methods and parameters.

Basically you add the following:

 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']
        });

, , .

- - .

Answer 2

().

Wordpress :

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');

:

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

Answer 3

wp_enqueue_script script wp_enqueue_style add_action functions.php. jQuery 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);

javascript, cp-active.js, "/js/cp-active.js", avobe, .

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
});

CSS , . "color_code" $.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

jQuery Color Picker WordPress Theme

Answer 4

:

• wp-admin/js/iris.min.js
• ( 1/3 ). :
  _palettes: [ "# 000", "# FFF", "# D33", "# D93", "# EE2", "# 81d742", "# 1e73be", "# 8224e3" ]
• . -, # d33, .
• .

It works now. But have not yet tried if this persists in the next Wordpress update.