i tried to use iris color picker in my plugin admin area but when i implemented i'm getting this error-

TypeError: $(...).wpColorPicker is not a functionCode-

function sam()
wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');
add_action( 'admin_enqueue_scripts', 'sam' );


<input type="text" value="#bada55" class="ir" />


 <script type="text/javascript">

Why am I getting this error any clue? where am I making wrong?

  • try it with admin_print_scripts instead of admin_enqueue_scripts
    – passatgt
    Commented Aug 25, 2013 at 11:05
  • Did you read the instructions
    – Chris_O
    Commented Aug 25, 2013 at 11:19
  • yes i read that instructions and used it but same error
    – rram
    Commented Aug 25, 2013 at 11:28
  • @passatgt Thanks i tried admin_print_scripts instead admin_enqueue_scripts but no effect.
    – rram
    Commented Aug 25, 2013 at 11:30
  • another possible solution it is due to your php version, I upgrade from php 5.4 to php5.6 the problem is gone.
    – Shiro
    Commented Jun 30, 2017 at 13:56

6 Answers 6


This is happening because you are calling wpColorPicker function before loading wp-color-picker script so to overcome this situation call wpColorPicker() function after loading wp-color-picker script by adding following script in js file in this example i have added it in wp-color-picker-script.js.


and then enqueue it using admin_enqueue_scripts action after enqueuing wp-color-picker script and add wp-color-picker as a dependency for it as shown in the following code.

add_action( 'admin_enqueue_scripts', 'wp_enqueue_color_picker' );
function wp_enqueue_color_picker( $hook_suffix ) {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker');
    wp_enqueue_script( 'wp-color-picker-script-handle', plugins_url('wp-color-picker-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
  • Thanks.but still am facing the same problem.i just want to know 3 things so that i'll be improving or i can debug myself.What is $hook_suffix and handler in wp_enqueue_script and dependency?
    – rram
    Commented Aug 26, 2013 at 19:46

Try with changing your code like this..hope it will work

function sam()

wp_enqueue_script('wp-color-picker', plugins_url('wp-color-picker-script.js', __FILE__ ), array( 'farbtastic' ), false, true );

add_action( 'admin_enqueue_scripts', 'sam' );

In your template

<div class="color-picker" style="position: relative;">
<input type="text" value="#bada55" class="ir" id="color" />
  <div style="position: absolute;" id="colorpicker"></div>

In your js file (wp-color-picker-script.js)

jQuery(document).ready(function($) {

if ( $("#color").val().length === 0 )
    var input = $( "#color" );
     input.val( input.val() + "#ffffff" );
$('#color').click(function() {

$(document).mousedown(function() {
    $('#colorpicker').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )

Another possible reason for this is a rogue filter on script_loader_tag, this was what was happening for me.

In this case, the script was enqueued properly, but this filter was removing the script tag completely, so it was not being loaded at all, then giving the wpColorPicker is not a function console error.

Just in case anyone has the same problem. ;-)

// add wpColorPickerL10n repair
    if( is_admin() ){
    add_action( 'wp_default_scripts', 'wp_default_custom_scripts' );
    function wp_default_custom_scripts( $scripts ){
        $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker.min.js", array( 'iris' ), false, 1 );
        did_action( 'init' ) && $scripts->localize(
                'clear'            => __( 'Clear' ),
                'clearAriaLabel'   => __( 'Clear color' ),
                'defaultString'    => __( 'Default' ),
                'defaultAriaLabel' => __( 'Select default color' ),
                'pick'             => __( 'Select Color' ),
                'defaultLabel'     => __( 'Color value' ),

I have this in my functions.php of an child theme.


Just call wp-color-picker script without creating a function:

wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('js/my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

This error is showing because you have script_debug is set on . turn it off .

define('SCRIPT_DEBUG', false);

I know its not a good solution but i m unable to find the other way around. Looks like bug in wp core.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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