Add a color Picker with JSColor to your WordPress plugin

WordPress comes with the color picker Farbtastic , however I find JScolor simpler and easier to use.
To use JSColor , first head over to to download it.

To include the javascript , jscolor.js you can use admin_enqueue_scripts (if you want the color picker to load on the admin side) or use wp_enqueue_scripts (if you want the color picker on the client side). In the example below , I have this loading on the admin side.

//Load Color Picker JS
function jscolor(){
$path = plugins_url('/my-plugin/');
wp_enqueue_script('jscolor',$path. 'jscolor/jscolor.js');

Note that you have to replace my-plugin with the name of the folder for your plugin.
Also the other files for jscolor should be in the same folder as the jscolor.js file.

Now add an input field,

<input class="color {adjust:false}" type="text" name="my_plugin_colorpicker" value="&lt;?php echo $options['my_plugin_colorpicker']; ?>" />

You can download a sample plugin with color picker options here

A screenshot of the colorpicker is below:

For more examples of how to use jscolor, check demo page.

Contact Us