plugin development - wpColorPicker is not a function!

admin管理员组

文章数量:1302406

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


<!--HTML-->

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

<!--SCRIPT-->

 <script type="text/javascript">
        jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});
        </script>

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

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


<!--HTML-->

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

<!--SCRIPT-->

 <script type="text/javascript">
        jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});
        </script>

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

• plugin-development
• color-picker

Share Improve this question edited Jan 8, 2015 at 8:06 Pieter Goosen 55.4k2323 gold badges115115 silver badges210210 bronze badges asked Aug 25, 2013 at 10:08 rramrram 19522 gold badges44 silver badges1010 bronze badges 5

• 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

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 5

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.

jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});

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

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>
</div>

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

jQuery(document).ready(function($) {
$('#colorpicker').hide();

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

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

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
<?php
    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(
            'wp-color-picker',
            'wpColorPickerL10n',
            array(
                '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.

本文标签： plugin developmentwpColorPicker is not a function