Andy Tran

Add Meta Box in Custom Post Type

by | 4 Sep, 2021 | Wordpress | 0 comments

Add Meta Box in Custom Post Type

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    
}

Display Meta box in Custom Post Type

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

Thank you for taking the time to explore our blog. We believe you’ve discovered valuable insights into our ideas and processes. Erudite Works Pvt. Ltd. stands out as a premier IT outsourcing company, deeply committed to delivering outstanding results. Our expert team is dedicated to comprehending our clients’ unique needs, enabling us to offer customized solutions that foster significant business growth. With a proven history of successful projects, we are devoted to aiding clients in achieving their goals and staying competitive in today’s dynamic digital landscape. To learn more about our services, please don’t hesitate to reach out to us. Contact Us.

Share this article...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.