WordPress.org

Forums

Add multiple fields to a repeatable form meta (2 posts)

  1. dustykhan
    Member
    Posted 2 years ago #

    Hi, I followed the tutorial on tuts+ to add a custom meta box and I was wondering if it was possible to add an image input on the repeatable section? I use the code below:
    Thanks in advance :)

    <?
    
    // Add the Meta Box
    function add_custom_meta_box() {
        add_meta_box(
    		'custom_meta_box', // $id
    		'TWP Wine Information', // $title
    		'show_custom_meta_box', // $callback
    		'page', // $page
    		'normal', // $context
    		'high'); // $priority
    }
    add_action('add_meta_boxes', 'add_custom_meta_box');
    
    // Field Array
    $prefix = 'custom_';
    $custom_meta_fields = array(
    	array(
    		'label'	=> 'Brand logo',
    		'desc'	=> 'Upload the brand logo for the selected wine.',
    		'id'	=> $prefix.'brand',
    		'type'	=> 'image'
    	),
    	array(
    		'label'	=> 'Grape variety',
    		'desc'	=> 'Enter a sentence about the grape variety.',
    		'id'	=> $prefix.'grape',
    		'type'	=> 'text'
    	),
    	array(
    		'label'	=> 'Where is this wine made?',
    		'desc'	=> 'A description about where the wine is made.',
    		'id'	=> $prefix.'where',
    		'type'	=> 'textarea'
    	),
    	array(
    		'label'	=> 'About the wine',
    		'desc'	=> 'A description about the wine.',
    		'id'	=> $prefix.'about',
    		'type'	=> 'textarea'
    	),
    	array(
    		'label'	=> 'Tasting notes',
    		'desc'	=> 'A description about the taste.',
    		'id'	=> $prefix.'tasting',
    		'type'	=> 'textarea'
    	),
    	array(
    		'label'	=> 'Awards Title',
    		'desc'	=> 'Enter the title of the awards section.',
    		'id'	=> $prefix.'awards',
    		'type'	=> 'text'
    	),
    	array(
    		'label'	=> 'Awards',
    		'desc'	=> 'A list of awards.',
    		'id'	=> $prefix.'award01',
    		'type'	=> 'repeatable'
    	),
    	array(
    		'label'	=> 'Food matching recommendations',
    		'desc'	=> 'A recommendation about foods this wine goes with.',
    		'id'	=> $prefix.'food',
    		'type'	=> 'textarea'
    	),
    	array(
    		'label'	=> 'Local recipies',
    		'desc'	=> 'A description about local recipies',
    		'id'	=> $prefix.'recipe',
    		'type'	=> 'textarea'
    	),
    	array(
    		'label'	=> 'Ingredients',
    		'desc'	=> 'A list of the required ingredients.',
    		'id'	=> $prefix.'ingredients',
    		'type'	=> 'repeatable'
    	),
    	array(
    		'label'	=> 'Method',
    		'desc'	=> 'A guide how to cook the recipe',
    		'id'	=> $prefix.'method',
    		'type'	=> 'textarea'
    	)
    );
    
    // enqueue scripts and styles, but only if is_admin
    if(is_admin()) {
    	wp_enqueue_script('jquery-ui-datepicker');
    	wp_enqueue_script('jquery-ui-slider');
    	wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');
    	wp_enqueue_style('jquery-ui-custom', get_template_directory_uri().'/css/jquery-ui-custom.css');
    }
    
    // add some custom js to the head of the page
    add_action('admin_head','add_custom_scripts');
    function add_custom_scripts() {
    	global $custom_meta_fields, $post;
    
    	$output = '<script type="text/javascript">
    				jQuery(function() {';
    
    	foreach ($custom_meta_fields as $field) { // loop through the fields looking for certain types
    		// date
    		if($field['type'] == 'date')
    			$output .= 'jQuery(".datepicker").datepicker();';
    		// slider
    		if ($field['type'] == 'slider') {
    			$value = get_post_meta($post->ID, $field['id'], true);
    			if ($value == '') $value = $field['min'];
    			$output .= '
    					jQuery( "#'.$field['id'].'-slider" ).slider({
    						value: '.$value.',
    						min: '.$field['min'].',
    						max: '.$field['max'].',
    						step: '.$field['step'].',
    						slide: function( event, ui ) {
    							jQuery( "#'.$field['id'].'" ).val( ui.value );
    						}
    					});';
    		}
    	}
    
    	$output .= '});
    		</script>';
    
    	echo $output;
    }
    
    // The Callback
    function show_custom_meta_box() {
    	global $custom_meta_fields, $post;
    	// Use nonce for verification
    	echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';
    
    	// Begin the field table and loop
    	echo '<table class="form-table">';
    	foreach ($custom_meta_fields as $field) {
    		// get value of this field if it exists for this post
    		$meta = get_post_meta($post->ID, $field['id'], true);
    		// begin a table row with
    		echo '<tr>
    				<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
    				<td>';
    				switch($field['type']) {
    					// text
    					case 'text':
    						echo '<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$meta.'" size="59" />
    								<br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// textarea
    					case 'textarea':
    						echo '<textarea name="'.$field['id'].'" id="'.$field['id'].'" cols="60" rows="4">'.$meta.'</textarea>
    								<br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// checkbox
    					case 'checkbox':
    						echo '<input type="checkbox" name="'.$field['id'].'" id="'.$field['id'].'" ',$meta ? ' checked="checked"' : '','/>
    								<label for="'.$field['id'].'">'.$field['desc'].'</label>';
    					break;
    					// select
    					case 'select':
    						echo '<select name="'.$field['id'].'" id="'.$field['id'].'">';
    						foreach ($field['options'] as $option) {
    							echo '<option', $meta == $option['value'] ? ' selected="selected"' : '', ' value="'.$option['value'].'">'.$option['label'].'</option>';
    						}
    						echo '</select><br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// radio
    					case 'radio':
    						foreach ( $field['options'] as $option ) {
    							echo '<input type="radio" name="'.$field['id'].'" id="'.$option['value'].'" value="'.$option['value'].'" ',$meta == $option['value'] ? ' checked="checked"' : '',' />
    									<label for="'.$option['value'].'">'.$option['label'].'</label><br />';
    						}
    						echo '<span class="description">'.$field['desc'].'</span>';
    					break;
    					// checkbox_group
    					case 'checkbox_group':
    						foreach ($field['options'] as $option) {
    							echo '<input type="checkbox" value="'.$option['value'].'" name="'.$field['id'].'[]" id="'.$option['value'].'"',$meta && in_array($option['value'], $meta) ? ' checked="checked"' : '',' />
    									<label for="'.$option['value'].'">'.$option['label'].'</label><br />';
    						}
    						echo '<span class="description">'.$field['desc'].'</span>';
    					break;
    					// tax_select
    					case 'tax_select':
    						echo '<select name="'.$field['id'].'" id="'.$field['id'].'">
    								<option value="">Select One</option>'; // Select One
    						$terms = get_terms($field['id'], 'get=all');
    						$selected = wp_get_object_terms($post->ID, $field['id']);
    						foreach ($terms as $term) {
    							if (!empty($selected) && !strcmp($term->slug, $selected[0]->slug))
    								echo '<option value="'.$term->slug.'" selected="selected">'.$term->name.'</option>';
    							else
    								echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
    						}
    						$taxonomy = get_taxonomy($field['id']);
    						echo '</select><br /><span class="description"><a href="'.get_bloginfo('home').'/wp-admin/edit-tags.php?taxonomy='.$field['id'].'">Manage '.$taxonomy->label.'</a></span>';
    					break;
    					// post_list
    					case 'post_list':
    					$items = get_posts( array (
    						'post_type'	=> $field['post_type'],
    						'posts_per_page' => -1
    					));
    						echo '<select name="'.$field['id'].'" id="'.$field['id'].'">
    								<option value="">Select One</option>'; // Select One
    							foreach($items as $item) {
    								echo '<option value="'.$item->ID.'"',$meta == $item->ID ? ' selected="selected"' : '','>'.$item->post_type.': '.$item->post_title.'</option>';
    							} // end foreach
    						echo '</select><br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// date
    					case 'date':
    						echo '<input type="text" class="datepicker" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$meta.'" size="30" />
    								<br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// slider
    					case 'slider':
    					$value = $meta != '' ? $meta : '0';
    						echo '<div id="'.$field['id'].'-slider"></div>
    								<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$value.'" size="5" />
    								<br /><span class="description">'.$field['desc'].'</span>';
    					break;
    					// image
    					case 'image':
    						$image = get_template_directory_uri().'/images/image.png';
    						echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';
    						if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium');	$image = $image[0]; }
    						echo	'<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
    									<img src="'.$image.'" class="custom_preview_image" alt="" /><br />
    										<input class="custom_upload_image_button button" type="button" value="Choose Image" />
    										<small>&nbsp;<a href="#" class="custom_clear_image_button">Remove Image</a></small>
    										<br clear="all" /><span class="description">'.$field['desc'].'</span>';
    					break;
    
    					// repeatable
    					case 'repeatable':
    						echo '<a class="repeatable-add button" href="#">+</a>
    								<ul id="'.$field['id'].'-repeatable" class="custom_repeatable">';
    						$i = 0;
    						if ($meta) {
    							foreach($meta as $row) {
    								echo '<li><span class="sort hndle">|||</span>
    											<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="'.$row.'" size="57" />
    											<a class="repeatable-remove button" href="#">-</a></li>';
    								$i++;
    							}
    						} else {
    							echo '<li><span class="sort hndle">|||</span>
    										<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="" size="57" />
    										<a class="repeatable-remove button" href="#">-</a></li>';
    						}
    						echo '</ul>
    							<span class="description">'.$field['desc'].'</span>';
    					break;
    
    				} //end switch
    		echo '</td></tr>';
    	} // end foreach
    	echo '</table>'; // end table
    }
    
    function remove_taxonomy_boxes() {
    	remove_meta_box('categorydiv', 'post', 'side');
    }
    add_action( 'admin_menu' , 'remove_taxonomy_boxes' );
    
    // Save the Data
    function save_custom_meta($post_id) {
        global $custom_meta_fields;
    
    	// verify nonce
    	if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
    		return $post_id;
    	// check autosave
    	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    		return $post_id;
    	// check permissions
    	if ('page' == $_POST['post_type']) {
    		if (!current_user_can('edit_page', $post_id))
    			return $post_id;
    		} elseif (!current_user_can('edit_post', $post_id)) {
    			return $post_id;
    	}
    
    	// loop through fields and save the data
    	foreach ($custom_meta_fields as $field) {
    		if($field['type'] == 'tax_select') continue;
    		$old = get_post_meta($post_id, $field['id'], true);
    		$new = $_POST[$field['id']];
    		if ($new && $new != $old) {
    			update_post_meta($post_id, $field['id'], $new);
    		} elseif ('' == $new && $old) {
    			delete_post_meta($post_id, $field['id'], $old);
    		}
    	} // enf foreach
    
    	// save taxonomies
    	$post = get_post($post_id);
    	$category = $_POST['category'];
    	wp_set_object_terms( $post_id, $category, 'category' );
    }
    add_action('save_post', 'save_custom_meta');
    
    ?>
  2. Mario Giancini
    Member
    Posted 2 years ago #

    I was trying to figure this one out as well, but with no reliable results. I'm resorting to using wordpress galleries instead. Use wp_query() to grab the images that were uploaded from the native media uploader with respect to the current page. (Was going to use it for background slides for a particular page template).

    Tammy (the Tutorial author) has a newer version of the metabox code on github. The repeatable section is updated that includes the ability to choose which type of repeatable field you want (text, check box, image, file, date, etc). However, the code isn't finished and doesn't work right out of the box. You'd have to play around with it and see if you can get some results. I was unable, however I'm using it in a child theme.

    github.com/tammyhart/Reusable-Custom-WordPress-Meta-Boxes

Topic Closed

This topic has been closed to new replies.

About this Topic