I wrote a repeater script that clones the last field group before it. My issue is that cloned WP Color Picker fields don't open the new color spectrum when clicked on but instead opens the color picker in the group it was cloned from.

Of course, it works fine once you save the field and reload the page, but not on the fly as you clone the prior group.

Here's the field HTML:

<div class="md-repeat">

    <a href="#" class="md-repeat-add">Add Another Color Picker</a>

    <div class="md-repeat-field">
        <label for="my_field">My Color Picker Field</label>
        <input name="my_field" id="my_field" type="text" class="my-colorpicker" />


and the repeater scripts:


add: function() {
    $( ".md-repeat-add" ).click( function( e ) {

        var lastRepeatingGroup = $( this ).closest( '.md-repeat' ).find( '.md-repeat-field' ).last(),
            clone              = lastRepeatingGroup.clone( true );

        clone.find( 'input.regular-text, textarea, select' ).val( '' );
        clone.find( 'input.regular-text' ).prop( 'readonly', false );
        clone.find( 'input[type=checkbox]' ).attr( 'checked', false );
        clone.insertAfter( lastRepeatingGroup );

        MD_Repeatable_Fields.resetAtts( clone );

resetAtts: function( section ) {
    var attrs = [ 'for', 'id', 'name' ],
        tags  = section.find( 'input, label, textarea, select' ),
        count = section.index();

    tags.each( function() {
        var $this = $( this );

        $.each( attrs, function( i, attr ) {
            var attr_val = $this.attr( attr );

            if ( attr_val )
                $this.attr( attr, attr_val.replace( /(\d+)(?=\D+$)/, count ) );

How can I "reset" the color picker script to detect when new color pickers are made on the fly and execute the proper JS to open the new color picker when clicked?

  • check if it has event methods available, that you can attach a reset function to, once the event fires. or look into changes in the DOM with .change() api.jquery.com/change
    – The J
    Feb 28 '17 at 5:59

It's hard to know for sure, since you don't include the markup you're output for the metabox nor the JS you're using to clone. But, the following simplified setup seems to work for me:

metabox markup

<label for='my_field'>
    My Color Picker Field
<input name='my_field' id='my_field' type='text' class='my-colorpicker' />
<a href='#' class='clone-it'>Add Another Color Picker</a>


(function ($) {
    // turn the field into a colorpicker
    $('.my-colorpicker').wpColorPicker () ;

    $('.clone-it').click (function () {
        // clone the field in question
        var field = $(this).prev ('.wp-picker-container').find ('.my-colorpicker').clone () ;

        // set the cloned field's value to ''
        // so it starts off without a specific color
        $(field).val ('') ;

        // your code to mod the cloned field's name, etc goes here 

        // add the cloned field to the metabox
        $(this).before (field) ;

        // turn the cloned field into a colorpicker
        $(field).wpColorPicker () ;
        }) ;

  • Thanks for your answer, I've spent all day trying to merge the idea of your script with mine but haven't gotten much closer. I've updated my question with the clone JS and field HTML, I hope that gives you a better idea of what I'm working with. Feb 28 '17 at 21:01
  • I think all you still need to do is: 1) add 'input.my-colorpicker` to the selector in the clone.find(...).val ('') statement; and 2) add clone.find ('input.my-colorpicker').wpColorPicker() ; Feb 28 '17 at 21:31
  • Unfortunately that doesn't seem to make a difference. I think the issue may lie somewhere in the fact that the data event handler parameter in the clone function is set to true. Feb 28 '17 at 21:40
  • Then I'm at a loss, because the code in my answer works for me. Sorry I can't be more helpful. Feb 28 '17 at 21:53

In case you deal with the Spectrum color picker, you need to destroy the color picker before cloning the field group by calling


Then you need to bind new color pickers to the original and the cloned field group.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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