WordPress – Using Colorpicker in your plugins

Hello,

While I have been working on a new WordPress plugin, I wanted to use a Color picker, I started my usual lookup on WordPress codex to see how can I go about it. So here are my findings and details on how to use a color picker within your plugin.

Most of the information is gathered from wordpress.org

Anyway lets get back to the point. These lines of code are taken from my WordPress plugin called Youtube Channel Embed PRO and modified to suit readability. First thing that is required is to correctly include color picker styles and javascript files required as shown below

In your plugin code add and action as shown below

 

 

Most important part above is to include wp-color-picker dependency to your_javascript_file.js

Now we will enqueue our color picker styles as shown below

Now that we have our scripts and styles sorted out we can use color picker in your plugin pages now, as shown below

As you can see that we are applying jQuery function wpColorPicker() on our input boxes that has class color-picker.

And thats pretty much it. You have just converted a normal text box to a color picker. End result will look like this

wordpress color picker

 

Dependencies

WordPress Color Picker will not work on older version, It will required at least version 3.5.x for you to make use of it. Else you have still use some other color picker solution,  there are heaps of them available for Free.

I hope that this post will help you sort your color picker woes. I found it really useful and easy to use. In case I missed a point or 2 please leave your comments to let me know so that others can benefit from it.

 

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.