Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to add the WordPress default colorpicker in widget settings form. Here's what I'm trying:

In my functions.php, I have this:

function widgets_scripts( $hook ) {
    if ( 'widgets.php' != $hook ) {
    wp_enqueue_style( 'wp-color-picker' );        
    wp_enqueue_script( 'wp-color-picker' ); 
add_action( 'admin_enqueue_scripts', 'widgets_scripts' );

In my widget file, I have this:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#<?php echo $this->get_field_id( 'color' ); ?>').wpColorPicker();
<input id="<?php echo $this->get_field_id( 'color' ); ?>" type="text" name="<?php echo $this->get_field_name( 'color' ); ?>" value="<?php echo esc_attr( $instance['color'] ); ?>" />

Using the above code, I can see the colorpicker "Select color" button, but it does not let me click it initially.

It only lets me click after the widget is saved. I'm guessing that it is because of assigning the ID.

If I try to use a css class name, it displays the button 2 times (I don't know why, even the class exists only once in a widget). This is what I see if I use class name: enter image description here

Also i think class name will cause the problem if same widget is used multiple times. That's why I'm trying to use a dynamic ID for the input field.

share|improve this question

2 Answers 2

The following worked for me. I using class attribute instead of ID to match multiple color pickers.

<script type="text/javascript">
    jQuery(document).ready(function($) { 
            jQuery('.color-picker').on('focus', function(){
                var parent = jQuery(this).parent();

My Widget form is set up like :

    <label for="<?php echo $this->get_field_id( 'font_color' ); ?>" style="display:block;"><?php _e( 'Font Color:' ); ?></label> 
    <input class="widefat color-picker" id="<?php echo $this->get_field_id( 'font_color' ); ?>" name="<?php echo $this->get_field_name( 'font_color' ); ?>" type="text" value="<?php echo esc_attr( $font_color ); ?>" />
share|improve this answer

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 &amp; 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.

// 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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.