• 2
name Punditsdkoslkdosdkoskdo

Modifying Wordpress Color Picker

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

We have to wp_enqueue_script the content and wp_enqueue_style the style with add_action to the functions.php record. Simply incorporate a jQuery document and template record by this content. 

/Register Scripts & Styles in Admin board 

work custom_color_picker_scripts() { 

wp_enqueue_style( 'wp-shading picker' ); 

wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), exhibit( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-contact punch' ), false, 1 ); 

wp_enqueue_script( 'cp-dynamic', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', genuine ); 

add_action( 'admin_enqueue_scripts', custom_color_picker_scripts); 

Presently make another javascript record as like cp-active.js and keep it avobe characterized "/js/cp-active.js" document way utilizing cries code. 


/or in the information default-shading quality on the information 

defaultColor: genuine, 

/a callback to flame at whatever point the shading changes to a substantial shading 

change: function(event, ui){}, 

/a callback to flame when the info is exhausted or an invalid shading 

clear: work() {}, 

/conceal the shading picker controls on burden 

conceal: genuine, 

/demonstrate a gathering of basic hues underneath the square 

palettes: genuine 


Add a textbox to your settings page with a CSS class for the shading picker, where you need to dispaly the info content. I have use "color_code" for info $variable. 

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

It would be ideal if you see more subtleties on Add jQuery Color Picker WordPress Theme or Plugin

  • 0
Reply Report

in simple manner,what we willing to do:

  1. plugin to make /save theme options in wp_options database table
  2. theme able to use these saved options from plugin to achieve this let us do these simple steps:

first step you register/enqueue script file at your theme to use to handle plugin saved options (functions.php):

function enqueue_function_name() {
        wp_enqueue_script( 'your-script-handle', 'scriptLocationilename.js',array('jquery'));

add_action( 'wp_enqueue_scripts', 'enqueue_function_name' );

second step Define an array of what ever options you want to pass into the script in your theme php files (may be header.php or footer.php before any code):

$color_options = get_option('theme-color');
$script_params = array(
    'fieldThemeColor' => $color_options['background'],
//put here all of your options

Localize the script via wp_localize_script:

wp_localize_script( 'your-script-handle', 'scriptParams', $script_params );

third step : now this array of options passed to JS ,you can easily deal with it to change your style like

  • 1
Reply Report


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(){
            // 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 ..

  • 2
Reply Report