Adding WordPress colorpicker in widget settings

by

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:
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.

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>

Leave a Comment