How To Create Meta Box In WordPress

WordPress, as CMS, allows you to create meta box into it, which can help you to represent the design uniquely. It will also help you to maintain the main content of the post/page created to be highlighted uniquely. So, let’s move ahead and lear about how to create meta box in WordPress.

What is meta box in WordPress?

Meta Box in WordPress is simply the custom modular edit screens elements, which can collect the required information of the post/page currently being edited/created within your site. And those meta boxes created will have clear relationship with those posts as well.

By default, if you do not want to show any of the meta boxes for your site while creating the posts/pages for your site then, you can hide it. In order to hide those, top right corner, you can see that there is Screen Options section within it. Now, you just need to click on that and then, remove the checkmark on the checkbox options available there which are not required to get displayed.

How to create meta box in WordPress?

Now, after you have the surface look, ie, known about the meta box in WordPress, now, you may want to utilize the same within your built in WordPress projects right? Well then, why the wait. Let’s move ahead and proceed about how to create meta box in WordPress.

First of all, what you have to know is, you need to know the hook of WordPress, in which you need to hook the custom meta box to be added. Well, the hook for this is: add_meta_boxes. So, let us create a function in the functons.php file of the theme to do the same. For that, you can add the below PHP code in the mentioned file of any of the included file within the theme:

function theme_slug_custom_meta_box() {
add_meta_box( 'team-designation', esc_html__( 'Team Designation', 'theme-textdomain' ), 'theme_slug_team_designation', array( 'page' ) );

add_action( 'add_meta_boxes', 'theme_slug_custom_meta_box' );

Here in above, we have created the custom meta box for team designation via the function add_meta_box(), in which the added details inside it are as follows:

  1. team-designation: The id of the meta box which you are creating
  2. esc_html__( 'Team Designation', 'theme-textdomain' ): The name/title of the created meta box to be represented in the post editor screen
  3. theme_slug_team_designation: The function/callback function which holds of the data for the custom meta box created
  4. array( 'page' ): The screen or post types in which this meta boxes will be used. Here, as an example, we have used it in the page post type only.

You can find more information on this function from here.

How to create meta box function which renders the meta box content?

Here, in above, we have created the callback function named as: theme_slug_team_designation which will hold the content of the custom meta box created. So, lets move ahead and create this function within your theme file. Here, we are since only creating the designation, so, we can utilize the text box for this.

So, let’s move ahead and add the required function for same as below in your theme file included:

function theme_slug_team_designation( $post ) {
$team_designation = get_post_custom( $post -> ID );
$team_designation_box = isset( $team_designation[ 'team_designation' ] ) ? esc_attr( $team_designation[ 'team_designation' ][ 0 ] ) : '';

wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );

<input type="text" class="widefat" name="team_designation" id="team_designation" value="<?php echo $team_designation_box; ?>"/>

Here in above, first of all, we need to get the post meta if already present, which is managed via $team_designation = get_post_custom( $post -> ID ); and then, assign it to another variable checking if it is already set or not. Now, after that checking, you can call/render that variable within the input type text as we did above in the last place. Also, the id which holds up this meta box data created is: team_designation, so, to display/save this id into database, you need to use this very id.

After the above completions, you can see the output in the post editor section as below:

Now, you have successfully created the custom meta box for your theme/plugin if you have seen the same screen as above after the above tutorial completion. Now, the only thing remaining is to validate the inputted/added content within it, ie, proper save function.

How to create meta box save function?

We should never trust on the users input at all. So, we should always escape/validate/serialize the user inputted date before saving. In the context of the custom meta boxes too, we do have to follow the same. So, let’s create the save function to save the custom meta box data.

First of all, since this is post, we need to know in which WordPress hook, we need to add the function created for saving the datas. Well, the function name is: save_post in which we need to hook the save function for custom meta boxes created.

Now, knowing the surface on this, let’s move ahead and create the function for the same. For this, you can add the below PHP code in the theme file included as required:

Now, from above save function, in which we have used the sanitize_text_field function to save into the WordPress post meta data, users can’t add any random data within that meta box created and that data will be secure. Also, we need to check for others too, which we have already added within the comments above those checks.

How to displayed the created custom meta box data?

Lastly, you want want to know since you have already created up the meta box for your WordPress project now, how about displaying it? Well, that too is very easy to do. For that, you have the WordPress function named as get_post_meta. So, let’s implement this same within your WordPress project too.

For this, open up your WordPress post loop and inside that, add the below PHP code to display that custom post meta data:

// Get custom meta box data
$team_designation = get_post_meta( get_the_ID(), 'team_designation', true );

// Display the custom meta box data
echo $team_designation;

You may also want to read:

  1. Creating Sticky Post In WordPress
  2. Integrate Bootstrap NavBar 4 Into WordPress Theme
  3. Creating Contact Us Page Via Contact Form 7 Plugin
  4. Solve Maximum Execution Time Of 60 Seconds Exceeded
  5. Display Different Widgets Per Different Pages


If you have successfully followed this tutorial and have became successfully able to create meta box in your custom built in WordPress theme or plugin then, we can assume that you are now more familiar on this feature than before. But, if you are still confused about how to do it and want more help on this then do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.