Connect with us

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

coding

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

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.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in coding

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top