WordPress Custom Meta Box

How to create a custom meta box in WordPress Admin Interface without using the plugin?

1. Create a custom Meta box container.
2. Create a function for Meta box content.
3. Create a function for Save the data of the Meta field.

Meta Box

We can add a meta box to any post type like posts, pages and custom post types for adding additional information using WordPress API.

Meta values are stored in the wp_postmeta database table.

Let’s consider If I want to add the ingredients meta box in the product post type, for the WooCommerce store, Implement the following steps.

First, create a custom Meta Box container

The add_meta_box function used to create a custom meta box.

add_meta_box has the following parameters.

1. Id – Meta box unique Identifier.
2. Title – Meta box title on the admin interface.
3. add_meta_box callback – To display the content of the meta box.
4. Post Type – To define where the meta box should display on which post type (post, page, custom_post_type).
5. Position – Position of the custom meta box (normal, advanced, side).
6. Priority – Defines the position of the meta box (high, core, default, low).

Here is the code to create a custom meta box container.

add_action( 'add_meta_boxes', 'create_ingredients_meta_box' );
if ( ! function_exists( 'create_ingredients_meta_box' ) ){
    function create_ingredients_meta_box() {
        add_meta_box(
            'custom_ingredients_field',   //unique id
            __( 'Ingredients Tab', 'woocommerce' ), //Meta box title
            'add_ingredients_meta_box',   //callback function
            'product',  //Post Type
            'normal',  // Position
            'high'  //Priority
        );
    }
}

The screenshot below will show how the Ingredients Tab looks on the WordPress Admin Post interface. Meta box container will display only the container. Next,  we have to add the input box inside the container.

Create a content box

In this following example, We have created the wp_editor. We can customize the editor height as much as we need. Instead of wp_editor, we can add the input box, drop-down box, Text area inside the custom meta box container.

get_post_meta retrieves the data from the database.

//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_ingredients_meta_box' ) ){
    function add_ingredients_meta_box( $post ) {
        $value = get_post_meta( $post->ID, 'ingredients', true ) ? get_post_meta( $post->ID, 'ingredients', true ) : '';
        wp_editor( $value, 'custom_ingredients', array( 'editor_height' => 300 ) );
        echo '<input type="hidden" name="custom_ingredients_field_nonce" value="' . wp_create_nonce() . '">';
    }
}

The below screenshot shows the wp_editor custom meta box content.

Save the custom metadata

Custom metadata will store on database once the user clicks on Publish or Update button.

When Saving the meta data, check the following things.

1. We need to verify our nonce is set with the proper authorization (security stuff).
2. Check If this is an auto save, our form has not been submitted, so we don’t want to do anything.
3. Check the user’s permissions to edit the post.
4. Sanitize user input and update the meta field in the database.

Here is the code for save the custom meta data.

//Save the data of the Meta field
add_action( 'save_post', 'save_ingredients_meta_box', 10, 1 );
if ( ! function_exists( 'save_ingredients_meta_box' ) ){
    function save_ingredients_meta_box( $post_id ) {
        // We need to verify this with the proper authorization (security stuff).
        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_ingredients_field_nonce' ] ) ) {return $post_id;}
        $nonce = $_REQUEST[ 'custom_ingredients_field_nonce' ];
        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $nonce ) ) {return $post_id;}
        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {return $post_id;}

        // Check the user's permissions.
        if ( 'page' == $_POST[ 'post_type' ] ) {
            if ( ! current_user_can( 'edit_page', $post_id ) ) {return $post_id;}
        } else {
            if ( ! current_user_can( 'edit_post', $post_id ) ) {return $post_id;}
        }
        // --- Its safe for us to save the data ! --- //
        // Sanitize user input  and update the meta field in the database.
        update_post_meta( $post_id, 'ingredients', wp_kses_post($_POST[ 'custom_ingredients' ]) );
    }
}

Here is the final code for Custom Meta Box.

// ####Custom Code Ingredients starts######
// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_ingredients_meta_box' );
if ( ! function_exists( 'create_ingredients_meta_box' ) ){
    function create_ingredients_meta_box() {
        add_meta_box(
            'custom_ingredients_field',
            __( 'Ingredients Tab', 'woocommerce' ),
            'add_ingredients_meta_box',
            'product',
            'normal',
            'high'
        );
    }
}
//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_ingredients_meta_box' ) ){
    function add_ingredients_meta_box( $post ) {
        $value = get_post_meta( $post->ID, 'ingredients', true ) ? get_post_meta( $post->ID, 'ingredients', true ) : '';
        wp_editor( $value, 'custom_ingredients', array( 'editor_height' => 300 ) );
        echo '<input type="hidden" name="custom_ingredients_field_nonce" value="' . wp_create_nonce() . '">';
    }
}
//Save the data of the Meta field
add_action( 'save_post', 'save_ingredients_meta_box', 10, 1 );
if ( ! function_exists( 'save_ingredients_meta_box' ) ){
    function save_ingredients_meta_box( $post_id ) {
        // We need to verify this with the proper authorization (security stuff).
        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_ingredients_field_nonce' ] ) ) {return $post_id;}
        $nonce = $_REQUEST[ 'custom_ingredients_field_nonce' ];
        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $nonce ) ) {return $post_id;}
        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {return $post_id;}

        // Check the user's permissions.
        if ( 'page' == $_POST[ 'post_type' ] ) {
            if ( ! current_user_can( 'edit_page', $post_id ) ) {return $post_id;}
        } else {
            if ( ! current_user_can( 'edit_post', $post_id ) ) {return $post_id;}
        }
        // --- Its safe for us to save the data ! --- //
        // Sanitize user input  and update the meta field in the database.
        update_post_meta( $post_id, 'ingredients', wp_kses_post($_POST[ 'custom_ingredients' ]) );
    }
}