Add color picker to wordpress theme or admin panel

Before wordpress 3.5, you need to add manually color picker js and css files to integrate a color picker. Now WordPress 3.5 is sporting a new color picker called wp color picker (iris). The new color picker originally developed for the Custom Colors feature on WordPress.com. WordPress color picker uses CSS3 Gradients for everything. It has nice look on most displays and it is very easy to integrate and user friendly. Theme and plugin developers can now take advantage of this and add a color picker easily in their admin or plugin or theme interface. Today we’ll be look at how to add color picker to wordpress theme or admin panel. we will discuss on both end integration.

Add color picker to wordpress theme interface :-

1. Enqueue wp-color-picker js and css. may be add in theme functions.php

function colpick_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('wp-color-picker', admin_url('js/color-picker.min.js'), array('iris'), false,1);
    $colorpicker_l10n = array('clear' => __('Clear'), 'defaultString' => __('Default'), 'pick' => __('Select Color'));
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 
}
add_action('wp_enqueue_scripts', 'colpick_scripts', 100);

2. Add an input anywhere you want to show, and add a class attribute to call wp color picker. you can set a default value also.

<input type="text" class="my-input-class" value="#e9e9e9">

3. Call the color picker method. may be add theme js js/functions.js

(function ($) {
  $(function () {
    $('.my-input-class').wpColorPicker();
  });
}(jQuery));

Add color picker to wordpress admin panel :-

1. Enqueue wp-color-picker js and css in your plugin.

function color_picker_assets($hook_suffix) {
    // $hook_suffix to apply a check for admin page.
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
add_action( 'admin_enqueue_scripts', 'color_picker_assets' );

2. Add an input anywhere you want to show, and add a class attribute to call wp color picker.

<input type="text" class="my-input-class" value="#e9e9e9">

3. Call the color picker method. Add this method in my-script.js which are added previously.

(function ($) {
  $(function () {
    $('.my-input-class').wpColorPicker();
  });
}(jQuery));

So now you can easily add color picker to wordpress theme or admin panel.