How to add Meta Box in WordPress

In this article you will see how to add meta box to post editing screen in admin section of the WordPress.

What is MetaBox in WordPress?

In WP admin section, you can see the draggable boxes inside the post editing screen and these boxes are called Meta Boxes. You can store attributes for the post using this Meta box

WP Custom Field is popular MetaBox you will find your post editing screen

Meta box can be used to enter additional data related to the post. This meta box is draggable box you can use inside post editing screen. You can enter two types of data inside the meta box

1. Meta Data (Custom Fields)
2. Taxonomy terms

Now I am going to explain following topics in this tutorials.

• How to add a Meta Box to WP
• How to save custom Meta Box to post in WP
• How to retrieve custom Meta Box from the post in WP
• How to retrieve custom Meta Box to display in front end in WP

How to create Meta Box

You can use the following code to create the Meta Box for the custom post type book.

 The add_meta_box() is used to add a Meta Box to any post type when editing and subsequently, you can use h add_meta_boxes action to hook the function  eventcal_eventdetail_meta_box() 

function eventcal_eventdetail_meta_box() {
    add_meta_box(
    'book_bookdetail_metabox',      // Unique ID
    esc_html__( 'Book Details', 'example' ),    // Title
    'book_bookdetail_metabox_callback',   // Callback function
    'book',         // Admin page (or post type)
    'normal',         // Context
    'default'         // Priority
  );
}

We need the callback function book_bookdetail_metabox_callback to generate the meta box

function book_bookdetail_metabox_callback($post){ ?>
<table>
    <tbody>
    <tr>
        <th> Author Name</th>
        <td><input name="author" type="text" value="" width="100%"></td>
    </tr>
    </tbody>
</table>
<?php
}
?>

Once you create the callback function you have to call the action hook add_meta_boxes with the callback function

add_action( 'add_meta_boxes', 'book_bookdetail_meta_box' );
You can see the following screen in your WordPress admin for the above code snippet

How to save custom meta data

Now we will see how you can save the custom metadata to the database. To save custom metadata, you can use the save_post action which will be triggered whenever a post is created or updated. So you can use the following code.

add_action( 'save_post', 'save_book_meta', 10, 2 );

Here save_book_meta is a function where we write the code to save meta data to the database.
Following code shows how you can save meta data to the database.

function save_book_meta( $post_id) {
   add_post_meta( $post_id, 'author', 'Name of the Author', true );
}

How to retrieve custom meta data

To retrieve the data from the database you can use the get_post_meta() function. I have changed the book_bookdetail_metabox_callback function as shown in the below code. You can see the value attribute of the input HTML tag.

function book_bookdetail_metabox_callback($post){ ?>
<table>
    <tbody>
    <tr>
        <th>Author Name</th>
        <td><input name="author" type="text"
                   value="<?php echo get_post_meta( $post->ID, ‘author’, true )?> " width="100%"></td>
    </tr>
    </tbody>
</table>
<?php } ?>

How to retrieve custom metadata to display in front end

You can use the get_post_meta() function show the meta data in the WordPress front end.

get_post_meta( $post->ID, 'author', true )