Create Custom Meta Box WordPress

Create Custom Meta Box WordPress – In this post we’ll see how we can create custom meta box. Meta box is useful entity in WordPress to provide space for extra functionalities apart from default available.

Sometimes we need to add extra data to our posts or pages. Using custom meta box, space can be easily provided like for text input, external link for any site or page, any advertisement image, etc.

Meta box can be added to post, page, or any custom post type as per defined in the add_meta_box function. Let’s start with code, we’ll perform this by creating one test plugin –

<?php

/**
 *  Plugin Name: Custom Meta box Example Post Page
 *  Description: How to create custom meta box in post edit page
 *  Author: Webkul
 *  Author URI: https://webkul.com
 *  Text Domain: wk-custom-meta-box
 */

add_action( 'add_meta_boxes', 'wk_create_custom_meta_box', 10, 2 );

function wk_create_custom_meta_box( $post_type, $post ) {
  add_meta_box( 'custom-textbox', __( 'Custom Textbox', 'wk-custom-meta-box' ), 'wk_custom_meta_box_content', 'post', 'side', 'high' );
}

function wk_custom_meta_box_content() {
  echo '<--content goes here-->';
}

In above code, first we created a plugin named ‘Custom Meta box Example Post Page’ and added some code into it. We’ll understand the code further. Let’s have a look of plugin’s page –

When we activate this plugin, a meta box will be added in post edit page. We are taking post edit page here to add custom meta box.

In code we have added action to ‘add_meta_boxes’ (via – https://codex.wordpress.org/Plugin_API/Action_Reference/add_meta_boxes) hook and in callback function to this action, we created meta box using ‘add_meta_box’ (via – https://developer.wordpress.org/reference/functions/add_meta_box/) function.

In add_meta_box function, first parameter is the id of meta box, second is the title of box, third is the callback in which box content will be defined, fourth one is screen means on which page we want to add the meta box, fifth one is context within the screen means meta box will be in side or normal on page, sixth one is the priority means where this meta box will display in respect to other in the page.

Here, we set screen to post,  context to side and priority to high. And in callback we just write some dummy content. So, let’s see how the meta box will look in post edit page.

This is all for adding custom meta box in post edit page. Now, lets add text box in this and save content on post save.

/**
 *  Custom Meta Box content
 */
function wk_custom_meta_box_content( $post ) {
  ?>
  <textarea class="widefat" name="wk-custom-content"><?php echo get_post_meta( $post->ID, 'metabox-content', true ); ?></textarea>
  <?php
}

/**
 *  Save textbox content
 */
function wk_save_custom_meta_box_content( $post_id ) {
  $textbox_content = $_POST['wk-custom-content'];

  update_post_meta( $post_id, 'metabox-content', $textbox_content );
}

add_action( 'save_post', 'wk_save_custom_meta_box_content' );

In above code,  we have added text area to meta box and saved the content when post is saved using the hook ‘save_post’ provided by WordPress which fires when we update the post.

We saved this data as meta data to the post. And displayed the saved content in text area by getting based on post id and key from database.