Skip to content

Instantly share code, notes, and snippets.

@da1nonly
Created March 17, 2012 10:55
Show Gist options
  • Save da1nonly/2057532 to your computer and use it in GitHub Desktop.
Save da1nonly/2057532 to your computer and use it in GitHub Desktop.
wordpress meta box urls
<?php
add_action('admin_init', 'add_meta_boxes', 1);
function add_meta_boxes() {
add_meta_box( 'repeatable-fields', 'Audio Playlist', 'repeatable_meta_box_display', 'post', 'normal', 'high');
}
function repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.metabox_submit').click(function(e) {
e.preventDefault();
$('#publish').click();
});
$('#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;
});
$('#repeatable-fieldset-one tbody').sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.sort'
});
});
</script>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="2%"></th>
<th width="30%">Name</th>
<th width="60%">URL</th>
<th width="2%"></th>
</tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields ) :
foreach ( $repeatable_fields as $field ) {
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></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="sort">|||</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php endif; ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a>
<input type="submit" class="metabox_submit" value="Save" />
</p>
<?php
}
add_action('save_post', 'repeatable_meta_box_save');
function repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], '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'];
$urls = $_POST['url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
if ( $urls[$i] == 'http://' )
$new[$i]['url'] = '';
else
$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
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 );
}
@dingo-d
Copy link

dingo-d commented Jan 7, 2016

You have just save me like a day of coding :D Thank you!!!!!

@ZaheerAbbasAghani
Copy link

Where to put fields repeatable code here is my code for custom posts types

__('Music Albums'), 'singular_label' => __('Music Album'), 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => true, 'has_archive' => true, 'supports' => array('title', '', 'thumbnail'), 'rewrite' => array('slug' => 'musicalbums', 'with_front' => false), ); //Register type and custom taxonomy for type. register_post_type( 'musicalbums' , $args ); register_taxonomy("business-type", array("musicalbums"), array("hierarchical" => true, "label" => "Album Types", "singular_label" => "Album Type", "rewrite" => true, "slug" => 'album-type')); add_action("admin_init", "music_albums_add_meta"); function music_albums_add_meta(){ add_meta_box("musicalbum-meta", "Tracks", "Music_albums_meta_options", "musicalbums", "normal", "high"); } function Music_albums_meta_options(){ global $post; if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; $custom = get_post_custom($post->ID); $upload_track = $custom["upload_track"][0]; $tracktitle = $custom["tracktitle"][0]; $artist= $custom["artist"][0]; $imageurl = $custom["imageurl"][0]; $iconurl = $custom["iconurl"][0]; $downloadText = $custom["downloadText"][0]; $ExtraInfoText = $custom["ExtraInfoText"][0]; ?>
Upload MP3 :
ID ); //require_once('getid3/getid3.php'); ?>
Track Title :
Artist :
Icon Url:
Download Link :
Extra Info Text:

Add Another

add_action('save_post', 'business_manager_save_extras');
function business_manager_save_extras(){
global $post;
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
//if you remove this the sky will fall on your head.
return $post_id;
}else{
update_post_meta($post->ID, "iconurl",
$_POST["iconurl"]);
update_post_meta($post->ID, "tracktitle", $_POST["tracktitle"]);
update_post_meta($post->ID, "artist", $_POST["artist"]);
update_post_meta($post->ID, "upload_track",
$_POST["upload_track"]);
update_post_meta($post->ID, "upload_track_two",
$_POST["upload_track_two"]);
update_post_meta($post->ID, "imageurl", $_POST["imageurl"]);
update_post_meta($post->ID, "downloadText", $_POST["downloadText"]);
update_post_meta($post->ID, "ExtraInfoText", $_POST["ExtraInfoText"]);
}
}

add_filter("manage_edit-musicalbums_columns", "business_manager_edit_columns");
function business_manager_edit_columns($columns){
$columns = array(
"cb" => "<input type="checkbox" />",
"title" => "Albums Name",
"upload_track" => "Track",
"ExtraInfoText" => "Extra Info Text",
"cat" => "Category",
);
return $columns;
}

add_action("manage_musicalbums_posts_custom_column",
"business_manager_custom_columns");
function business_manager_custom_columns($column){
global $post;
$custom = get_post_custom();
switch ($column)
{

case "upload_track":
$upload_track= $custom["upload_track"][0].'
';
echo $upload_track;
break;
case "ExtraInfoText":
echo $custom["ExtraInfoText"][0];
break;
case "cat":
echo get_the_term_list($post->ID, 'business-type');
break;
}
}

}
?>

@lukemoody
Copy link

Great code! How do you show content on the front end?

@LeviTaule
Copy link

This is a life saver. Thank you.

@joelmm1
Copy link

joelmm1 commented Nov 3, 2016

This made my day shorter. Thanks 💯 👍

@Sprinkles22
Copy link

My only problem with this is if I need to have more than one of these fields the JS isn't working - any thoughts?

@MatthewKosloski
Copy link

Great code! Here's my modified version. I simplified it by putting the HTML in a function (more DRY).

<?php

add_action('admin_init', 'add_meta_boxes', 1);

function add_meta_boxes() {
	add_meta_box( 'repeatable-fields', 'Product List', 'repeatable_meta_box_display', 'post', 'normal', 'high');
}

function get_product($value, $isHidden = false) {
	return '
	<li class="product ' . (!empty($isHidden) ? esc_attr('empty-row screen-reader-text') : esc_attr('')) . '">
		<a class="button js-remove" title="' . esc_attr(__('Click to remove the element', 'your_text_domain')). '">-</a>
		<input type="text" name="name[]" value="' . (!empty($value) ? esc_attr($value) : esc_attr('')) . '" />
		<a class="js-sort" title="' . esc_attr(__('Click and drag to sort', 'your_text_domain')) .'">|||</a>
	</li>';
}

function repeatable_meta_box_display($post) {
	wp_nonce_field('repeatable_meta_box_nonce', 'repeatable_meta_box_nonce');
	$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);

	?>
		<script>
			jQuery(document).ready(function($) {
				$('#js-add').on('click', function() {
					var $row = $('.empty-row.screen-reader-text').clone(true);
					$row.removeClass('empty-row screen-reader-text');
					$('#js-products').append($row);
					return false;
				});

				$('.js-remove').on('click', function() {
					$(this).parent().remove();
					return false;
				});

				$('#js-products').sortable({
					opacity: 0.6, 
					revert: true, 
					cursor: 'move', 
					handle: '.js-sort'
				});
			});
		</script>
		<div class="experiment-metabox-container">
			<ul id="js-products">
				<?php
					if($repeatable_fields) {
						foreach($repeatable_fields as $field) {
							echo get_product($field['name']);
						}
					} else {
						echo get_product(null); // empty product (no args)
					}

					echo get_product(null, true); // empty hidden one for jQuery
				?>
			</ul>
			<a id="js-add" class="button">Add Product</a>
		</div>
	<?php
}

add_action('save_post', 'repeatable_meta_box_save');
function repeatable_meta_box_save($post_id) {
	if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
		! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], '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'];

	$count = count( $names );

	for ( $i = 0; $i < $count; $i++ ) {
		if ( $names[$i] != '' ) :
			$new[$i]['name'] = stripslashes( strip_tags( $names[$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 );
}

Copy link

ghost commented Aug 10, 2018

Can anyone tell me how to echo this in my template? Thanks

@fariedrahmat
Copy link

thanks for the code ... you save my life :D

@ElNumany
Copy link

ElNumany commented Nov 7, 2021

Can anyone tell me how to echo this in my template? Thanks

i got this issue now :D

@ElNumany
Copy link

ElNumany commented Nov 7, 2021

btw i got it , it's saved as an array ,
and u got it in front end like this
$mydata = get_post_meta(get_the_ID(), 'customdata_group', true);
The " customdata_group" the Name of Row in DB where data saved ,
<?php echo $mydata[0]['TitleItem'];?>
and this is how u fetch the field in front end :)
Hope u got it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment