0

I want to add a field in my custom meta box, same as below, but not for tags. How can I repeatedly take more inputs in the same field?

enter image description here

Here is my code added to functions.php:

function dikka_cmb_meoxes( array $meta_boxes ) {
    $prefix = 'dikka_';
    $meta_boxes['details_meox'] = array(
        'id'         => 'details_meox',
        'title'      => __( 'Porject Details', 'dikka' ),
        'pages'      => array( 'portfolio', ), // Post type
        'context'    => 'normal',
        'priority'   => 'high',
        'show_names' => true, // Show field names on the left
        'fields'     => array(
            array(
                'name'     => __( 'Client', 'dikka' ),
                'desc'     => __( 'Add client name', 'dikka' ),
                'id'       => $prefix . 'add_client',
                'type'     => 'text',
            ),
            array(
                'name'     => __( 'Skills', 'dikka' ),
                'desc'     => __( 'Add skills', 'dikka' ),
                'id'       => $prefix . 'skills',
                'type'     => 'text',
            ),
            array(
                'name'     => __( 'Release Date', 'dikka' ),
                'desc'     => __( 'Add release date of project', 'dikka' ),
                'id'       => $prefix . 'add_releasedate',
                'type'     => 'text_date',
            ),
        )
    );
    return $meta_boxes;
}
Improve this question
1
  • You want a custom meta-field which functions the same like the default WP "Tags" metabox? An input field to select already existing values and/or to add new value on the fly? You could try using "Select2". Especially with the "tagging" feature here which is exactly the functionality you want. So with "Select2" you could create one single new select field with the tagging feature. Than you just need to save the data of the field as an array. No need for a real repeater field, imo.
    – LWS-Mo
    Commented Sep 1, 2017 at 14:46

2 Answers 2

Reset to default
0

If looks like you are using CMB (Custom-Metaboxes-and-Fields-for-WordPress) to create your create metaboxes. CMB is already supplying a option to group and repeat meta box that you can use. You can check this link

As far as your code it is concern if suppose it should go like this:

function dikka_cmb_meoxes( array $meta_boxes ) {
    $prefix = 'dikka_';
        $meta_boxes['details_meox'] = array(
        'id'          => $prefix . 'details_meox',
        'type'        => 'group',
        'pages'      => array( 'portfolio', ), // Post type
        'description' => __( 'Porject Details', 'dikka' ),
        'options'     => array(
            'group_title'   => __( 'Entry {#}', 'dikka' ), // since version 1.1.4, {#} gets replaced by row number
            'add_button'    => __( 'Add Another Entry', 'dikka' ),
            'remove_button' => __( 'Remove Entry', 'dikka' ),
            'sortable'      => true, // beta
        ),
        // Fields array works the same, except id's only need to be unique for this group. Prefix is not needed.
        'fields'     => array(
            array(
                'name'     => __( 'Client', 'dikka' ),
                'desc'     => __( 'Add client name', 'dikka' ),
                'id'       => $prefix . 'add_client',
                'type'     => 'text',
            ),
            array(
                'name'     => __( 'Skills', 'dikka' ),
                'desc'     => __( 'Add skills', 'dikka' ),
                'id'       => $prefix . 'skills',
                'type'     => 'text',
            ),
            array(
                'name'     => __( 'Release Date', 'dikka' ),
                'desc'     => __( 'Add release date of project', 'dikka' ),
                'id'       => $prefix . 'add_releasedate',
                'type'     => 'text_date',
            ),
        ),
    ),

    return $meta_boxes;
}

Hope this helps!

Improve this answer
0

**Custom Mata box with repeated fields **

Meta box function with script

function question_creation_meta_box() {
    global $post;

    wp_nonce_field( basename( __FILE__ ), 'bsw_our_nonce' );

    ?>
    <div class="row">
    <?php
    global $post;
    // $post_id=$post->ID;
    $post_id=$_GET['post'];
    $i=1;
    $countQuestions=get_post_meta($post_id,'countQuestions',true);
    // echo '<pre>';print_r($countQuestions);echo '</pre>';
   $count= count($countQuestions);
    if($post_id){   
      while($i<=$count)
      {
          $question=  get_post_meta($post_id,'questions'.$i,true);
          $correctAnswer=get_post_meta($post_id,'correctAnswer'.$i.'1',true);
          $countAnswers=get_post_meta($post_id,'countAnswers'.$i,true);
           // if($count==1):
          ?>
          <div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-<?php echo $i; ?>">
              <div class="questions col-sm-12 col-md-12" id="questions-<?php echo $i;?>">
                  <lable>Enter Questions</lable><input type="text" value="<?php echo $question[0]; ?>" name="questions1[]">
              </div>
              <?php
                $j=1;
                while($j<=$countAnswers)
                {
                   $answer= get_post_meta($post_id,'answer'.$i.''.$j,true);
                   $answerText= get_post_meta($post_id,'answerText'.$i.''.$j,true);
                   ?>
                    <div class="answer col-md-12 col-sm-12 border-top-0" id="answer-<?php echo $j;?>">
                        <h1 class="">Answer <?php echo $j;?></h1>
                        <div class="col-md-12 col-sm-12">
                            <div class="col-md-4 col-sm-4">
                            <input type="radio" name="correctAnswer<?php echo $i; ?>1[]" value="1" class="correct_incorrect" <?php if($correctAnswer[0] == $j ) echo 'checked' ?>>Correct<br>
                            <input type="radio" name="correctAnswer<?php echo $i; ?>1[]" value="0" class="correct_incorrect">InCorrect
                            </div>
                            <div class="col-sm-8 col-md-8">
                            <lable>Enter Answer</lable><input type="text" value="<?php echo $answer[0];?>" name="answer1<?php echo $j; ?>[]">
                            <lable>Enter Display Answer text</lable> <input type="text" value="<?php echo  $answerText[0]?>" name="answerText1<?php echo $j; ?>[]">
                            </div>
                        </div>
                        <input type="hidden" value="1" name="countAnswers1[]">
                        <?php if($j == $countAnswers): ?>
                        <label class="right-label">Add Another Answer</label><a href="javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>
                        <a href="javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>
                      <?php endif;?>
                    </div>
                   <?php
                   $j++;
                }
              ?>
              <input type="hidden" value="1" name="countQuestions[]">
              <?php if($count == $i ): ?>
              <label class="right-label">Add Another Question</label>
              <a href="javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>
              <a href="javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>
            <?php endif;?>
          </div>
        <?
            $i++;
      }
    }
    else{
    ?>
    <!-- my custom value input -->
      <div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-1">
          <div class="questions col-sm-12 col-md-12" id="questions-1">
              <lable>Enter Questions</lable><input type="text" value="" name="questions1[]">
          </div>
          <div class="answer col-md-12 col-sm-12 border-top-0" id="answer-1">
              <h1 class="">Answer 1</h1>
              <div class="col-md-12 col-sm-12">
                  <div class="col-md-4 col-sm-4">
                  <input type="radio" name="correctAnswer11[]" value="1" class="correct_incorrect">Correct<br>
                  <input type="radio" name="correctAnswer11[]" value="0" class="correct_incorrect">InCorrect
                  </div>
                  <div class="col-sm-8 col-md-8">
                  <lable>Enter Answer</lable><input type="text" value="" name="answer11[]">
                  <lable>Enter Display Answer text</lable> <input type="text" name="answerText11[]">
                  </div>
              </div>
              <input type="hidden" value="1" name="countAnswers1[]">
              <label class="right-label">Add Another Answer</label><a href=javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a></a>
          </div>
          <input type="hidden" value="1" name="countQuestions[]">
          <label class="right-label">Add Another Question</label><a href=javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a></a>
      </div>
      <?php
      }
      ?>
    </div>
    <script type="text/javascript">
      function add_answer(obj)
      {
        var parentID=jQuery(obj).parents('.answer').attr('id');
        var questionParentId=jQuery(obj).parent('.answer').parent('.questions_blocks').attr('id');
        var answerLenght=jQuery('#'+questionParentId +' .answer').length;
        var questionParent=jQuery(obj).parent('.answer').parent('.questions_blocks').length;
        var countQuestion=questionParentId.split('-');
        // alert(countQuestion);
        var newLenght=parseInt(answerLenght)+1;
        var html='<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-'+newLenght+'"><h1 class="">Answer '+newLenght+'</h1>';
          html+='<div class="col-md-12 col-sm-12 bsw_answer_block">';
          html+='<div class="col-md-4 col-sm-4 correctblock">';
          html+='<input type="radio" name="correctAnswer'+countQuestion[1]+'1[]" value="'+newLenght+'" class="correct_incorrect">Correct<br>';
          html+='<input type="radio" name="correctAnswer'+countQuestion[1]+'1[]" value="0" class="correct_incorrect">InCorrect</div>';
          html+='<div class="col-sm-8 col-md-8">';
          html+='<lable>Enter Answer</lable><input type="text" value="" name="answer'+countQuestion[1]+''+newLenght+'[]">';
          html+='<lable>Enter Display Answer text</lable> <input type="text" name="answerText'+countQuestion[1]+''+newLenght+'[]"">';
          html+='</div>';
          html+='</div>';

          html+=' <input type="hidden" value="1" name="countAnswers'+countQuestion[1]+'[]"><label class="right-label">Add Another Answer</label><a href="javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
         html+=' <a href="javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
         html+='</div>';
         jQuery('#'+questionParentId+' #'+parentID+' .right-label').remove();
         jQuery('#'+questionParentId+' #'+parentID+' .add_answer').remove();
         jQuery('#'+questionParentId+' #'+parentID+' .remove_answer').remove();
         jQuery('#'+questionParentId+' #'+parentID).after(html);
      }
      function add_question(obj)
      {
        var parentID=jQuery(obj).parents('.questions_blocks').attr('id');
        var questions_blocksLenght=jQuery('.row .questions_blocks').length;
        var newLenght=parseInt(questions_blocksLenght)+1;
        var html='';
          html+='<div class="questions_blocks col-sm-12 col-md-12" id="questions_blocks-'+newLenght+'">';
          html+='<div class="questions col-sm-12 col-md-12" id="questions-'+newLenght+'">';
          html+='<lable>Enter Questions</lable><input type="text" value="" name="questions'+newLenght+'[]">';
          html+='</div>';
          html+='<div class="answer col-md-12 col-sm-12 border-top-0" id="answer-1"><h1 class="">Answer 1</h1>';
          html+='<div class="col-md-12 col-sm-12 bsw_answer_block">';
          html+='<div class="col-md-4 col-sm-4 correctblock">';
          html+='<input type="radio" name="correctAnswer'+newLenght+'1[]" value="1" class="correct_incorrect">Correct<br>';
          html+='<input type="radio" name="correctAnswer'+newLenght+'1[]" value="0" class="correct_incorrect">InCorrect</div>';
          html+='<div class="col-sm-8 col-md-8">';
          html+='<lable>Enter Answer</lable><input type="text" value="" name="answer'+newLenght+'1[]">';
          html+='<lable>Enter Display Answer text</lable> <input type="text" name="answerText'+newLenght+'1[]">';
          html+='</div>';
          html+='</div>';

          html+=' <input type="hidden" value="1" name="countAnswers'+newLenght+'[]"><label class="right-label">Add Another Answer</label><a href="javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
         html+='</div>';
         html+='<input type="hidden" value="1" name="countQuestions[]"><label class="right-label">Add Another Question</label><a href="javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';
         html+='<a href="javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
         html+='</div>';
         jQuery('#'+parentID).after(html);
         jQuery('#'+parentID+ ' .remove_question').remove();
         jQuery('#'+parentID+ ' .add_question').remove();
         jQuery('#'+parentID+ ' .right-label').remove();
      }
      function remove_question(obj)
      {
        var parentID=jQuery(obj).parents('.questions_blocks').attr('id');
        var countQustBlock=parentID.split('-');
        var newParent=countQustBlock[1]-1;
        jQuery('#'+parentID).remove();
        var html='';
        if(newParent>1)
        {
          html+='<a href="javascript:void(0)" onclick="remove_question(this)" class="remove_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
        }else;
          html+='<label class="right-label">Add Another Question</label><a href="javascript:void(0)" onclick="add_question(this)" class="add_question"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';

          jQuery('#questions_blocks-'+newParent).append(html);

      }
      function remove_answer(obj)
      {
          var parentID=jQuery(obj).parents('.answer').attr('id');
          var questionParentId=jQuery(obj).parent('.answer').parent('.questions_blocks').attr('id');
          var answerLenght=jQuery('#'+questionParentId +' .answer').length;
          var questionParent=jQuery(obj).parent('.answer').parent('.questions_blocks').length;
          var countAnsBlock=parentID.split('-');
          var newParent=countAnsBlock[1]-1;
          var html='';
          if(newParent > 1)
          {
             html+=' <a href="javascript:void(0)" onclick="remove_answer(this)" class="remove_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/remove.png'?>"></a>';
          }else;
           html+='<label class="right-label">Add Another Answer</label><a href="javascript:void(0)" onclick="add_answer(this)" class="add_answer"><img src="<?php echo plugin_dir_url( __FILE__ ) .'img/plus.png'?>"></a>';


          jQuery('#'+questionParentId+' #'+parentID).remove();
          jQuery('#'+questionParentId+' #answer-'+newParent).append(html);
        }
    </script>
    <?php
}

Save Meta box

function bsw_save_meta_fields( $post_id ) {


  if (!isset($_POST['bsw_our_nonce']) || !wp_verify_nonce($_POST['bsw_our_nonce'], basename(__FILE__)))
      return 'nonce not verified';


  if ( wp_is_post_autosave( $post_id ) )
      return 'autosave';


  if ( wp_is_post_revision( $post_id ) )
      return 'revision';


  if ( 'bws_quiz' == $_POST['post_type'] ) {
      if ( ! current_user_can( 'edit_page', $post_id ) )
          return 'cannot edit page';
      } elseif ( ! current_user_can( 'edit_post', $post_id ) ) {
          return 'cannot edit post';
  }
  $bws_question_count=$_POST['countQuestions'];
  update_post_meta($post_id,'countQuestions',$bws_question_count);
  $count= count($bws_question_count);
  $i=1;
  while($i<=$count)
  {
    $Questvalue=$_POST['questions'.$i];
   // print_r($Questvalue);
    $bws_correct_answer=$_POST['correctAnswer'.$i.'1'];
    update_post_meta($post_id,'correctAnswer'.$i.'1',$bws_correct_answer);
    $bws_ans_value = $_POST['countAnswers'.$i];
    $bws_ans_count= count($bws_ans_value);
    $j=1;

  //  echo 'Answer ';
    while ( $j<= $bws_ans_count) {
       $answervalue=$_POST['answer'.$i.''.$j];
      // print_r($answervalue);
        $answertextvalue=$_POST['answerText'.$i.''.$j];
         update_post_meta($post_id,'answer'.$i.''.$j,$answervalue);
         update_post_meta($post_id,'answerText'.$i.''.$j,$answertextvalue);
     //  print_r($answertextvalue);
       $j++;
    }
    update_post_meta($post_id,'questions'.$i,$Questvalue);
    update_post_meta($post_id,'correctAnswer'.$i.'1',$bws_correct_answer);
    update_post_meta($post_id,'countAnswers'.$i, $bws_ans_count);
    $i++;
  }

  //simply we have to save the data now
}
add_action( 'save_post', 'bsw_save_meta_fields' );
add_action( 'new_to_publish', 'bsw_save_meta_fields' );
Improve this answer
1
  • 1
    Please edit your answer, and add an explanation: why could that solve the problem?
    – fuxia ♦
    Commented Jun 20, 2017 at 8:23

Your Answer

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

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