Step 1
Enqueue the script & stylesheet for the WordPress color picker.
1 2 |
wp_enqueue_script('wp-color-picker'); wp_enqueue_style( 'wp-color-picker' ); |
Step 2
Add an id="my-color-selection"
or class="my-color-selection"
reference to the custom meta field you would like to use as the color picker.
You can also add a default color value="#ffffff"
for the color picker and default value="#ffffff"
.
It should look as follows:
1 |
<input name="my-color-selection" type="text" id="my-color-selection" value="#ffffff" data-default-color="#ffffff"> |
Step 3
Add the script that connects the color picker to the custom meta field you created.
1 2 3 4 5 |
<script type="text/javascript"> jQuery(document).ready(function($) { $('#my-color-selection').wpColorPicker(); }); </script> |