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

by

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.

3 s
3

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 );

Leave a Comment