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.
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);
