Skip to content

Instantly share code, notes, and snippets.

@ashokmhrj

ashokmhrj/metabox-repeatable-fields.php

Forked from helen/repeatable-fields-metabox.php
Last active May 23, 2025 07:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ashokmhrj/73229f77acad07c9130fab4bf2947b95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ashokmhrj/73229f77acad07c9130fab4bf2947b95 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ashokmhrj revised this gist Aug 1, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    <?php
    /**
    * Repeatable Custom Fields in a Metabox with Image upload
    * Drag and Drop option
    * Modified by: ashokmhrj
    * Extracted from: Helen Hou-Sandi
    */
  2. ashokmhrj revised this gist Aug 1, 2018. 2 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -56,7 +56,7 @@ function ask_history_repeatable_meta_box_display() {
    <col width="30%">
    <col width="30%">
    <col width="10%">
    <tbody id="nts-sortable">
    <tbody id="ask-sortable">
    <?php
    if ( $repeatable_fields ) :
    foreach ( $repeatable_fields as $key => $field ) {
    4 changes: 2 additions & 2 deletions repeatable-fields.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,9 +8,9 @@ var repeatable_field = {
    },
    dragnDrop: function(){

    jQuery("#nts-sortable").sortable();
    jQuery("#ask-sortable").sortable();

    jQuery("#nts-sortable").disableSelection();
    jQuery("#ask-sortable").disableSelection();
    },
    addRow: function(){
    jQuery(document).on('click', '#add-row', function (e) {
  3. ashokmhrj revised this gist Aug 1, 2018. 2 changed files with 11 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -56,15 +56,15 @@ function ask_history_repeatable_meta_box_display() {
    <col width="30%">
    <col width="30%">
    <col width="10%">
    <tbody>
    <tbody id="nts-sortable">
    <?php
    if ( $repeatable_fields ) :
    foreach ( $repeatable_fields as $key => $field ) {
    $field['month'] = isset( $field['month'] )? $field['month'] : false;
    $field['year'] = isset( $field['year'] )? $field['year'] : false;
    $field['logo'] = isset( $field['logo'] )? $field['logo'] : false;
    ?>
    <tr style="border-bottom: 1px solid #e5e5e5">
    <tr class="ui-state-default" style="border: 1px solid #e5e5e5; background: white; padding: 5px; height: 200px;">
    <td class="ask-repeater-logo-wrapper">
    <?php if($field['logo'] ) { ?>
    <div>
    @@ -104,7 +104,7 @@ function ask_history_repeatable_meta_box_display() {
    else :
    // show a blank one
    ?>
    <tr>
    <tr class="ui-state-default" style="border: 1px solid #e5e5e5; background: white; padding: 5px; height: 200px;">
    <td class="ask-repeater-logo-wrapper">
    <input type="hidden" class="ask-logo" name="logo[]" />
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    @@ -135,7 +135,7 @@ function ask_history_repeatable_meta_box_display() {
    </tr>
    <?php endif; ?>
    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
    <tr class="ui-state-default empty-row screen-reader-text" style="border: 1px solid #e5e5e5; background: white; padding: 5px; height: 200px;">
    <td class="ask-repeater-logo-wrapper">
    <input type="hidden" class="ask-logo" name="logo[]" />
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    7 changes: 7 additions & 0 deletions repeatable-fields.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,13 @@ var repeatable_field = {
    this.removeRow();
    this.addImageUploader();
    this.removeImage();
    this.dragnDrop();
    },
    dragnDrop: function(){

    jQuery("#nts-sortable").sortable();

    jQuery("#nts-sortable").disableSelection();
    },
    addRow: function(){
    jQuery(document).on('click', '#add-row', function (e) {
  4. ashokmhrj revised this gist Jul 30, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <?php
    /**
    * Repeatable Custom Fields in a Metabox
    * Repeatable Custom Fields in a Metabox with Image upload
    * Modified by: ashokmhrj
    * Extracted from: Helen Hou-Sandi
    */
  5. ashokmhrj revised this gist Jul 30, 2018. 2 changed files with 71 additions and 49 deletions.
    9 changes: 3 additions & 6 deletions metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -72,12 +72,9 @@ function ask_history_repeatable_meta_box_display() {
    </div>
    <?php } ?>
    <input type="hidden" class="ask-logo" name="logo[]" value="<?php if( $field['logo'] != '') echo esc_attr( $field['logo'] ); ?>" />
    <?php if(!$field['logo'] ) { ?>
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    <?php } ?>
    <?php if($field['logo'] ) { ?>
    <button type="button" class="ask-remove_image_button button"><?php _e( 'Remove image', 'ask' ); ?></button>
    <?php } ?>
    <button type="button" class="ask-upload_image_button button" style="display:<?php echo ( $field['logo'] )? 'none' : 'block';?>"><?php _e( 'Add image', 'woocommerce' ); ?></button>

    <button type="button" class="ask-remove_image_button button" style="display:<?php echo ( !$field['logo'] )? 'none' : 'block';?>;"><?php _e( 'Remove image', 'woocommerce' ); ?></button>
    </td>
    <td>
    <textarea class="widefat" name="name[]" rows="6"><?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?></textarea>
    111 changes: 68 additions & 43 deletions repeatable-fields.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,45 +1,70 @@
    jQuery(document).ready(function ($) {
    var repeatable_field = {
    init: function(){
    this.addRow();
    this.removeRow();
    this.addImageUploader();
    this.removeImage();
    },
    addRow: function(){
    jQuery(document).on('click', '#add-row', function (e) {
    e.preventDefault();
    var row = jQuery('.empty-row.screen-reader-text').clone(true);
    row.removeClass('empty-row screen-reader-text');
    row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
    // return false;
    });
    },
    removeRow: function(){
    jQuery(document).on('click', '.remove-row', function () {
    jQuery(this).parents('tr').remove();
    return false;
    });
    },
    addImageUploader: function(){
    jQuery(document).on('click', '.ask-upload_image_button', function (event) {
    event.preventDefault();

    var inputField = jQuery(this).prev('.nts-logo');

    // Create the media frame.
    var pevent = event,
    button = jQuery(this),
    file_frame = wp.media({
    title: ntsAdmin.title,
    library: {
    type: 'image',
    },
    button: {
    text: ntsAdmin.btn_txt
    },
    multiple: false
    }).on('select', function () {
    var attachment = file_frame.state().get('selection').first().toJSON();
    var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;

    button.closest('.ask-repeater-logo-wrapper').find('.ask-logo').val(attachment.id);
    button.closest('.ask-repeater-logo-wrapper').find('.ask-logo').before('<div><img src="' + attachment_thumbnail.url + '" width="150px" height="150px" /></div>');
    button.closest('.ask-repeater-logo-wrapper').find('.ask-remove_image_button').show();
    button.hide();

    }).open();
    });
    },

    jQuery(document).on('click', '#add-row', function (e) {
    e.preventDefault();
    var row = jQuery('.empty-row.screen-reader-text').clone(true);
    row.removeClass('empty-row screen-reader-text');
    row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
    // return false;
    });

    jQuery(document).on('click', '.remove-row', function () {
    jQuery(this).parents('tr').remove();
    return false;
    });


    jQuery(document).on('click', '.ask-upload_image_button', function (event) {
    event.preventDefault();

    var inputField = jQuery(this).prev('.ask-logo');

    // Create the media frame.
    var pevent = event,
    button = jQuery(this),
    file_frame = wp.media({
    title: askAdmin.title,
    library: {
    type: 'image',
    },
    button: {
    text: askAdmin.btn_txt
    },
    multiple: false
    }).on('select', function () {
    var attachment = file_frame.state().get('selection').first().toJSON();
    var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;

    button.prev('.ask-logo').val( attachment.id );
    button.prev('.ask-logo').before('<div><img src="' + attachment_thumbnail.url + '" width="150px" height="150px" /></div>');
    button.closest('.ask-logo-thumbnail-wrapper').find('.ask-remove_image_button').show();
    button.hide();

    }).open();
    });
    removeImage: function(){
    jQuery(document).on('click', '.ask-remove_image_button', function (event) {
    event.preventDefault();
    jQuery(this).closest('.ask-repeater-logo-wrapper').find('.ask-logo').val('');
    jQuery(this).closest('.ask-repeater-logo-wrapper').find('.ask-upload_image_button').show();
    jQuery(this).hide();
    jQuery(this).closest('.ask-repeater-logo-wrapper').find('div').remove();

    });
    }

    };


    jQuery(document).ready(function ($) {
    repeatable_field.init();
    });
  6. ashokmhrj revised this gist Jul 28, 2018. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,8 @@
    <?php
    /**
    * Repeatable Custom Fields in a Metabox
    * Author: Helen Hou-Sandi
    *
    * From a bespoke system, so currently not modular - will fix soon
    * Note that this particular metadata is saved as one multidimensional array (serialized)
    * Modified by: ashokmhrj
    * Extracted from: Helen Hou-Sandi
    */

    define('PATH_TO_JS','define path here');
  7. ashokmhrj revised this gist Jul 28, 2018. 2 changed files with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion repeatable-fields-metabox.php → metabox-repeatable-fields.php
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    define('PATH_TO_JS','define path here');
    function ask_admin_repeater_script(){
    wp_enqueue_media();
    wp_enqueue_script( 'ask-admin-repeater-js', PATH_TO_JS . '/repeatable-admin.js', array('jquery'), '',true );
    wp_enqueue_script( 'ask-admin-repeater-js', PATH_TO_JS . '/repeatable-fields.js', array('jquery'), '',true );
    wp_localize_script( 'ask-admin-repeater-js', 'askAdmin', array(
    'title' => __( "Choose an image", "ask" ),
    'btn_txt' => __( "Use image", "ask" ),
    0 repeatable-admin.js → repeatable-fields.js
    View file
    File renamed without changes.
  8. ashokmhrj revised this gist Jul 28, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions repeatable-admin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,12 +23,12 @@ jQuery(document).ready(function ($) {
    var pevent = event,
    button = jQuery(this),
    file_frame = wp.media({
    title: ntsAdmin.title,
    title: askAdmin.title,
    library: {
    type: 'image',
    },
    button: {
    text: ntsAdmin.btn_txt
    text: askAdmin.btn_txt
    },
    multiple: false
    }).on('select', function () {
  9. ashokmhrj revised this gist Jul 28, 2018. 2 changed files with 1 addition and 1 deletion.
    0 admin-repeater.js → repeatable-admin.js
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    define('PATH_TO_JS','define path here');
    function ask_admin_repeater_script(){
    wp_enqueue_media();
    wp_enqueue_script( 'ask-admin-repeater-js', PATH_TO_JS . '/admin-repeater.js', array('jquery'), '',true );
    wp_enqueue_script( 'ask-admin-repeater-js', PATH_TO_JS . '/repeatable-admin.js', array('jquery'), '',true );
    wp_localize_script( 'ask-admin-repeater-js', 'askAdmin', array(
    'title' => __( "Choose an image", "ask" ),
    'btn_txt' => __( "Use image", "ask" ),
  10. ashokmhrj revised this gist Jul 28, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <?
    <?php
    /**
    * Repeatable Custom Fields in a Metabox
    * Author: Helen Hou-Sandi
  11. ashokmhrj revised this gist Jul 28, 2018. 2 changed files with 209 additions and 105 deletions.
    45 changes: 45 additions & 0 deletions admin-repeater.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    jQuery(document).ready(function ($) {

    jQuery(document).on('click', '#add-row', function (e) {
    e.preventDefault();
    var row = jQuery('.empty-row.screen-reader-text').clone(true);
    row.removeClass('empty-row screen-reader-text');
    row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
    // return false;
    });

    jQuery(document).on('click', '.remove-row', function () {
    jQuery(this).parents('tr').remove();
    return false;
    });


    jQuery(document).on('click', '.ask-upload_image_button', function (event) {
    event.preventDefault();

    var inputField = jQuery(this).prev('.ask-logo');

    // Create the media frame.
    var pevent = event,
    button = jQuery(this),
    file_frame = wp.media({
    title: ntsAdmin.title,
    library: {
    type: 'image',
    },
    button: {
    text: ntsAdmin.btn_txt
    },
    multiple: false
    }).on('select', function () {
    var attachment = file_frame.state().get('selection').first().toJSON();
    var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;

    button.prev('.ask-logo').val( attachment.id );
    button.prev('.ask-logo').before('<div><img src="' + attachment_thumbnail.url + '" width="150px" height="150px" /></div>');
    button.closest('.ask-logo-thumbnail-wrapper').find('.ask-remove_image_button').show();
    button.hide();

    }).open();
    });
    });
    269 changes: 164 additions & 105 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -6,158 +6,218 @@
    * From a bespoke system, so currently not modular - will fix soon
    * Note that this particular metadata is saved as one multidimensional array (serialized)
    */

    define('PATH_TO_JS','define path here');
    function ask_admin_repeater_script(){
    wp_enqueue_media();
    wp_enqueue_script( 'ask-admin-repeater-js', PATH_TO_JS . '/admin-repeater.js', array('jquery'), '',true );
    wp_localize_script( 'ask-admin-repeater-js', 'askAdmin', array(
    'title' => __( "Choose an image", "ask" ),
    'btn_txt' => __( "Use image", "ask" ),
    ) );
    }
    add_action( 'admin_enqueue_scripts', 'ask_admin_repeater_script' );

    function hhs_get_sample_options() {
    $options = array (
    'Option 1' => 'option1',
    'Option 2' => 'option2',
    'Option 3' => 'option3',
    'Option 4' => 'option4',
    );
    function ask_get_sample_options() {
    $month = array ( '' => 'months' );
    for( $i = 1; $i <= 12; $i++ ) {
    $month[$i] = date('F', mktime(0,0,0,$i) );
    }

    return $options;
    $year = array ( '' => 'Year' );
    foreach( range( 1990, date('Y') ) as $yr ) {
    $year[$yr] = $yr;
    }
    return array( $month, $year );
    }

    add_action('admin_init', 'hhs_add_meta_boxes', 1);
    function hhs_add_meta_boxes() {
    add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default');
    add_action('add_meta_boxes_page', 'ask_history_add_meta_boxes', 10);
    function ask_history_add_meta_boxes() {

    add_meta_box(
    'repeatable-fields', // id
    'Repeatable Fields', //title
    'ask_history_repeatable_meta_box_display', // cb
    'page', // page
    'normal', // context
    'default' // priority
    );
    }

    function hhs_repeatable_meta_box_display() {
    function ask_history_repeatable_meta_box_display() {
    global $post;

    $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
    $options = hhs_get_sample_options();
    $repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true);
    list( $month, $year ) = ask_get_sample_options();

    wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
    wp_nonce_field( 'ask_history_repeatable_meta_box_nonce', 'ask_history_repeatable_meta_box_nonce' );
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
    jQuery(document).on('click', '#add-row', function() {
    var row = jQuery( '.empty-row.screen-reader-text' ).clone(true);
    row.removeClass( 'empty-row screen-reader-text' );
    row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
    return false;
    });

    jQuery(document).on('click', '.remove-row', function() {
    jQuery(this).parents('tr').remove();
    return false;
    });
    });
    </script>


    <table id="repeatable-fieldset-one" width="100%">
    <thead>
    <tr>
    <th width="40%">Name</th>
    <th width="12%">Select</th>
    <th width="40%">URL</th>
    <th width="8%"></th>
    </tr>
    </thead>
    <col width="30%">
    <col width="30%">
    <col width="30%">
    <col width="10%">
    <tbody>
    <?php

    if ( $repeatable_fields ) :

    foreach ( $repeatable_fields as $field ) {
    ?>
    <tr>
    <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>

    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>
    <?php
    }
    <?php
    if ( $repeatable_fields ) :
    foreach ( $repeatable_fields as $key => $field ) {
    $field['month'] = isset( $field['month'] )? $field['month'] : false;
    $field['year'] = isset( $field['year'] )? $field['year'] : false;
    $field['logo'] = isset( $field['logo'] )? $field['logo'] : false;
    ?>
    <tr style="border-bottom: 1px solid #e5e5e5">
    <td class="ask-repeater-logo-wrapper">
    <?php if($field['logo'] ) { ?>
    <div>
    <img src="<?php echo esc_url( $image = wp_get_attachment_thumb_url( $field['logo'] ) ); ?>" width="150px" height="150px" />
    </div>
    <?php } ?>
    <input type="hidden" class="ask-logo" name="logo[]" value="<?php if( $field['logo'] != '') echo esc_attr( $field['logo'] ); ?>" />
    <?php if(!$field['logo'] ) { ?>
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    <?php } ?>
    <?php if($field['logo'] ) { ?>
    <button type="button" class="ask-remove_image_button button"><?php _e( 'Remove image', 'ask' ); ?></button>
    <?php } ?>
    </td>
    <td>
    <textarea class="widefat" name="name[]" rows="6"><?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?></textarea>
    </td>
    <td>
    <div>
    <strong>Month: </strong>
    <select name="month[]" style="width:100%">
    <?php foreach ( $month as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"<?php selected( $field['month'], $value ); ?>><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    <div>
    <strong>Year: </strong>
    <select name="year[]" style="width:100%">
    <?php foreach ( $year as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"<?php selected( $field['year'], $value ); ?>><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    </td>
    <td><a class="button remove-row" href="#"><span class="dashicons dashicons-trash"></span></a></td>
    </tr>
    <?php
    }
    else :
    // show a blank one
    ?>
    <tr>
    <td><input type="text" class="widefat" name="name[]" /></td>

    <td class="ask-repeater-logo-wrapper">
    <input type="hidden" class="ask-logo" name="logo[]" />
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    <button type="button" class="ask-remove_image_button button" style="display:none;"><?php _e( 'Remove image', 'ask' ); ?></button>
    </td>
    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    <textarea class="widefat" name="name[]" rows="6"></textarea>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    <td>
    <div>
    <strong>Month: </strong>
    <select name="month[]" style="width:100%">
    <?php foreach ( $month as $label => $value ) : ?>
    <option value="<?php echo $value; ?>" ><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    <div>
    <strong>Year: </strong>
    <select name="year[]" style="width:100%">
    <?php foreach ( $year as $label => $value ) : ?>
    <option value="<?php echo $value; ?>" ><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    </td>
    <td><a class="button remove-row" href="#"><span class="dashicons dashicons-trash"></span></a></td>
    </tr>
    <?php endif; ?>

    <?php endif; ?>
    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
    <td><input type="text" class="widefat" name="name[]" /></td>

    <tr class="empty-row screen-reader-text">
    <td class="ask-repeater-logo-wrapper">
    <input type="hidden" class="ask-logo" name="logo[]" />
    <button type="button" class="ask-upload_image_button button"><?php _e( 'Add image', 'ask' ); ?></button>
    <button type="button" class="ask-remove_image_button button" style="display:none;"><?php _e( 'Remove image', 'ask' ); ?></button>
    </td>
    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    <textarea class="widefat" name="name[]" rows="6"></textarea>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    <td>
    <div>
    <strong>Month: </strong>
    <select name="month[]" style="width:100%">
    <?php foreach ( $month as $label => $value ) : ?>
    <option value="<?php echo $value; ?>" ><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    <div>
    <strong>Year: </strong>
    <select name="year[]" style="width:100%">
    <?php foreach ( $year as $label => $value ) : ?>
    <option value="<?php echo $value; ?>" ><?php echo $value; ?></option>
    <?php endforeach; ?>
    </select>
    </div>
    </td>
    <td><a class="button remove-row" href="#"><span class="dashicons dashicons-trash"></span></a></td>
    </tr>

    </tbody>
    </table>

    <p><a id="add-row" class="button" href="#">Add another</a></p>
    <?php
    }

    add_action('save_post', 'hhs_repeatable_meta_box_save');
    function hhs_repeatable_meta_box_save($post_id) {
    if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
    ! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
    add_action('save_post', 'ask_history_repeatable_meta_box_save');
    function ask_history_repeatable_meta_box_save($post_id) {
    if ( ! isset( $_POST['ask_history_repeatable_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['ask_history_repeatable_meta_box_nonce'], 'ask_history_repeatable_meta_box_nonce' ) )
    return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
    return;

    if (!current_user_can('edit_post', $post_id))
    if ( !current_user_can( 'edit_post', $post_id ) )
    return;

    $old = get_post_meta($post_id, 'repeatable_fields', true);
    $old = get_post_meta( $post_id, 'repeatable_fields', true );
    $new = array();
    $options = hhs_get_sample_options();
    list( $month, $year ) = ask_get_sample_options();

    $names = $_POST['name'];
    $selects = $_POST['select'];
    $urls = $_POST['url'];
    $month_arr = $_POST['month'];
    $year_arr = $_POST['year'];
    $logo = $_POST['logo'];

    $count = count( $names );

    for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
    $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );

    if ( in_array( $selects[$i], $options ) )
    $new[$i]['select'] = $selects[$i];
    if ( in_array( $month_arr[$i], $month ) )
    $new[$i]['month'] = $month_arr[$i];
    else
    $new[$i]['month'] = '';

    if ( in_array( $year_arr[$i], $year ) )
    $new[$i]['year'] = $year_arr[$i];
    else
    $new[$i]['select'] = '';
    $new[$i]['year'] = '';

    if ( $urls[$i] == 'http://' )
    $new[$i]['url'] = '';

    if ( $logo[$i] == '' )
    $new[$i]['logo'] = '';
    else
    $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    $new[$i]['logo'] = abs( $logo[$i] );
    endif;
    }

    @@ -166,4 +226,3 @@ function hhs_repeatable_meta_box_save($post_id) {
    elseif ( empty($new) && $old )
    delete_post_meta( $post_id, 'repeatable_fields', $old );
    }
    ?>
  12. ashokmhrj revised this gist Jul 27, 2018. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -33,15 +33,15 @@ function hhs_repeatable_meta_box_display() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
    $( '#add-row' ).on('click', function() {
    var row = $( '.empty-row.screen-reader-text' ).clone(true);
    jQuery(document).on('click', '#add-row', function() {
    var row = jQuery( '.empty-row.screen-reader-text' ).clone(true);
    row.removeClass( 'empty-row screen-reader-text' );
    row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
    return false;
    });

    $( '.remove-row' ).on('click', function() {
    $(this).parents('tr').remove();
    jQuery(document).on('click', '.remove-row', function() {
    jQuery(this).parents('tr').remove();
    return false;
    });
    });
  13. @helen helen revised this gist Jan 11, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -139,15 +139,15 @@ function hhs_repeatable_meta_box_save($post_id) {
    $new = array();
    $options = hhs_get_sample_options();

    $names = stripslashes( strip_tags( $_POST['name'] ) );
    $names = $_POST['name'];
    $selects = $_POST['select'];
    $urls = stripslashes( $_POST['url'] ); // and however you want to sanitize
    $urls = $_POST['url'];

    $count = count( $names );

    for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
    $new[$i]['name'] = $names[$i];
    $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );

    if ( in_array( $selects[$i], $options ) )
    $new[$i]['select'] = $selects[$i];
    @@ -157,7 +157,7 @@ function hhs_repeatable_meta_box_save($post_id) {
    if ( $urls[$i] == 'http://' )
    $new[$i]['url'] = '';
    else
    $new[$i]['url'] = $urls[$i];
    $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    endif;
    }

  14. @helen helen revised this gist Jan 11, 2012. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -123,7 +123,6 @@ function hhs_repeatable_meta_box_display() {
    <?php
    }


    add_action('save_post', 'hhs_repeatable_meta_box_save');
    function hhs_repeatable_meta_box_save($post_id) {
    if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
    @@ -140,15 +139,15 @@ function hhs_repeatable_meta_box_save($post_id) {
    $new = array();
    $options = hhs_get_sample_options();

    $names = $_POST['name'];
    $names = stripslashes( strip_tags( $_POST['name'] ) );
    $selects = $_POST['select'];
    $urls = $_POST['url'];
    $urls = stripslashes( $_POST['url'] ); // and however you want to sanitize

    $count = count( $names );

    for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
    $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
    $new[$i]['name'] = $names[$i];

    if ( in_array( $selects[$i], $options ) )
    $new[$i]['select'] = $selects[$i];
    @@ -158,7 +157,7 @@ function hhs_repeatable_meta_box_save($post_id) {
    if ( $urls[$i] == 'http://' )
    $new[$i]['url'] = '';
    else
    $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    $new[$i]['url'] = $urls[$i];
    endif;
    }

  15. @helen helen revised this gist Jan 11, 2012. 1 changed file with 25 additions and 15 deletions.
    40 changes: 25 additions & 15 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,19 @@
    * Author: Helen Hou-Sandi
    *
    * From a bespoke system, so currently not modular - will fix soon
    * Note that this particular metadata is saved as one multilevel array (serialized)
    * Note that this particular metadata is saved as one multidimensional array (serialized)
    */

    function hhs_get_sample_options() {
    $options = array (
    'Option 1' => 'option1',
    'Option 2' => 'option2',
    'Option 3' => 'option3',
    'Option 4' => 'option4',
    );

    return $options;
    }

    add_action('admin_init', 'hhs_add_meta_boxes', 1);
    function hhs_add_meta_boxes() {
    @@ -14,9 +25,10 @@ function hhs_add_meta_boxes() {

    function hhs_repeatable_meta_box_display() {
    global $post;

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

    $options = hhs_get_sample_options();

    wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
    ?>
    <script type="text/javascript">
    @@ -47,19 +59,12 @@ function hhs_repeatable_meta_box_display() {
    <tbody>
    <?php

    $options = array (
    'Option 1' => 'option1',
    'Option 2' => 'option2',
    'Option 3' => 'option3',
    'Option 4' => 'option4',
    );

    if ( $repeatable_fields ) :

    foreach ( $repeatable_fields as $field ) {
    ?>
    <tr>
    <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo $field['name']; ?>" /></td>
    <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>

    <td>
    <select name="select[]">
    @@ -69,7 +74,7 @@ function hhs_repeatable_meta_box_display() {
    </select>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo $field['url']; else echo 'http://'; ?>" /></td>
    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>
    @@ -133,6 +138,7 @@ function hhs_repeatable_meta_box_save($post_id) {

    $old = get_post_meta($post_id, 'repeatable_fields', true);
    $new = array();
    $options = hhs_get_sample_options();

    $names = $_POST['name'];
    $selects = $_POST['select'];
    @@ -142,13 +148,17 @@ function hhs_repeatable_meta_box_save($post_id) {

    for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
    $new[$i]['name'] = $names[$i];
    $new[$i]['select'] = $selects[$i];
    $new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );

    if ( in_array( $selects[$i], $options ) )
    $new[$i]['select'] = $selects[$i];
    else
    $new[$i]['select'] = '';

    if ( $urls[$i] == 'http://' )
    $new[$i]['url'] = '';
    else
    $new[$i]['url'] = $urls[$i];
    $new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
    endif;
    }

  16. @helen helen created this gist Jan 11, 2012.
    160 changes: 160 additions & 0 deletions repeatable-fields-metabox.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,160 @@
    <?
    /**
    * Repeatable Custom Fields in a Metabox
    * Author: Helen Hou-Sandi
    *
    * From a bespoke system, so currently not modular - will fix soon
    * Note that this particular metadata is saved as one multilevel array (serialized)
    */

    add_action('admin_init', 'hhs_add_meta_boxes', 1);
    function hhs_add_meta_boxes() {
    add_meta_box( 'repeatable-fields', 'Repeatable Fields', 'hhs_repeatable_meta_box_display', 'post', 'normal', 'default');
    }

    function hhs_repeatable_meta_box_display() {
    global $post;

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

    wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
    $( '#add-row' ).on('click', function() {
    var row = $( '.empty-row.screen-reader-text' ).clone(true);
    row.removeClass( 'empty-row screen-reader-text' );
    row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
    return false;
    });

    $( '.remove-row' ).on('click', function() {
    $(this).parents('tr').remove();
    return false;
    });
    });
    </script>

    <table id="repeatable-fieldset-one" width="100%">
    <thead>
    <tr>
    <th width="40%">Name</th>
    <th width="12%">Select</th>
    <th width="40%">URL</th>
    <th width="8%"></th>
    </tr>
    </thead>
    <tbody>
    <?php

    $options = array (
    'Option 1' => 'option1',
    'Option 2' => 'option2',
    'Option 3' => 'option3',
    'Option 4' => 'option4',
    );

    if ( $repeatable_fields ) :

    foreach ( $repeatable_fields as $field ) {
    ?>
    <tr>
    <td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo $field['name']; ?>" /></td>

    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo $field['url']; else echo 'http://'; ?>" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>
    <?php
    }
    else :
    // show a blank one
    ?>
    <tr>
    <td><input type="text" class="widefat" name="name[]" /></td>

    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>
    <?php endif; ?>

    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
    <td><input type="text" class="widefat" name="name[]" /></td>

    <td>
    <select name="select[]">
    <?php foreach ( $options as $label => $value ) : ?>
    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
    <?php endforeach; ?>
    </select>
    </td>

    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>

    <td><a class="button remove-row" href="#">Remove</a></td>
    </tr>
    </tbody>
    </table>

    <p><a id="add-row" class="button" href="#">Add another</a></p>
    <?php
    }


    add_action('save_post', 'hhs_repeatable_meta_box_save');
    function hhs_repeatable_meta_box_save($post_id) {
    if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
    ! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
    return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    return;

    if (!current_user_can('edit_post', $post_id))
    return;

    $old = get_post_meta($post_id, 'repeatable_fields', true);
    $new = array();

    $names = $_POST['name'];
    $selects = $_POST['select'];
    $urls = $_POST['url'];

    $count = count( $names );

    for ( $i = 0; $i < $count; $i++ ) {
    if ( $names[$i] != '' ) :
    $new[$i]['name'] = $names[$i];
    $new[$i]['select'] = $selects[$i];

    if ( $urls[$i] == 'http://' )
    $new[$i]['url'] = '';
    else
    $new[$i]['url'] = $urls[$i];
    endif;
    }

    if ( !empty( $new ) && $new != $old )
    update_post_meta( $post_id, 'repeatable_fields', $new );
    elseif ( empty($new) && $old )
    delete_post_meta( $post_id, 'repeatable_fields', $old );
    }
    ?>