How to add meta boxes for post in wordpress

By : Admin | Updated On : 11 Jan, 2021

To add a custom field(post_meta) in any posttype or any number of posttype using rawcode without using any pluggin.

To add any custom field to any post everybody knows that there is a pluggin named - Advanced Custom Fields, while using this pluggin easily you can add any type of field with many customize options, But the problem is still exist with this pluggin when you need a very customized field like you need a select box and the data coming in the box is from custom query which is not available in the advanced custom field filter.

That's why I am writing this blog to know, How can you create a custom field without using this pluggin. Step by step I will explain you how to do this job.

Suppose we need a user field with dropdown option in product post, but the list of users comes in the dropdown is with custom query like user is external or not, and the external flag is stored in the user_meta table. Below are the steps.

1. First of all call the add_action method with add_meta_boxes option in the functions.php of theme.

add_action( 'add_meta_boxes', 'add_external_user_metaboxes' );

2. Then create a function of add_external_user_metaboxes with the below details.

function add_external_user_metaboxes() {
	add_meta_box(
		'external_user_id',
		'External user',
		'external_user_callback',
		'product',
		'side',
		'default'
	);
}

//external_user_id : It is the id of the field
//External user : Label of the field
//external_user_callback : Callback function for the output
//product : This is a post type
//side : Location of the field
//default : Priority of the field where the box should show

3. Now create the external_user_callback callback function which is used in the above code.

function external_user_callback() {
	global $post;

	// Nonce field to validate form request came from current site
	wp_nonce_field( basename( __FILE__ ), 'external_user' );

	// Get the external user data if it's already been entered
	$externalUser = get_post_meta( $post->ID, 'external_user_id', true );

	//Now execute your custom query here to fetch the list of users.
    //For now I am using list of users in array.
    $users = array(
       0 => ['id'=> 1, 'name' => 'Suresh'],
       1 => ['id'=> 2, 'name' => 'Rahul']
    );
    
    echo '<select id="external_user_id" name="external_user_id">';    
    foreach($users as $value){
		echo '<option "'.$externalUser == $value['id'] ? 'selected' : ''.'" value="'.$value['id'].'">'.$value['name'].'</option>';
	}
	echo '</select>';

}

4. Now again call add_action function with save_post parameter to save and update the external_user_id, this will save in <prefix>_postmeta table.

add_action('save_post', 'save_update_external_user');

5. Now create save_update_external_user function to save and update post meta.

function save_update_external_user($post_id){

    $post_type = get_post_type($post_id);
    $externalUserId = get_post_meta($post_id, 'external_user_id', true);

    if ($post_type == 'product'){
        update_post_meta($post_id, 'external_user_id', $_POST['external_user_id']);
    }
}

The above code is done to create custom field without using any pluggin, But above code is for single post type. Overwrite below function with the above function for multiple post_type.

function add_external_user_metaboxes() {
	
	$postTypes = array('product', 'other_post_type');
	
	foreach($postTypes as $postType){
		add_meta_box(
			'external_user_id',
			'External user',
			'external_user_callback',
			$postType,
			'side',
			'default'
		);
	}
}

//also change the below condition in above save_update_external_user function
if ($post_type == 'product'){}

//changed to
$postTypes = array('product', 'other_post_type');
if (in_array($post_type, $postTypes)){}

Enjoy Coding