Since WP 3.5, a new CSS gradient-based color picker called Iris was added. The new Iris color picker is shown off in the Theme Customizer for your custom theme.
How Add jQuery Color Picker WordPress Theme or Plugin?
In this tutorial, I’m going to show you how to add the jquery color picker WordPress theme or plugin. I will show you how to add WordPress color picker easily inside the WordPress user interface.
Let’s get started.
Enqueue the color picker script and style
We need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the functions.php file. Just include a jQuery file and style-sheet file by this script.
// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );
}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);
Add jquery for color picker
Now create a new javascript file as like cp-active.js and keep it above defined “/js/cp-active.js” file path using bellows code.
jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});
Creating an input field
Add a textbox to your settings page with a CSS class for the color picker, where you want to display the input text. I have use “color_code” for input $variable.
<input id="color_code" class="color-picker" name="color_code" type="text" value="" />
It’s enough for adding jquery color picker WordPress theme or plugin. Ask any question throw comment.
Thank you