1. Home
  2. Docs
  3. WordPress Developer
  4. Create WordPress Custom post Meta Boxes

Create WordPress Custom post Meta Boxes

A post meta box is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way.

Generally, two types of data is entered into meta boxes:

  • Metadata (i.e. custom fields),
  • Taxonomy terms.

In this tutorial, you’ll be learning how to develop meta boxes that handle custom post metadata.

Post metadata is data that’s saved in the wp_postmeta table in the database. Each entry is saved as four fields in this table:

  • meta_id: A unique ID for this specific metadata.
  • post_id: The post ID this metadata is attached to.
  • meta_key: A key used to identify the data (you’ll work with this often).
  • meta_value: The value of the metadata.

When you get right down to it, metadata is just key/value pairs saved for a specific post. This allows you to add all sorts of custom data to your posts. It is especially useful when you’re developing custom post types.

You can use the following links to learn how the post meta functions work in WordPress if you’re not familiar with them.

Adding a Meta Box

WordPress provides a add_meta_box function with the specific purpose to add a new Custom Meta Box. add_meta_box has to be called from inside a callback function that should be executed when the current page’s meta boxes are loaded. This task can be performed hooking the callback to the add_meta_box_{custom-post-type} action hook.

The hook allows meta box registration for any post type.

Passes two parameters: $post_type and $post.

Add the following code in to file of a plugin or a theme’s function.php file

function adding_custom_meta_boxes( $post_type, $post ) {
    add_meta_box( 
        'my-meta-box',
        __( 'My Meta Box' ),
        'render_my_meta_box',
        'post',
        'normal',
        'default'
    );
}
add_action( 'add_meta_boxes', 'adding_custom_meta_boxes', 10, 2 );

Now for a post-type specific call.

function adding_custom_meta_boxes( $post ) {
    add_meta_box( 
        'my-meta-box',
        __( 'My Meta Box' ),
        'render_wpdc_coupon_meta_box',
        'post',
        'normal',
        'default'
    );
}
add_action( 'add_meta_boxes_post', 'adding_custom_meta_boxes' );

Both will accomplish the same thing. Best practice is to use add_meta_boxes_{post-type} to create less unnecessary hooks for other post types.

The callback function will print the HTML markup into the meta box, and we’ll define it as follows:

function render_wpdc_coupon_meta_box(){
  //code here
}

For security we need to call the function wp_nonce_field, which produces a nonce field, the goal being to ensure that the form request comes from the current website. So, let’s add the following line of code to the callback function:

wp_nonce_field( basename( __FILE__ ), ‘wpdc_meta_box_nonce’ );
Was this article helpful to you? Yes No

How can we help?