How to add WordPress Meta Box – 3 easy steps for Developers

What is WordPress Meta Box?

WordPress meta box is the option where you can put special information i.e. Post reference URL, Author name, Guest blogger name etc. Meta box can be a bunch of text box or text area or image uploading option. In a nutshell, meta box lets you enter or choose extra info on post types like post, page or custom post types. See the image below for clear concept.
wordpress meta box

Why we need it?

Say, you need to show your Guest blogger information on the post. Every time want to edit main post body? Of course not. There is easy an option to show data using WordPress meta box. Luckily, WordPress has a function called add_meta_box, it will let you register your desired meta box on post types. So, let’s see how can we add it.

How to add WordPress Meta Box?

There are 3 steps to add meta box. First, register the box, then execute the callback function adding box HTML code or whatever. At the last, save the meta box data. WordPress add_meta_box function is the initialization of the meta box. It has few parameters –

1. Meta box ID
2. Title of the meta box
3. Callback function that fills the box with the desired content. It will echo the meta box data.
4. The Post Types where you want to show meta box i.e. post, page, custom post types. See how to make custom post types.
5. The context within the screen where the boxes should display. Example: ‘normal’, ‘side’, and ‘advanced’. Side means meta box shows on the side of Post edit screen.
6. Priority. The priority within the context where the boxes should show ‘high’ ‘low’.

Now, write some codes for the add_meta_box function. Let’s say we want to show Guest write details. Like their name and website address.

Add these codes in functions.php

function add_guest_details() {
	
  add_meta_box('guest-details', 'Guest details', 'guestcallback', 'post', 'side', 'high');
  
}

add_action('add_meta_boxes', 'add_guest_details');

meta box registration is done. Now add meta box contents in the callback. So that it can echo the contents.

function guestcallback($post) {
	
	  wp_nonce_field( 'guest_meta_box', 'guest_nonce' );
	 
	  $name_value = get_post_meta( $post->ID, '_guest_name', true );
	  $link_value = get_post_meta( $post->ID, '_guest_link', true );
	 
	  echo '<label for="guest-name">'. 'Guest Blogger Name' .'</label>';
	  echo '<input type="text" id="guest-name" name="guest_name" placeholder="Example" value="'.$name_value.'" size="25"/>';
	  echo '<p class="howto">'. 'Add the name of the Guest' .'</p>';
	 
	  echo '<label for="guest-link">'. 'Guest website Link' .'</label>';
	  echo '<input type="text" id="guest-link" name="guest_link" placeholder="http://www.example.com/" value="'.$link_value.'" size="25"/>';
	  echo '<p class="howto">'. 'Add the link of the website' .'</p>';
  
}

We add two meta box contents. In the get_post_meta function, we need to add first the wp_nonce_field to prevent CSRF attack when form submitted. It’s very important, remember. The get_post_meta is used to retrieve meta data from the database.

Now, we need to save the data from the meta box when submitted.

function save_guest( $post_id ) {
	
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return;
	}

	if ( ! isset( $_POST['guest_nonce'] ) ) {
		return;
	}

	if ( ! wp_verify_nonce( $_POST['guest_nonce'], 'guest_meta_box' ) ) {
		return;
	}
   
   if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	if ( ! isset( $_POST['guest_name'] ) || ! isset( $_POST['guest_link'] ) ) {
		return;
	}

	$guest_name = sanitize_text_field( $_POST['guest_name'] );
	$guest_link = sanitize_text_field( $_POST['guest_link'] );

	update_post_meta( $post_id, '_guest_name', $guest_name );
	update_post_meta( $post_id, '_guest_link', $guest_link );

}

add_action( 'save_post', 'save_guest' );

The save_post hook’s callback is triggered when a post, page and custom post type is saved. We need to verify the nonce. If the nonce is invalid, then there’s problem in the callback. We also can define user permission to save meta data. Also we can check post auto saved or not. If the save is auto saved, then we return the callback. We need to retrieve the values of the form fields using PHP $_POST variable and save them in database using update_post_meta.

How to show meta box value in the post type template?

After registering and saving the meta box and its value. We need to show its value in the post types template like single.php or page.php or anywhere else.

Just add these codes in single.php as we are working on the post meta box.

$name_value = get_post_meta( $post->ID, '_guest_name', true );
				    $link_value = get_post_meta( $post->ID, '_guest_link', true );
				    echo ''.$name_value.'<br/>'; 
					echo $link_value;

Done. Now the Guest blogger name and web site address will be showing under the post content. You can CSS to make it looking good.