How to Add Metabox in WordPress Plugin

If you are working on a WordPress plugin then there can be a chance where you need to add a custom metabox to the post, page, or custom post types.

So, here I will create a WordPress plugin that will add an option in WordPress posts to set reading time for each post and display that in frontend. As a part of this, I will add a custom metabox in this plugin.

Add Custom Metabox in WordPress Plugin

  1. First, navigate to your site’s wp-content >> plugins >> and create a new folder here called diwp-post-read-time.
  2. Next, create a new php file inside this wp-content >> plugins >> diwp-post-read-time folder and name it diwp-post-read-time.php
  3. Copy the code below and paste it into the diwp-post-read-time.php file.

<?php
/*
Plugin Name: DIWP Post Read Time
Plugin URI: https://diveinwp.com/
Author: Bhuvnesh Shrivastava
Author URI: https://diveinwp.com
Version: 1.0
Description: DIWP Post Read Time plugin allows you to add an option in the post edit screen to set post read time and display in the frontend with metainfo.
Tags: post read time, post reading time
License: GPL V2 Or Later
*/

// To Protect plugin file from accessing directly
defined('ABSPATH') || die('You are not allowed to access this page');

//defining Metabox
function diwp_post_read_time(){
	
	add_meta_box(
					'diwp-post-read-timer',
					'Post Read Time',
					'diwp_post_read_time_callback',
					'post',
					'side',
					'high'
				);
}

add_action( 'add_meta_boxes', 'diwp_post_read_time' );

// Creates Metabox Callback Function
function diwp_post_read_time_callback(){
	
	global $post;
	// Get Post Read Time Value if it set already.
	$postReadTime = get_post_meta($post->ID, 'post_read_time', true);

	?>
	<p>Enter Read Time For This Post</p>
	<input type="text" name="_diwp_read_time" value="<?php echo $postReadTime; ?>">
    <?php
}

// Save Post Read Time Value
function diwp_save_post_read_time(){

	global $post;	
	
	if(isset($_POST['_diwp_read_time'])):
		update_post_meta($post->ID, 'post_read_time', $_POST['_diwp_read_time']);	
	endif;	

}

add_action( 'save_post', 'diwp_save_post_read_time');


function diwp_update_title_with_read_time($postContent){

	global $post;
	
	// Get Post Read Time Value.
	$postReadTime = get_post_meta($post->ID, 'post_read_time', true);
	
	if($postReadTime !=""):
		echo '<p><strong>Reading Time: '.$postReadTime.'</strong></p>';
	endif;
	
	echo $postContent;
}

add_filter('the_content', 'diwp_update_title_with_read_time');

After adding the above code successfully to the diwp-post-read-time.php file save it.

Now navigate to the Plugins menu in your WordPress admin and you will see DIWP Post Read Time plugin there.

add-custom-metabox-in-wordpress-plugin

Now activate this plugin and if you have done everything right and successful, then you will see an option on top of the sidebar in post edit or add new post page to set post reading time as shown in the image below.

add-post-read-time-metabox-in-wordpress-plugin

From here you can set the reading time for each post and you will see this in the frontend of your post like shown in the image below.

display-post-read-time-in-metabox-wordpress-plugin

That’s it, You have successfully created a WordPress plugin with a custom metabox option.

If you see the above code, I just put the code for creating or adding a custom metabox in a separate plugin specific file instead of putting that code into my theme’s functions.php file.

So in this way, I have created a plugin environment, and the above code is acting as a separate plugin and working perfectly fine for me.

I hope with this post, you must get an idea about adding a custom metabox with the plugin, however, you can customize this code as per your needs and requirements.

Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.