Most custom post types in WordPress will need a unique set of add meta boxes for entering information. For example, a “Coupon” post type might need fields for “Coupon Code”, “Site Name”, “Site URL”, “Start Date”, “end Date”, “Type” etc.

Sometimes we need to add extra data to our posts or pages. We can easily add text input, text area, Radio buttons, Dropdowns, file upload, etc. as meta boxes.

Custom Meta Box vs Custom Fields

Custom fields allow users to add key/value pairs of data to a post, page, or custom post type. But meta boxes can have many varieties of input fields such as color picker, file upload, dropdowns, and so on.
We need a Custom Post Type To add the meta boxes.
 

Setup Custom Post Type

If you are unfamiliar with how to set up custom post types, check out Create Custom Post Type in WordPress Without Plugin
For this example, We are going to use a post type called “Coupon”, which goes in functions.php file.
 

Syntax of add_meta_box

add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );

Add Meta Box in Coupon Post Type

function diwp_metabox_mutiple_fields(){
 
    add_meta_box(
            'diwp-metabox-multiple-fields',
            'Coupon Configuration',
            'diwp_add_multiple_fields',
            'coupon'
        );
}
add_action('add_meta_boxes', 'diwp_metabox_mutiple_fields');

Add Multiple Fields In Coupon Post Type

function diwp_add_multiple_fields(){ 
    global $post; 
    // Get Value of Fields From Database
    $lblTitle = get_post_meta( $post->ID, 'lbltitle', true);
    $sName = get_post_meta( $post->ID, 'siteName', true);
    $sURL = get_post_meta( $post->ID, 'siteURL', true);
    $sdate = get_post_meta( $post->ID, 'startDate', true);
    $edate = get_post_meta( $post->ID, 'endDate', true);
    $ccode = get_post_meta( $post->ID, 'coupon_code', true);
    $psku = get_post_meta( $post->ID, 'product_sku', true);
    $nou = get_post_meta( $post->ID, 'users', true);
    $type = get_post_meta( $post->ID, 'coupontype', true);     
?>     
<div class="row">
    <div class="label"><b>Label Title</div>
    <div class="fields"><input style="width:50%" type="text" name="lbltitle" value="<?php echo $lblTitle; ?>">
</div>
</div>
<br>
<div class="row">
    <div class="label"><b>Offer Site Name</b></div>
    <div class="fields"><input style="width:50%" type="text" name="siteName" value="<?php echo $sName; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>Site URL</b></div>
    <div class="fields"><input style="width:50%"  type="url" name="siteURL" value="<?php echo $sURL; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>Start Date</b></div>
    <div class="fields"><input  style="width:50%" type="date" name="startDate" value="<?php echo $sdate; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>End Date</b></div>
    <div class="fields"><input style="width:50%"  type="date" name="endDate" value="<?php echo $edate; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>Coupon Code</b></div>
    <div class="fields"><input style="width:50%"  type="text" name="coupon_code" value="<?php echo $ccode; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>Product SKU</b></div>
    <div class="fields"><input style="width:50%"  type="text" name="product_sku" value="<?php echo $psku; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>No. of users</b></div>
    <div class="fields"><input  style="width:50%"  type="number" name="users" value="<?php echo $nou; ?>"></div>
</div>
<br>
<div class="row">
    <div class="label"><b>Type</b></div>
    <div class="fields">
        <select name="coupontype" style="width:50%" >
            <option value="">Select Option</option>
            <option value="1" <?php if($type == '1') echo 'selected'; ?>>Offer</option>
            <option value="2" <?php if($type == '2') echo 'selected'; ?>>Deal</option>
        </select>
    </div>
</div> 
<?php    
}

 

 

Save Meta Box Fields Value

function diwp_save_multiple_fields_metabox(){
 
    global $post;
 
 
    if(isset($_POST["lbltitle"])) :
        update_post_meta($post->ID, 'lbltitle', $_POST["lbltitle"]);
    endif;
 
    if(isset($_POST["siteName"])) :
        update_post_meta($post->ID, 'siteName', $_POST["siteName"]);
    endif;
 
    if(isset($_POST["siteURL"])) :
        update_post_meta($post->ID, 'siteURL', $_POST["siteURL"]);
    endif;

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

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

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

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

    
    if(isset($_POST["users"])) :
        update_post_meta($post->ID, 'users', $_POST["users"]);
    endif;
 
    if(isset($_POST["coupontype"])) :
        update_post_meta($post->ID, 'coupontype', $_POST["coupontype"]);
    endif;
}
 
add_action('save_post', 'diwp_save_multiple_fields_metabox');

To remove existing meta boxes from an edit screen use the remove_meta_box() function. The passed parameters must exactly match those used to add the meta box with add_meta_box().

 
To Continue Learning,
you can refer our blogpost Add Custom Theme Customize Options