Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

How to Add Color Picker to WordPress Theme/Plugin/Option Panel

Hi,

Any web developer can’t decline that he has not work with WordPress. so one must learn new thing every day and we love to learn new thing everyday. Today i would like to share how to add color picker to any form field used in either WordPress theme or option panel. It is also needed if you are developing any plugin and wanted to add color form field.

It’s easy to add color picker for any form field as WordPress is giving support in their core library. You just need to use the WordPress functions to implement it. I will guide you how to implement it. Here is code for implementing it in any of front end theme file.

 

Step 1


1. Enqueue wp-color-picker js and css files in theme’s functions.php file.

function ci_enqueue_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_arr = array('clear' => __('Clear'), 'defaultString' => __('Default'), 'pick' => __('Select Color'));
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_arr ); 
}
add_action('wp_enqueue_scripts', 'ci_enqueue_scripts', 100);

 

Step 2


Add a class to textbox where you would like to apply color picker.

<input type="text" class="clrpickercls" value="#ccc">

 

Step 3


Call the color picker method from your theme’s js file. If there is none, create one js file under your theme and enqueue it.

jQuery(document).ready(function() {
    jQuery('.clrpickercls').wpColorPicker();
});

 

Step 4


If you want to add to any admin fields, you just need to tweak below for step 1.

function ci_admin_enqueue_scripts($hook_suffix) {
    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', 'ci_admin_enqueue_scripts' );

that’s it. Isn’t it easy ? If it helps you, please share it so it might help to any of your friend.

Share: