In this article you will see how to add meta box to post editing screen in admin section of the 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
Now I am going to explain following topics in this tutorials.
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
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 );
}
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 } ?>
You can use the get_post_meta() function show the meta data in the WordPress front end.
get_post_meta( $post->ID, 'author', true )