Save Dynamic Fields in Meta Box in Wordpress

Question

I’m developing a theme for my website on Wordpress and I came across a huge question. I tried to search on several sites, I searched even in English, but I did not find anything like.

Basically it’s like, I created a custom kind of post to publish tutorials and in it I created a meta box custom, where I fill in the video URL and useful class links. I created an input where I put the class link and created a structure where I can add as many useful links to the class as I want, by default comes a field, but I created a jquery, where you can add as many fields as you want. The problem is at the time of saving this, the video link I managed to save of good, but the useful links I do not know how. It follows below the code

            add_action( 'add_meta_boxes', 'tutoriais_meta_box_add' );

            function tutoriais_meta_box_add() {
                add_meta_box( 'tutoriais-meta-box', 'Informacoes do Tutorial', 'tutoriais_meta_box_cb', 'tutoriais', 'normal', 'high' ); 
            }

            function tutoriais_meta_box_cb(){
                $values = get_post_custom( $post->ID );
                $video_url = isset( $values['video_url'] ) ? esc_attr( $values['video_url'][0] ) : '';
                wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
                ?>

                    <h2>URL do Video</h2>
                    <p>
                        <input type="text" name="video_url" id="video_url" value="<?php echo $video_url;?>" />
                    </p>

                    <h2>Links Uteis</h2>
                    <script type="text/javascript">
                        jQuery(function() {
                            var addDiv = jQuery('#addinput');
                            var i = jQuery('#addinput p').size() + 1;

                            jQuery('#addNew').live('click', function() {
                                jQuery('<p><label for="name'+i+'"> Nome </label><input type="text" id="name'+i+'" name="name" value="" placeholder="Link '+i+'" /><label for="link'+i+'"> Link </label><input type="text" id="link'+i+'" name="link'+i+'" value="" placeholder="Link '+i+'" /><label for="tipo'+i+'"> Tipo </label><select id="tipo'+i+'" name="tipo'+i+'"><option value="download">Download</option><option value="acesso">Acesso</option></select><a href="#" id="remNew">Remover Link</a></p>').appendTo(addDiv);
                                i++;
                                return false;
                            });

                            jQuery('#remNew').live('click', function() {
                                if( i > 2 ) {
                                    jQuery(this).parents('p').remove();
                                    i--;
                                }
                                return false;
                            });
                        });
                    </script>

            <div id="addinput">
            <p>
            <label for="name">Nome</label>
            <input type="text" id="name1" name="name1" value="" placeholder="Link 1" />
            <label for="link1">Link</label>
            <input type="text" id="link1" name="link1" value="" placeholder="Link 1" />
            <label for="tipo1">Tipo</label>
            <select id="tipo1" name="tipo1">
                <option value="download">Download</option>
                <option value="acesso">Acesso</option>
            </select>
            <a href="#" id="addNew">Adicionar Link</a>
            </p>
            </div>
            <input type="hidden" name="info_tutoriais">
                <?php
            }

            add_action( 'save_post', 'tutoriais_meta_box_save');

            function tutoriais_meta_box_save( $post_id ){
                if(defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) return;

                if(!isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' )) return;

                if(!current_user_can( 'edit_post' )) return;

                $allowed = array(
                'a' => array(
                'href' => array()
                )
                );

                if(isset($_POST['info_tutoriais'])){
                    update_post_meta( $post_id, 'video_url', wp_kses( $_POST['video_url'], $allowed ) );    
                }
            }

Answer 1

Instead of numbering links inputs, you can use name="links[]" So you will receive an array in the POST, Then you can save this array to a single post meta using implode() or even json_encode(). When using saved data, you can use the json_decode() inverse functions or explode()