Home / WordPress / Add custom meta box in WordPress

Add custom meta box in WordPress

You want to custom meta box add in your theme or plugin? if you want let’s go how to development this meta box, wordpress all functions include your “functions.php” file in your theme and also working with your plugin, open “functions.php” file in your theme and include “add_action()” method

add_action('add_meta_boxes', 'my_meta_box');

here, two parameter pass first one hook name and second one method name, now need to create your custom method

function my_meta_box(){


after method create need to meta box initialization look like

function my_meta_box(){

	add_meta_box( 'custom-meta-box', 
		          'Custom Post Metabox',

If you’re not familiar this method see wordpress Codex for details description !

i’ve third parameter for “display_meta_box” method

 function display_meta_box($post){
  // code here

after create this function need to form create for your input field

function display_meta_box($post){
  wp_nonce_field('meta_action', 'meta_box_name_field'); 
	$html = '';
	$html .= '<label for="mp3_title">';
	$html .= 'Add Mp3';
	$html .= '</label>';
	$html .= '<input type="text" name="mp3_title" id="mp3_title" class="widefat" value="' .get_post_meta($post->ID, 'mp3_title', true).'" placeholder="Enter your mp3 title">';
	$html .= '<label for="mp3_file">';
	$html .= 'Mp3 File';
	$html .= '</label>';
	$html .= '<input type="file" name="mp3_file" id="mp3_file">';

	echo $html;

I’ve two input field create, when you’ll submit this form you’ll need to save this post, so create save post action, i’m using “save_post”….

add_action('save_post', 'save_meta_box');

now new method name “save_meta_box” for saving post from user, so let’s go create new method

function save_meta_box($post_id){
// Code here

after create this method now need to check autopost in wordpress, i’ve create new method name “can_save_post”

function save_meta_box($post_id){
// this method check to autosave
if(can_save_post($post_id, 'meta_box_name_field')){


Now check this function…

function can_save_post($post_id, $nonce){
	$autosave = wp_is_post_autosave($post_id);
	$revision = wp_is_post_revision($post_id);
    $valid = (isset($_POST[$nonce]) && wp_verify_nonce($_POST[$nonce], 'meta_action'));

    return !($autosave || $revision) && $valid;


Finally check “save_meta_box” method from user. see below

function save_meta_box($post_id){
	if(can_save_post($post_id, 'meta_box_name_field')){

        if(isset($_POST['mp3_title']) && 0 < count(strlen(trim($_POST['mp3_title'])))){
				$mp3_title = $_POST['mp3_title'];
				update_post_meta( $post_id, 'mp3_title', $mp3_title);
		if(isset($_POST['mp3_file']) && !empty($_POST['mp3_file'])){

			// wp_upload_bits( $name, $deprecated, $bits, $time );

			wp_upload_bits( $_FILES['mp3_file']['name'], null, file_get_contents( $_FILES['mp3_file']['tmp_name']) );

now need to display this content, so create new hook “the_content”

add_action('the_content', 'display_meta_box_content');

Finally display this content in front page

function display_meta_box_content($content){

 	$html = 'This is metx box title' . get_post_meta(get_the_ID(), 'mp3_title', true);
 	$html .= 'This is Path url is =' . get_post_meta(get_the_ID(), 'mp3', true);

 	$content .= $html;
return $content;

Enjoy it 🙂

About Rasel Khan

Check Also

WordPress Custom Post

WordPress has been gaining a foothold in the general content management system (CMS) game for …

One comment

  1. Saved as a favorite, I really like your blog!

Leave a Reply

Your email address will not be published. Required fields are marked *