Many of you might not be familiar with wordpress custom meta box through which one can save anything he wants within a wordpress post. Meta boxes using the wordpress are a great way to save additional information along with your post and that additional information can be called anytime to the frontend or else to the backend.

Suppose, you have created a website about the books and you at daily basis publish a post on the books and their prices. Now you can create an additional input field for the prices, and that input field can be made to appear along with the text editor of your post so that you may be able to put the price of the book in that input box. For a basic idea watch this screenshot below:

Meta boxes can be used to save anything, whether that is a checkbox data or else a textarea, you can typically save anything with your post. Meta boxes just give users a more user friendly interface.

Where are: the values of the meta boxes saved:

Meta box values are saved with the help of a unique post id, there is an extra table for the meta boxes in your sql database of the wordpress installation. In that meta box table the value of the every meta box is associated and saved with the specific post using the unique id of the post. So, user compiles the post, puts the value in the metabox and every thing is saved into the sql database at it’s respective place. The post body text goes to the wordpress post table and the meta box value along with the unique post id goes to the meta box table in the sql database.

Registering a Price Meta Box in WordPress:

As I told you that in this demo we shall register a price meta box at which the editor of the post will be able to put the price of the book. Thus, later in our theme we shall be able to output that price easily. Below is the code which you need to put in the functions.php of your template using a good code editor and ftp. It will register a meta box with the name price having a text input field to save the price.

add_action( 'add_meta_boxes', 'price_meta_box_add' );  
function price_meta_box_add() {  
    add_meta_box( 'price-meta-box-id', 'Put Price Here!', 'price_meta_box_cb', 'post', 'side', 'high' );  
}  
function price_meta_box_cb() {
	wp_nonce_field( basename( __FILE__ ), 'price_meta_box_nonce' );
	$value = get_post_meta(get_the_ID(), 'price_key', true);
	$html = '<label>Price: </label><input type="text" name="price" value="'.$value.'"/>';
	echo $html;
}
add_action( 'save_post', 'price_meta_box_save' );  
function price_meta_box_save( $post_id ){   
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; 
    if ( !isset( $_POST['price_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['price_meta_box_nonce'], basename( __FILE__ ) ) ) return;
   	if( !current_user_can( 'edit_post' ) ) return;  
    if( isset( $_POST['price'] ) )  
        update_post_meta( $post_id, 'price_key', esc_attr( $_POST['price'], $allowed ) );
}

So, upon adding the above code to your functions.php you will be able to register a meta box, write any value to the meta box while creating the post through wordpress post menu and press publish, the value will be saved in the meta box.

How to: output value of the meta box in your wordpress theme:

Use the below code to output your meta value inside a loop or inside the single.php anywhere! If you don’t know about loops and the wordpress theme structures then you must read below post:

Basic components of a wordpress theme – Including single.php

WordPress post Loop explained in detail

The code below to echo the value of the metabox of the specific post must be placed in the loop:

<?php get_post_meta(get_the_ID(), 'price_key', true); ?>

Explanation of the Above Code For registering the Meta Box:

1- The add_action just registers the meta box function named “price_meta_box_add” on the line first of the code.

2- Function price_meta_box_add() defines the properties of the meta box, the first property is the unique id of the meta box named as “price-meta-box-id“, second property is the name of the meta box to show while creating the post. The third property just defines the callback function name where the html output of the meta box is saved, in this case it is “price_meta_box_cb“. Later, the “post“, “side” and “high” determine the post type, position and priority.

3- Function price_meta_box_cb() is the callback function as I told you in the step 2 explanation. For security reasons I have used the wp_nonce, so that users may not be able to put anything miscellaneous in the meta box input. In this function there is the html part to define the input area with label price.

4- Again I have added an action, to save the meta box value, and for saving the value I have created another function named as “function price_meta_box_save( $post_id )” where $post_id is the perimeter of the function to take the id of the post where the meta box is being saved. Rest, three “if conditional” codes are written to verify the user that whether he is able to edit the meta box value or not, also wp_nonce is being verified for security concerns. Last line is just to update the meta value after all the security checks are done. I have also used esc_attr with the value of the input so that user may not be able to put any sort of code without being filtered.

Thus, this was the meta box, now while dealing with the additional information in the post you can easily register some meta boxes to give an area to those values in your post compose area.