Add color picker to your plugin or theme in wordpress 3.5 and heigher version

Want to add new color picker in your wordpress plugin or theme ?

Here is step by step guide for how to add new color picker in your plugin or theme

Step 1 :- Register Wp color picker style and script in your plugin

First create new javascript in your plugin or theme named as “my-color-picker.js”
add below code to your plugin or theme functions.php file

1
2
3
4
5
6

add_action( ‘admin_enqueue_scripts’, ‘my_plugin_color_picker’ );
function my_plugin_color_picker( $hook_suffix ) {
wp_enqueue_style( ‘wp-color-picker’ );
wp_enqueue_script( ‘my-plugin-script’, plugins_url(‘my-color-picker.js’, __FILE__ ),
array( ‘wp-color-picker’ ), false, true );
}

Now your plugin have a my-color-picker.js file with color picker script as a dependency.

So now we can use Color Picker Jquery method inside my-color-picker.js

Step2 :- Add color picker field to your plugin or theme admin page You can set default color with use of data-default-color attaribute

1

<input class="”color-picker-field”" type="”text”" value="”#bada55″" />

Step3:- Call color picker function inside my-color-picker.js file

1

jQuery(document).ready(function($){ $(‘.color-picker-field’).wpColorPicker(); });