Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 8 down vote accepted

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' )
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );
share|improve this answer
    
Wow, perfect. It never dawned on me to use the admin_url function and just enqueue the scripts without registering and then enqueuing them. This is probably about as close as we'll get to being able to use the core Iris colour picker and it's dependencies. Thank you. –  DigitalSea Jan 23 '13 at 3:55
1  
This got me almost there but I still had an error regarding wpColorPickerL10n, so i had to add a bit more within the function. I have updated the answer above with the wp_localize_script requirement. –  Industrial Themes May 13 '13 at 14:53
    
Thanks.. Great answer. –  Pranita Apr 9 at 9:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.