How do I implement the WordPress Iris picker into my plugin on the front-end?

Question

This question here is asking the same question as I am, but there were no adequate answers nor a selected correct answer so I am asking again hoping if I ask in a more coherent manner I might get a response.

I am trying to implement the colour picker wheel as seen in the Wordpress Theme Customization API pane for selecting colours. Loading the scripts and styles works fine when using the hook, "admin_enqueue_scripts" works however trying to load these scripts on the front-end using the hook, "wp_enqueue_scripts" does not work. The style gets enqueued, but not the script.

I want to avoid copying over files into my plugin duplicating what is already bundled with Wordpress. There must be a way to get the Iris colour picker working on the front-end that I am not seeing.

And for those wondering why I want to do this, I am developing a plugin that adds a fly-out panel to the side of the screen which allows you to make realtime temporary styling changes to the site without having to login via the wp-admin panel.

Answer 1

This drove me mad for a while, but I got it to work by adding them with the full arguments that are used in the admin script loader rather than just referencing the handle. When I print the $wp_scripts global on the front end, iris and wp-color-picker are nowhere to be found, though all of their jQuery UI dependencies work. Anyway, not sure this is right, but it gets the job done:

function wpa82718_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(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );

Answer 2

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 stylesheet 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( 'wp_enqueue_scripts', custom_color_picker_scripts);

Now create a new javascript file as like cp-active.js and keep it avobe 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
});

Add a textbox to your settings page with a CSS class for the color picker, where you want to dispaly the input text. I have use “color_code” for input $variable.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Get details from here

Answer 3

I couldn't make it work, so I used a simple HTML 5 color picker field instead.

<input type="color">