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.

Related:  WordPress Plugin Development Strategies
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 earning an online (semi)passive income. Learn more

Mega Plugin Bundle:

CodeCanyon Portfolio:

Online Courses:

Recommended Theme:

Popular Posts:

Latest Posts:

To Top