WordPress: Create Meta Box in Post Editing Page

WordPress is one of the most powerful blog platforms out there. One of its strength is the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data and can be added using the Custom Fields box under the content editor of writing post screen. The problem is that adding these meta data handy is not a good idea for most users because they have to know what are the meta key and type of its value. It’s better when developers create a custom meta box that can show which information is needed and give some explanations to users. In this tutorial, we’ll see how to creating a better meta box in WordPress post editing page.

Step 1. Define meta box with all needed fields

Open the function.php file and put the following code into it:

    $prefix = 'dbt_';
    $meta_box = array(
    'id' => 'my-meta-box',
    'title' => 'Custom meta box',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
    'name' => 'Text box',
    'desc' => 'Enter something here',
    'id' => $prefix . 'text',
    'type' => 'text',
    'std' => 'Default value 1'
    'name' => 'Textarea',
    'desc' => 'Enter big text here',
    'id' => $prefix . 'textarea',
    'type' => 'textarea',
    'std' => 'Default value 2'
    'name' => 'Select box',
    'id' => $prefix . 'select',
    'type' => 'select',
    'options' => array('Option 1', 'Option 2', 'Option 3')
    'name' => 'Radio',
    'id' => $prefix . 'radio',
    'type' => 'radio',
    'options' => array(
    array('name' => 'Name 1', 'value' => 'Value 1'),
    array('name' => 'Name 2', 'value' => 'Value 2')
    'name' => 'Checkbox',
    'id' => $prefix . 'checkbox',
    'type' => 'checkbox'


Step 2. Add meta box to Edit Page

    add_action('admin_menu', 'mytheme_add_box');
    // Add meta box
    function mytheme_add_box() {
    global $meta_box;
    add_meta_box($meta_box['id'], $meta_box['title'], 'mytheme_show_box', $meta_box['page'], $meta_box['context'], $meta_box['priority']);


Step 3. Show meta box

    // Callback function to show fields in meta box
    function mytheme_show_box() {
    global $meta_box, $post;
    // Use nonce for verification
    echo '<input type="hidden" name="mytheme_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
    echo '<table class="form-table">';
    foreach ($meta_box['fields'] as $field) {
    // get current post meta data
    $meta = get_post_meta($post->ID, $field['id'], true);
    echo '<tr>',
    '<th style="width:20%"><label for="', $field['id'], '">', $field['name'], '</label></th>',
    switch ($field['type']) {
    case 'text':
    echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" />', '<br />', $field['desc'];
    case 'textarea':
    echo '<textarea name="', $field['id'], '" id="', $field['id'], '" cols="60" rows="4" style="width:97%">', $meta ? $meta : $field['std'], '</textarea>', '<br />', $field['desc'];
    case 'select':
    echo '<select name="', $field['id'], '" id="', $field['id'], '">';
    foreach ($field['options'] as $option) {
    echo '<option ', $meta == $option ? ' selected="selected"' : '', '>', $option, '</option>';
    echo '</select>';
    case 'radio':
    foreach ($field['options'] as $option) {
    echo '<input type="radio" name="', $field['id'], '" value="', $option['value'], '"', $meta == $option['value'] ? ' checked="checked"' : '', ' />', $option['name'];
    case 'checkbox':
    echo '<input type="checkbox" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
    echo '</td><td>',
    echo '</table>';


Step 4. Save meta data when post is edited

    add_action('save_post', 'mytheme_save_data');
    // Save data from meta box
    function mytheme_save_data($post_id) {
    global $meta_box;
    // verify nonce
    if (!wp_verify_nonce($_POST['mytheme_meta_box_nonce'], basename(__FILE__))) {
    return $post_id;
    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post_id;
    // check permissions
    if ('page' == $_POST['post_type']) {
    if (!current_user_can('edit_page', $post_id)) {
    return $post_id;
    } elseif (!current_user_can('edit_post', $post_id)) {
    return $post_id;
    foreach ($meta_box['fields'] as $field) {
    $old = get_post_meta($post_id, $field['id'], true);
    $new = $_POST[$field['id']];
    if ($new && $new != $old) {
    update_post_meta($post_id, $field['id'], $new);
    } elseif ('' == $new && $old) {
    delete_post_meta($post_id, $field['id'], $old);


Enjoy meta box script for WordPress

Using custom meta box is a great way to make custom fields more friendly to users. It helps us much to add extra information to a post. I hope this tutorial is helpful for you to easier implement a custom meta box in WordPress. I have made a file with all necessary code that you can include in your functions.php file. All you need to change (to fit your requirements) is only the prefix and meta box declaration at the very top of code.

source: deluxeblogtips

Artikel terkait:   WordPress: Add Option, Text Field to General Settings Page

Isi Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

two × = eight

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top