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
|
1 |
add_action( 'admin_enqueue_scripts', 'my_color_picker_function' ); |
|
1 2 3 4 |
function jcorgytce_enqueue_color_picker() { wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'script_handle', plugins_url('your_javascript_file.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); } |
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
|
1 2 3 4 5 |
add_action('wp_head', 'my_style_incl_function', 10); function my_style_incl_function() { wp_enqueue_style( 'wp-color-picker' ); } |
Now that we have our scripts and styles sorted out we can use color picker in your plugin pages now, as shown below
|
1 2 3 |
<!-- some other code --> <input type="text" class="color-picker" name="overlay_color" value="#EEE" data-default-color="#effeff" /> <em id="__mceDel"><!-- some other code --></em> |
|
1 2 3 4 5 |
<script type="text/javascript"> jQuery(document).ready(function($){ $('.color-picker').wpColorPicker(); }); </script> |
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
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