How to Add WordPress Custom Metabox with Multiple Fields

To add WordPress custom meta box with multiple fields, first I will create a meta box with multiple fields.

So in this case, I will add text, select, textarea, radio and checkbox input fields in my custom WordPress meta box, and then will save the value of these fields in the database and show you how to get the value of these fields.

Add Custom WordPress Metabox in the Post Type

To add a custom WordPress metabox, use the code given below and add this code in your theme’s functions.php file.

function diwp_metabox_mutiple_fields(){

	add_meta_box(
			'diwp-metabox-multiple-fields',
			'Metabox With Multiple Fields',
			'diwp_add_multiple_fields',
			'post'
		);
}

add_action('add_meta_boxes', 'diwp_metabox_mutiple_fields');

function diwp_add_multiple_fields(){

	global $post;

	// Get Value of Fields From Database
	$diwp_textfield = get_post_meta( $post->ID, '_diwp_text_field', true);
	$diwp_radiofield = get_post_meta( $post->ID, '_diwp_radio_field', true);
	$diwp_checkboxfield = get_post_meta( $post->ID, '_diwp_checkbox_field', true);
	$diwp_selectfield = get_post_meta( $post->ID, '_diwp_select_field', true);
	$diwp_textareafield = get_post_meta( $post->ID, '_diwp_textarea_field', true);
	
?>
	
<div class="row">
	<div class="label">Textfield</div>
	<div class="fields"><input type="text" name="_diwp_text_field" value="<?php echo $diwp_textfield; ?>"</div>
</div>

<br/>

<div class="row">
	<div class="label">Radio Fields</div>
	<div class="fields">
		<label><input type="radio" name="_diwp_radio_field" value="R1" <?php if($diwp_radiofield == 'R1') echo 'checked'; ?> /> Radio Option 1 </label>
		<label><input type="radio" name="_diwp_radio_field" value="R2"  <?php if($diwp_radiofield == 'R2') echo 'checked'; ?> /> Radio Option 2</label>
		<label><input type="radio" name="_diwp_radio_field" value="R3"  <?php if($diwp_radiofield == 'R3') echo 'checked'; ?>/> Radio Option 3</label>
	</div>
</div>

<br/>

<div class="row">
	<div class="label">Checkbox Fields</div>
	<div class="fields">
		<label><input type="checkbox" name="_diwp_checkbox_field[]" value="C1" <?php if(in_array('C1', $diwp_checkboxfield)) echo 'checked'; ?> /> Checkbox Option 1 </label>
		<label><input type="checkbox" name="_diwp_checkbox_field[]" value="C2" <?php if(in_array('C2', $diwp_checkboxfield)) echo 'checked'; ?>/> Checkbox Option 2</label>
		<label><input type="checkbox" name="_diwp_checkbox_field[]" value="C3" <?php if(in_array('C3', $diwp_checkboxfield)) echo 'checked'; ?>/> Checkbox Option 3</label>
	</div>
</div>

<br/>

<div class="row">
	<div class="label">Select Dropdown</div>
	<div class="fields">
		<select name="_diwp_select_field">
			<option value="">Select Option</option>
			<option value="1" <?php if($diwp_selectfield == '1') echo 'selected'; ?>>Option 1</option>
			<option value="2" <?php if($diwp_selectfield == '2') echo 'selected'; ?>>Option 2</option>
			<option value="3" <?php if($diwp_selectfield == '3') echo 'selected'; ?>>Option 3</option>
		</select>
	</div>
</div>

<br/>

<div class="row">
	<div class="label">Textarea</div>
	<div class="fields">
		<textarea rows="5" name="_diwp_textarea_field"><?php echo $diwp_textareafield; ?></textarea>
	</div>
</div>

<?php	
}

After adding this code, Go to Posts >> Add New and then just below the WordPress editor, you will see a custom metabox with multiple input fields as shown in the image below.
WordPress custom metabox with multiple fields

If you are seeing something similar to the above image, then you have successfully added a custom WordPress metabox.

However, you can change the input fields, their names, values as per your requirements but the basic workflow will be the same. The next step will save the value of these fields in the database.

Save Value of Metabox Fields

In general, meta boxes are associated with post types, so to save metabox value we use save_post hook. This hook will save the metabox value when you update or save your post.

Now, to save the value of these multiple fields add the below code in your theme’s functions.php file.

// Now Save these multiple fields value in the Database

function diwp_save_multiple_fields_metabox(){

	global $post;


	if(isset($_POST["_diwp_text_field"])) :
	update_post_meta($post->ID, '_diwp_text_field', $_POST["_diwp_text_field"]);
	endif;

	if(isset($_POST["_diwp_radio_field"])) :
	update_post_meta($post->ID, '_diwp_radio_field', $_POST["_diwp_radio_field"]);
	endif;

	if(isset($_POST["_diwp_checkbox_field"])) :
	update_post_meta($post->ID, '_diwp_checkbox_field', $_POST["_diwp_checkbox_field"]);
	endif;

	if(isset($_POST["_diwp_select_field"])) :
	update_post_meta($post->ID, '_diwp_select_field', $_POST["_diwp_select_field"]);
	endif;

	if(isset($_POST["_diwp_textarea_field"])) :
	update_post_meta($post->ID, '_diwp_textarea_field', $_POST["_diwp_textarea_field"]);
	endif;

}

add_action('save_post', 'diwp_save_multiple_fields_metabox');

The above code will save the value of these fields of metabox in the database. Now you can get the value of metabox fields and display them in your theme.

Get Value of Metabox Fields

Getting the value of metabox fields is pretty easy, you can use the function get_post_meta( $post_id, $metakey, true ) to get the metabox value.

You can pass post_id, and meta_key in the get_post_meta() function to get the value of meta box fields.

// To Get Value of Text Field
echo get_post_meta( $post->ID, '_diwp_text_field', true);

// To Get Value of radio Field
echo get_post_meta( $post->ID, '_diwp_radio_field', true);
	
// To Get Value of Checkbox Field
echo get_post_meta( $post->ID, '_diwp_checkbox_field', true);

// To Get Value of SelectField
echo get_post_meta( $post->ID, '_diwp_select_field', true);

// To Get Value of Textarea Field
echo get_post_meta( $post->ID, '_diwp_textarea_field', true);

Share it to the Community!

Advertisement

Related Posts

Leave a Reply

Your email address will not be published.

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top