The most critical part of the wordpress development theme is to make a custom meta box. It avoids forcing clients to depend on custom fields and it is an approach to add an editor to the post screen. when you create a post type then you have to add some extra feature to it therefore you make some custom fields but that does not look good so instead of making custom field we basically make the custom meta box that adds the extra information and functionality of the user. So if you want to add the piece of data to post, pages, or custom post page admin then you can make the custom meta box.

Difference between the custom field and custom meta box

Custom fields permit clients to include key sets of information to a post, page or custom post sort. Yet, meta boxes can have numerous functionalities of information fields, for example, picking the color, document transfer, drop downs, etc.

Understanding the metadata

Metadata is basically the data about the data. In contrast to the custom meta box it means that the value of forms that is stored in the metabox is in the form of key value pair like meta key and meta value. Meta value is basically the form field value and meta key is the name of the form field.

Creating a meta box

function add_custom_meta_box()
{

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


    add_meta_box("demo-meta-box", "Custom Meta Box", "own_meta_box_markup", "post", "side", "high", null);
}

add_action("add_meta_boxes", "add_custom_meta_box");

Creating the own_meta_box_markup function

function own_meta_box_markup($object)
{
    wp_nonce_field(basename(__FILE__), "meta-box-nonce");

    ?>
        <div>
            <label for="text_meta_box">Text</label>
            <input name="text_meta_box" type="text" value="<?php echo get_post_meta($object->ID, "text_meta_box", true); ?>">

            <br>

            <label for="dropdown_meta_box">Dropdown</label>
            <select name="dropdown_meta_box">
                <?php 
                    $option_values = array(1, 2, 3, 4, 5, 6);

                    foreach($option_values as $key => $value) 
                    {
                        if($value == get_post_meta($object->ID, "dropdown_meta_box", true))
                        {
                            ?>
                                <option selected><?php echo $value; ?></option>
                            <?php    
                        }
                        else
                        {
                            ?>
                                <option><?php echo $value; ?></option>
                            <?php
                        }
                    }
                ?>
            </select>

            <br>

            <label for="checkbox_meta_box">Check Box</label>
            <?php
                $checkbox_value = get_post_meta($object->ID, "checkbox_meta_box", true);

                if($checkbox_value == "")
                {
                    ?>
                        <input name="checkbox_meta_box" type="checkbox" value="true">
                    <?php
                }
                else if($checkbox_value == "true")
                {
                    ?>  
                        <input name="checkbox_meta_box" type="checkbox" value="true" checked>
                    <?php
                }
            ?>
        </div>
    <?php  
}

Creating function for saving the value of the custom box

function save_custom_meta_box($post_id, $post, $update)
{
    if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], basename(__FILE__)))
        return $post_id;

    if(!current_user_can("edit_post", $post_id))
        return $post_id;

    if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
        return $post_id;

    $slug = "post";
    if($slug != $post->post_type)
        return $post_id;

    $meta_box_text_value = "";
    $meta_box_dropdown_value = "";
    $meta_box_checkbox_value = "";

    if(isset($_POST["text_meta_box"]))
    {
        $meta_box_text_value = $_POST["text_meta_box"];
    }   
    update_post_meta($post_id, "text_meta_box", $meta_box_text_value);

    if(isset($_POST["dropdown_meta_box"]))
    {
        $meta_box_dropdown_value = $_POST["dropdown_meta_box"];
    }   
    update_post_meta($post_id, "dropdown_meta_box", $meta_box_dropdown_value);

    if(isset($_POST["checkbox_meta_box"]))
    {
        $meta_box_checkbox_value = $_POST["checkbox_meta_box"];
    }   
    update_post_meta($post_id, "checkbox_meta_box", $meta_box_checkbox_value);
}

add_action("save_post", "save_custom_meta_box", 10, 3);