Simple Method to Use WordPress Color Picker in Widgets

Since WP 3.5, a new CSS gradient-based color picker called Iris was added. At my first glance, this tool provides more features and have good interface. I do not know what will happen to the Farbtastic Color Picker in the future. In my experiences, the wpColorPicker gives more than Farbtastic. Easy to use and we are done with only a few lines.
This tutorial will explain how to add the wpColorPicker in the widget options.

Enqueue the color picker script and style

To use color picker in the widget administration only, we need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the load-widgets.php filter. We can use it in the theme function.php or wrap inside the widget class.

add_action( 'load-widgets.php', 'my_custom_load' ); 
 
function my_custom_load() {     
    wp_enqueue_style( 'wp-color-picker' );         
    wp_enqueue_script( 'wp-color-picker' );     
}  

Creating an input to the widget

We need to create an text input for the color picker, in this example we classed it “my-color-picker”.

<script type='text/javascript'> 
    jQuery(document).ready(function($) { 
        $('.my-color-picker').wpColorPicker(); 
    }); 
</script> 
 
<input type="text" class="my-color-picker" name="background_color" value="" />  

The full widget class with color picker

This is the very basic widget class, all the scripts above are wrapped inside it.

class My_Color_Picker extends WP_Widget {  
  
    var $textdomain;  
  
    function __construct() {  
        $this->textdomain = 'mycolorpicker';  
  
        // This is where we add the style and script  
        add_action( 'load-widgets.php', array(&$this, 'my_custom_load') );  
  
        $this->WP_Widget(   
            'mycolorpicker',   
            'My Color Picker',   
            array( 'classname' => 'mycolorpicker', 'description' => 'Color picker widget' ),  
            array( 'width' => 460, 'height' => 350, 'id_base' => 'mycolorpicker' )  
        );  
    }  
  
    function my_custom_load() {      
        wp_enqueue_style( 'wp-color-picker' );          
        wp_enqueue_script( 'wp-color-picker' );      
    }  
  
    function widget($args, $instance) {  
        extract( $args, EXTR_SKIP );  
        echo $before_widget;  
        // Your custom code for front-end here  
        echo $after_widget;  
    }  
  
    function update($new_instance, $old_instance) {  
        $instance = $old_instance;  
        $instance = $new_instance;  
        $instance['background_color'] = $new_instance['background_color'];  
        return $instance;  
    }  
  
    function form($instance) {  
        $defaults = array(  
            'background_color' => '#e3e3e3'  
        );  
  
        // Merge the user-selected arguments with the defaults  
        $instance = wp_parse_args( (array) $instance, $defaults ); ?>  
        <script type='text/javascript'>  
            jQuery(document).ready(function($) {  
                $('.my-color-picker').wpColorPicker();  
            });  
        </script>  
        <p>  
            <label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Border Color', $this->textdomain ); ?></label>  
            <span><?php _e( 'The image border color', $this->textdomain ); ?></span>  
            <input type="text" id="<?php echo $this->get_field_id( 'background_color' ); ?>" name="<?php echo $this->get_field_name( 'background_color' ); ?>" value="<?php echo esc_attr( $instance['background_color'] ); ?>" />                              
        </p><?php  
    }  
} 

Never miss a new update again. Join my blog for free and get valuable Hacking Tricks,Security Tips,Safety Tips delivered right through your inbox.

Kindly Bookmark this Post using your favorite Bookmarking service: