How to create meta box using clone ajax and jquery in wordpress

Question

I want to create 4 meta-box in a post(at Admin post panel) using clone ajax and jquery. I also need to add "add-more" and "remove" functionalities.

Answer 1

Hello Try this code I tried this in mine. Its working It creates Four Meta-boxes in Post(admin panel wordpress)

add_action( 'add_meta_boxes', 'dynamic_add_custom_box' );

/* Do something with the data entered */
add_action( 'save_post', 'dynamic_save_postdata' );

/* Adds a box to the main column on the Post and Page edit screens */
function dynamic_add_custom_box() {
    add_meta_box(
        'dynamic_sectionid',
        __( 'Food & Drinks Menu', 'myplugin_textdomain' ),
        'dynamic_inner_custom_box',
        'post');
}

/* Prints the box content */
function dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry


    $fd_menu = get_post_meta($post->ID,'fd_menu',true);

    $c = 0;
    if ( count( $fd_menu ) > 0 ) {
      if(is_array($fd_menu)){
        foreach( $fd_menu as $fd_item ) {
            if ( isset( $fd_item['fd_name'] ) && $fd_item['fd_name']!=""  ) {

                printf( '<p  style="border-bottom:1px solid #f1f1f1">  
                           <input type="text"  name="fd_menu[%1$s][fd_name]" value="%2$s" placeholder="Item Name..."  style="margin:0px 15px"/>
                           <input type="text" name="fd_menu[%1$s][fd_price]" value="%3$s"  placeholder="Price.." size="7" style="margin:0px 15px" />
                           <input type="text"  placeholder="quantity .."  name="fd_menu[%1$s][fd_quantity]" size="7" value="%4$s" style="margin:0px 15px"/> </br>   </br>   
                           <textarea class="" name="fd_menu[%1$s][fd_dec]" placeholder="Description .." maxlength="2048" cols="18" row="30" style="margin:0px 15px 15px 15px">%5$s</textarea>       
                           <span class="remove"><button type="button" class="button button-primary button-large" style="float:right" >%6$s</button></span></br> 
                           </p>' , $c,$fd_item['fd_name'], $fd_item['fd_price'],$fd_item['fd_quantity'] ,$fd_item['fd_dec'], __( 'Remove' )  );
                $c = $c +1;
            }
      }}

    }
    ?>
<span id="here"></span>
<span class="add"><button type="button" class="button button-primary button-large" style="margin-top: 10px;">ADD</button></span>
<script>
    var $ =jQuery.noConflict();
    $(document).ready(function() {
        var count = <?php echo $c; ?>;
        $(".add").click(function() {
            count = count + 1;

            $('#here').append('<p  style="border-bottom:1px solid #f1f1f1">  \n\
         <input type="text"  name="fd_menu['+count+'][fd_name]" value="" placeholder="Item Name..."  style="margin:0px 15px"/>\n\
          <input type="text" name="fd_menu['+count+'][fd_price]" value=""  placeholder="Price.." size="7" style="margin:0px 15px" />\n\
            <input type="text"  placeholder="quantity .."  name="fd_menu['+count+'][fd_quantity]" size="7" value="" style="margin:0px 15px"/> </br>   </br>   \n\
                 <textarea class="" placeholder="Description .." name="fd_menu['+count+'][fd_dec]" maxlength="2048" cols="18" row="30" style="margin:0px 15px 15px 15px"></textarea>        \n\
            <span class="remove"><button type="button" class="button button-primary button-large" style="float:right" >Remove</button></span></br> \n\
            </p>' );
            return false;
        });
        $(".remove").live('click', function() {
            $(this).parent().remove();
        });
    });
    </script>
</div>
    <?php

}

/* When the post is saved, saves our custom data */
function dynamic_save_postdata( $post_id ) {
    // verify if this is an auto save routine. 
    // If it is our form has not been submitted, so we dont want to do anything
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
        return;

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times
    if ( !isset( $_POST['dynamicMeta_noncename'] ) )
        return;

    if ( !wp_verify_nonce( $_POST['dynamicMeta_noncename'], plugin_basename( __FILE__ ) ) )
        return;

    // OK, we're authenticated: we need to find and save the data

    $fd_menu = $_POST['fd_menu'];

    update_post_meta($post_id,'fd_menu',$fd_menu);
}