I am displaying the field dynamically in the admin panel. I have a button called Add more fields. The user can add the custom field dynamically. As of now, it's working but the issue is the editor not displaying properly. Check the screenshot below

enter image description here

I am using below code

function woocommerce_register_2col_layout_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), 'layout' );
    // Output the field
    echo '<a href="javascript:void(0);" id="addMore_layout">Add more fields</a>';
    echo '<div class="create_custom_layout" id="create_custom_layout"><div class="row">';
        echo '<div class="col-md-6">';
            echo '<h4>Description</h4>';
            //We first get the post_meta from the DB if there's any there.
            $description        = get_post_meta( $post->ID, 'pDescription', true );
            //Second ID the field.
            $description_field  = 'pDescription';
            //Provide the settings arguments for this specific editor in an array
            $description_args   = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'pDescription[]',
            'editor_class' => 'description-editor widefat', 'wpautop' => true );
            wp_editor( $description, $description_field, $description_args );
        echo '</div>';

        echo '<div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="pimage[]" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'pimage', true ).'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'pimage', true ).'" />

    .create_custom_layout .row{display: flex;flex-wrap: wrap;}
    .create_custom_layout .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
jQuery("#meta-image-button").click(function() {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        wp.media.editor.send.attachment = function(props, attachment) {
            wp.media.editor.send.attachment = send_attachment_bkp;
        return false;

  jQuery(function() {
        jQuery("#addMore_layout").click(function(e) {
            jQuery("#create_custom_layout").append(`<div class=\'row\'><div class=\'col-md-6\'><h4>Description</h4>';
  $description1        = get_post_meta( $post->ID, 'pDescription', true );
  //Second ID the field.
  $description_field1  = 'pDescription';
  //Provide the settings arguments for this specific editor in an array
  $description_args1   = array('media_buttons' => false,'textarea_rows' => 12,'textarea_name' =>'pDescription[]','editor_class' =>'description-editor widefat', 'wpautop' => true);
  echo'</div><div class=\'col-md-6\'><input type=\'button\' id=\'meta-image-button\' class=\'button\' value=\'Choose or Upload an Image\' style=\'padding: 8px 10px; height: auto; line-height: normal;\'/><input type=\'hidden\' name=\'pimage[]\' id=\'meta-image\' class=\'meta_image\' /><br /><img style=\'width: 100px;height: 100px;object-fit: cover;\' id=\'meta-image-preview\'  /></div></div>`);

  • the issue is the editor not displaying properly. - this is not a very descriptive explanation, how should the editor look, what problems do you have, is there any debug code - php or js? Try to be as clear as possible in order that people can help.
    – Q Studio
    Commented Jan 24, 2021 at 22:09
  • Probably a JS error, did you look at the browser dev console for error messages? If I had to guess, your PHP code is not being executed but is instead being put inside the string, and ending up on the frontend, but you haven't actually checked the HTML to see if it's right. If so, this is a syntax problem, not a WordPress problem
    – Tom J Nowell
    Commented Jan 25, 2021 at 0:04
  • Also you can't just embed get_post_meta in the middle of a Javascript block like that, it's a huge security hole for javascript injection attacks. Take a look at wp_localise_script
    – Tom J Nowell
    Commented Jan 25, 2021 at 0:06
  • @QStudio, I updated the function code and added the screenshot in the question. When I click on add more fields then I am getting the editor issue. Commented Jan 25, 2021 at 2:39
  • @TomJNowell, I checked. There is no error in the console. Commented Jan 25, 2021 at 2:41


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.