This is an introduction tutorial on how to create a custom meta box for your post editor of your WordPress website.

We will create a meta box similar to the one in the picture.

This meta box will be available in the new WordPress editor "Gutenberg" and in the old editor. This introduction tutorial is about a meta box which saves custom information about a real estate object.

Creation of the meta box

Create a PHP file with this class, which will create and configure our meta box.

abstract class Real_Estate_Description_Meta_Box {


}

Import this PHP file in your functions.php.

require 'real_estate_description_meta_box.php';

The class "Real_Estate_Description_Meta_Box" must contain the following static methods:

• add()
• save()
• html()

Add this three static methods, because we will implement them now.

add()

Here we setup the the meta box

	public static function add() {
			add_meta_box(
				'realestate_description_box',          // Unique ID for meta box
				'Real Estate Object Description', // Title of the meta box
				array( self::class, 'html' ),   // Callback, to define the functionality of the meta box
				array( 'post' )                  // Post types, where this meta box is displayed
			);
	}

add_meta_box() adds a meta box. In this example we will add a meta box with the id "realestate_description_box" and the title "Real Estate Object Description".
It will use our function "html" (which will be implemented later) to display the content of the meta box. Our meta box is displayed only on WordPress content ("post type") that has the type "post", which are the default WordPress posts.

You can define in which custom type of WordPress content your meta box should be displayed. This is very useful, if you created custom post types. Then you have to add the "slug id" of your custom post type in the last argument. Example:

			add_meta_box(
				'realestate_description_box',          
				'Real Estate Object Description', 
				array( self::class, 'html' ),   
				array( 'my-custom-type1', 'my-custom-type2' )                  
			);

save()

Here we will define the custom values that can be saved in our meta box.

	public static function save( int $post_id ) {
		if ( array_key_exists( 'realestate_sq_size', $_POST ) ) {
			update_post_meta(
				$post_id,
				'_realestate_meta_sq_size',
				$_POST['realestate_sq_size']
			);
		}
	}

We will save one value in our meta box, which is the size in square meters. "realestate_sq_size" is the id of your HTML field, which will deliver us the value of the "square meters size" text field that was saved by the user.
The value of this HTML field will be saved in the WordPress database with the post id ($post_id) and the id "_realestate_meta_sq_size", which allows us to access the saved value of a certain post.
We will save the value only of course if it exists. This will be checked with the function "array_key_exists()".

html()

Here we will define the content ("HTML") of our meta box. This meta box has only one option, which is the text field to save the size in square meters.

	public static function html( $post ) {
		$sq_size_value = get_post_meta( $post->ID, '_realestate_meta_sq_size', true );
		?>
	<label for="realestate_sq_size">Size in square meters (m2)</label>
	<input name="realestate_sq_size" id="realestate_sq_size" value="<?php $sq_size_value; ?>" class="postbox">
		<?php
	}

The function "get_post_meta()" allows us to retrieve the value of our saved meta box option "_realestate_meta_sq_size" (added in the second argument of this function). The post id is added through the variable "$post->ID" in the first argument of this function.
The last argument of this function contains a boolean that defines whether you want to have a single value or an array. True (in this case) means we will get a single value, which is here the saved size in square meters.

You can also extend this meta box (function "save()" and "html") with several values and with fields other than a text field. If you use a combo box, then you can define the selected value with the WordPress function selected().

Access the data of the meta box

get_post_meta( int $post_id, string $key = '', bool $single = false )

You can access the values of your meta box through this function get_post_meta(). Call this function in your single.php or any other WordPress php file, where you want to show that value.
If call this function in a page of a post, then pass the following arguments:

<h4> <?php get_post_meta( $post->ID, '_realestate_meta_sq_size', true ); ?></h4>

 

If you want to use this function outside of a post page, then you have to add the post id manually.
Example:

<h4> <?php get_post_meta( 1509, '_realestate_meta_sq_size', true ); ?></h4>

 

More about WordPress function "selected()":
https://developer.wordpress.org/reference/functions/selected/

More about meta box:
http://www.wproots.com/complex-meta-boxes-in-wordpress/

add_meta_box() documentation:
https://developer.wordpress.org/reference/functions/add_meta_box/

get_post_meta() documentation:
https://developer.wordpress.org/reference/functions/get_post_meta/