How to Add custom meta box wordpress

Add Tool

Add custom meta box wordpress


If you look at the Professional WordPress theme of ThemeForest, You will see many custom meta box wordpress post editor panel. In this WordPress theme development tutorial we will learn "How to add custom meta box wordpress post editor". To add custom field in post editor simply add the below WordPress snippets in your theme's functions.php file.

Add custom meta box in post editor

 <?php
////////custom fild

$prefix = 'devtoolsplus_';

$meta_box = array(
    'id' => 'devtoolsplus',
    'title' => 'Devtoolsplus Post Options',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(

        array(
            'name' => 'Demo Fild Name 1',
            'desc' => 'This is Demo fild 1 discription',
            'id' => $prefix . 'fild_1',
            'type' => 'text',
            'std' => ''
        ),

        array(
            'name' => 'Demo Fild Name 2',
            'desc' => 'This is Demo fild 2 discription',
            'id' => $prefix . 'fild_2',
            'type' => 'text',
            'std' => ''
        ),

    ),

);

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']);
}

// 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>';

    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>',
                '<td>';
        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'];
                break;
            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'];

                break;
            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>',
                '<br />', $field['desc'];
                break;
            case 'radio':
                foreach ($field['options'] as $option) {
                    echo '<input type="radio" name="', $field['id'], '" value="', $option['value'], '"', $meta == $option['value'] ? ' checked="checked"' : '', ' />', $option['name'];
                }
                break;
            case 'checkbox':
                echo '<input type="checkbox" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
                break;
        }
        echo     '<td>',
            '</tr>';
    }

    echo '</table>';
}

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);
        }
    }
}
?>

This WordPress snippets will add custom meta box in post editor like below image.

add custom meta box in post editor

This is demo Custom post editor options field. You can add many fields using copy and past method. Find the below codes from the above codes and past under the cods.

array(
            'name' => 'Demo Fild Name 1',
            'desc' => 'This is Demo fild 1 discription',
            'id' => $prefix . 'fild_1',
            'type' => 'text',
            'std' => ''
        ),

Here 'name' is Your custom field name. Here I have Used Demo Fild Name 1 You should change it with your own 'id' is unique field id of custom field name. Here I have used fild_1 that will be used to display in template 'type' is fild type

How to display custom meta box data in template

To display custom meta box data you should add some php codes in loop or anywhere in you template. Please add the below snippets to display custom field data where you want to display.

<?php if (get_post_meta($post->ID, devtoolsplus_fild_1, true)){?>
<?php echo do_shortcode (get_post_meta($post->ID, devtoolsplus_fild_1, true)); ?>
<?php } ?>

Here I have print the custom field data using

echo do_shortcode (get_post_meta($post->ID, devtoolsplus_fild_1, true));

do_shortcode Will help to add shortcode data. devtoolsplus_ is $prefix which we add at first of the WordPress snippets. fild_1 is our unique field ID. This way you can display all filed data simply copy and past method.


Tags: custom meta box, WordPress custom fields, Meta box, custom fields tutorial, post editor options, box type, custom boxes, metadata wordpress plugin
Payza

About Masum Billah

Add custom meta box wordpress 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How to Add custom meta box wordpress


adf.ly