wpColorPicker nu este o funcție!

Aceasta se întâmplă pentru că apelați funcția wpColorPicker înainte de încărcarea scriptului wp-color-picker, așa că pentru a rezolva această situație apelați funcția wpColorPicker() după încărcarea scriptului wp-color-picker adăugând următorul script în fișierul js, în acest exemplu l-am adăugat în wp-color-picker-script.js.

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

și apoi încărcați-l folosind acțiunea admin_enqueue_scripts după încărcarea scriptului wp-color-picker și adăugați wp-color-picker ca dependență pentru acesta, așa cum este arătat în următorul cod.

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

Încearcă să modifici codul astfel.. sper că va funcționa

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

În template-ul tău

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

În fișierul tău js (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();
    });
});
});

Un alt motiv posibil pentru această problemă ar putea fi un filtru defectuos pe script_loader_tag, exact așa am întâmpinat și eu problema.

În acest caz, scriptul a fost încărcat corect prin enqueue, dar acest filtru a eliminat complet tag-ul de script, astfel încât acesta nu a fost încărcat deloc, ceea ce a dus la eroarea în consolă "wpColorPicker is not a function".

Doar în cazul în care cineva întâmpină aceeași problemă. ;-)

// reparare wpColorPickerL10n
<?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'            => __( 'Șterge' ),
                'clearAriaLabel'   => __( 'Șterge culoarea' ),
                'defaultString'    => __( 'Implicit' ),
                'defaultAriaLabel' => __( 'Selectează culoarea implicită' ),
                'pick'             => __( 'Selectează Culoarea' ),
                'defaultLabel'     => __( 'Valoarea culorii' ),
            )
        );
    }
}
?>

Am acest cod în fișierul functions.php al unui temă child.

Apelarea directă a scriptului wp-color-picker fără a crea o funcție:

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

Această eroare apare deoarece aveți script_debug activat. Dezactivați-l.

define('SCRIPT_DEBUG', false);

Știu că nu este cea mai bună soluție, dar nu am reușit să găsesc o altă metodă. Se pare a fi un bug în nucleul WordPress.