gistfile1.php

<?php
/*
Image Variation CPT
by Connor & da1nonly (https://gist.github.com/da1nonly/2057532)
v1.69 c:
*/

/*----------------------------
	setting up the CPT
----------------------------*/
function image_post_type(){
	$labels = array(
				'name'				=>	'Images',
				'singlular_name'	=>	'Image',
				'add_new'			=>	'Add New',
				'add_new_item'		=>	'Add New Image',
				'edit_item' 		=>	'Edit Image',
				'new_item'			=>	'New Image',
				'all_items'			=>	'All Images',
				'view_item'			=>	'View Image',
				'search_items'		=>	'Search Images',
				'not_found'			=>	'No Images found',
				'not_found_in_trash'=>	'No Images found in Trash', 
				'parent_item_colon' =>	'',
				'menu_name'			=>	'Images'
			);
	
	$args = array(
				'labels'				=>	$labels,
				'public'				=>	true,
				'exclude_from_search' 	=>	false,
				'publicly_queryable'	=>	true,
				'show_ui'				=>	true,
				'show_in_nav_menus'		=>	true,
				'show_in_menu'			=>	true,
				'menu_position'			=>	1,
				//'menu_icon'				=>	'icon32',
				'capability_type'		=>	'post',
				//'map_meta_cap'			=>	false,
				'hierarchical'			=>	false,
				'supports'				=>	array('title', 'editor', 'thumbnail'),
				'register_meta_box_cb'	=>	'add_meta_box_callback',
				'has_archive'			=>	true,
				'query_var'				=>	true,
				'can_export'			=>	true
			);
			
	register_post_type('image_post', $args);
}
add_action('init', 'image_post_type');

/*----------------------------
	meta box callbacks
----------------------------*/
function add_meta_box_callback(){
	add_meta_box('image_variations', 'Image Variations', 'image_variations_callback', 'image_post', 'side', 'low');
}


function image_variations_callback(){
	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($) {
	$('#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="20%">Size</th>
			<th width="20%">Color</th>
			<th width="50%">Link</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="size[]" value="<?php if($field['size'] != '') echo esc_attr( $field['size'] ); ?>" /></td>
		
		<td><input type="text" class="widefat" name="color[]" value="<?php if($field['color'] != '') echo esc_attr( $field['color'] ); ?>" /></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="size[]" /></td>
		
		<td><input type="text" class="widefat" name="color[]" /></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="size[]" /></td>
		
		<td><input type="text" class="widefat" name="color[]" /></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>
	</p>
	
	<?php
}

/*----------------------------
	validation & sanitization
----------------------------*/
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();
 
 
	$sizes = $_POST['size'];
	$colors = $_POST['color'];
	$urls = $_POST['url'];
 
	$count = count( $sizes );
 
	for ( $i = 0; $i < $count; $i++ ) {
		if ( $sizes[$i] != '' ) :
			$new[$i]['size'] = stripslashes( strip_tags( $sizes[$i] ) );
		
		if ( $colors[$i] != '' )
			$new[$i]['color'] = stripslashes( strip_tags( $colors[$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 );
}
add_action('save_post', 'repeatable_meta_box_save');

/*----------------------------
	usage: put do_action('image_post_data'); wherever you want the table to be displayed.
----------------------------*/
function add_image_post_type_to_query($query){
	if(is_home() && $query->is_main_query()){
		$query->set( 'post_type', array('post', 'image_post') );
	}
	return $query;
}
add_filter('pre_get_posts', 'add_image_post_type_to_query');

function use_image_post_data(){
	$variations = get_post_meta(get_the_ID(), 'repeatable_fields', true);
	?>
	<table id="repeatable-fieldset-one" width="100%">
		<thead>
			<tr>
				<th width="20%">Size</th>
				<th width="20%">Color</th>
				<th width="50%">Link</th>
			</tr>
		</thead>
		<tbody>
	<?php
	if (is_array($variations)){
		foreach ( $variations as $field ) {
			?>
			<tr>
				<td><p><?php if($field['size'] != '') echo esc_attr( $field['size'] ); ?></p></td>
				
				<td><p><?php if($field['color'] != '') echo esc_attr( $field['color'] ); ?></p></td>
		 
				<td><a href="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>"><?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?></a></td>
			
			</tr>
			<?php
		}
	}
	?>
		</tbody>
	</table>
	<?php
}
add_action('image_post_data', 'use_image_post_data');
?>