wpColorPicker is not a function!

6 comments

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

2. 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();
       });
   });
   });
   

3. 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. 😉

4. // 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.

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

6. 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.

Comments are closed.