Connect with us

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


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_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() {

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.

No votes yet.
Please wait...
Related:  [PHP] Fatal error: Can’t use method return value in write context
Continue Reading
You may also like...

We are a WordPress plugin developer company that focuses on useful WordPress plugin creation and empowering people to earn passive incomes from their blogs. We build unique and groundbreaking plugins that will revolutionize your blog!

Click to comment

Leave a Reply

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

More in coding

Sign up for our newsletter and get a free affiliate e-book!

About Me:

Szabi Kisded

Hi, my name is Szabi and I'm documenting my journey selling plugins on CodeCanyon. I will show you every step of it: learning to code, plugin ideas, WordPress stuff and more. Read more…

Mega Plugin Bundle:

CodeCanyon Portfolio:

Learn to Code Plugins:

Latest Promotions:

Recommended Theme:

Start Your Own Blog:

Recommended VPN:

Translate Your Blog:

AdSense Alternative:

Best Article Spinner:

Popular Posts:

Latest Posts:

To Top

Privacy Preference Center