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 ) {
        return;
    }
    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();
    });
</script>
<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:

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.

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 ) {
        return;
    }
    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();
    });
</script>
<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:

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.

• theme-development
• themes
• widgets
• color-picker

3 Answers 3

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();
                jQuery(this).wpColorPicker()
                parent.find('.wp-color-result').click();
            }); 
    }); 
</script>

My Widget form is set up like :

<p>
    <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 ); ?>" />
</p>

Mixing what I had and the solution posted by @chifliiiii, I arrived to the following:

jQuery(document).ready(function($) {

    $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();

    // Executes wpColorPicker function after AJAX is fired on saving the widget
    $(document).ajaxComplete(function() {
        $('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();
    });
});

That did the trick in a much simpler way. I tested it and it seems to be working fine. Hope this can still be helpful to you :)

The following code worked for me.

<script type="text/javascript">

    ( function( $ ){
        function initColorPicker( widget ) {
            widget.find( '.color-picker' ).not('[id*="__i__"]').wpColorPicker( {
                change: _.throttle( function() {
                    $(this).trigger( 'change' );
                }, 3000 )
            });
        }

        function onFormUpdate( event, widget ) {
            initColorPicker( widget );
        }

        $( document ).on( 'widget-added widget-updated', onFormUpdate );

        $( document ).ready( function() {
            $( '.widget-inside:has(.color-picker)' ).each( function () {
                initColorPicker( $( this ) );
            } );
        } );

    }( jQuery ) );

</script>

My widget color picker code:

<p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>"><?php _e
        ( 'Background', 'text-domain'   ); ?></label>
    <input id="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rm_background' ) ); ?>" value="<?php echo $instance['rm_background']; ?>" class="wp-color-result"/>
</p>