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
Repeating Custom Fields with Image Uploading and drag n drop in a Metabox
Raw
repeatable-admin.js
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();
});
});
Raw
repeatable-fields-metabox.php
<?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)
*/
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_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 ask_get_sample_options() {
$month = array ( '' => 'months' );
for( $i = 1; $i <= 12; $i++ ) {
$month[$i] = date('F', mktime(0,0,0,$i) );
}
$year = array ( '' => 'Year' );
foreach( range( 1990, date('Y') ) as $yr ) {
$year[$yr] = $yr;
}
return array( $month, $year );
}
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 ask_history_repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta( $post->ID, 'repeatable_fields', true);
list( $month, $year ) = ask_get_sample_options();
wp_nonce_field( 'ask_history_repeatable_meta_box_nonce', 'ask_history_repeatable_meta_box_nonce' );
?>
<table id="repeatable-fieldset-one" width="100%">
<col width="30%">
<col width="30%">
<col width="30%">
<col width="10%">
<tbody>
<?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 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>
<textarea class="widefat" name="name[]" rows="6"></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 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; ?>
<!-- empty hidden one for jQuery -->
<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>
<textarea class="widefat" name="name[]" rows="6"></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 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', '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 )
return;
if ( !current_user_can( 'edit_post', $post_id ) )
return;
$old = get_post_meta( $post_id, 'repeatable_fields', true );
$new = array();
list( $month, $year ) = ask_get_sample_options();
$names = $_POST['name'];
$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( $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]['year'] = '';
if ( $logo[$i] == '' )
$new[$i]['logo'] = '';
else
$new[$i]['logo'] = abs( $logo[$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 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment