wpColorPicker non è una funzione!

Questo accade perché stai chiamando la funzione wpColorPicker prima di caricare lo script wp-color-picker. Per risolvere questa situazione, chiama la funzione wpColorPicker() dopo aver caricato lo script wp-color-picker aggiungendo il seguente script in un file js. In questo esempio l'ho aggiunto in wp-color-picker-script.js.

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

Quindi caricalo utilizzando l'azione admin_enqueue_scripts dopo aver caricato lo script wp-color-picker e aggiungi wp-color-picker come dipendenza come mostrato nel seguente codice.

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

Prova modificando il tuo codice in questo modo... spero che funzioni

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

Nel tuo 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>

Nel tuo file 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'altra possibile ragione per questo problema è un filtro non autorizzato su script_loader_tag, questo è quello che stava succedendo nel mio caso.

In questo caso, lo script era stato correttamente accodato, ma questo filtro rimuoveva completamente il tag script, quindi non veniva caricato affatto, generando poi l'errore nella console "wpColorPicker is not a function".

Lo condivido nel caso qualcuno abbia lo stesso problema. ;-)

// Aggiunge la localizzazione per 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'            => __( 'Pulisci' ),
                'clearAriaLabel'   => __( 'Pulisci colore' ),
                'defaultString'    => __( 'Predefinito' ),
                'defaultAriaLabel' => __( 'Seleziona colore predefinito' ),
                'pick'             => __( 'Seleziona Colore' ),
                'defaultLabel'     => __( 'Valore colore' ),
            )
        );
    }
}
?>

Ho questo nel mio functions.php di un tema child.

Richiama semplicemente lo script wp-color-picker senza creare una funzione:

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

Questo errore viene visualizzato perché hai script_debug attivo. Disattivalo.

define('SCRIPT_DEBUG', false);

So che non è una soluzione ideale ma non sono riuscito a trovare un'altra soluzione alternativa. Sembra un bug nel core di WordPress.