Sign up ×
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

3 Answers 3

up vote 9 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' );
        admin_url( 'js/iris.min.js' ),
        array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
    $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
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 '14 at 9:10

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.

// 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="" />
share|improve this answer

Unfortunately I can not leave a comment to the accepted answer ... but $colorpicker_l10n is missing the current value. It should be this:

$colorpicker_l10n = array(
    'clear'         => __( 'Clear' ),
    'defaultString' => __( 'Default' ),
    'pick'          => __( 'Select Color' ),
    'current'       => __( 'Current Color' ),

Other than that, the answer is perfect and is exactly what I was looking for.

share|improve this answer

Your Answer


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.