Custom code for creating a custom meta box in WordPress

Creating a Custom Meta Box in WordPress

Custom Code Solution

This solution adds a custom meta box to your posts with a text input field. Place this code in your theme's functions.php file or in a site-specific plugin:

Add the meta box to the post editor:

function add_custom_meta_box() {
    add_meta_box(
        'custom_meta_box', // Unique ID
        'Additional Information', // Box title
        'custom_meta_box_html', // Content callback
        'post' // Post type
    );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

Create the meta box HTML content:

function custom_meta_box_html($post) {
    $value = get_post_meta($post->ID, '_custom_meta_key', true);
    wp_nonce_field('custom_meta_box_nonce', 'meta_box_nonce');
    ?>
    <label for="custom_meta_field">Your Extra Information:</label>
    <input type="text" id="custom_meta_field" name="custom_meta_field" value="<?php echo esc_attr($value); ?>" style="width: 100%">
    <?php
}

Save the meta box data:

function save_custom_meta_box($post_id) {
    if (!isset($_POST['meta_box_nonce'])) {
        return;
    }
    if (!wp_verify_nonce($_POST['meta_box_nonce'], 'custom_meta_box_nonce')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    if (isset($_POST['custom_meta_field'])) {
        update_post_meta(
            $post_id,
            '_custom_meta_key',
            sanitize_text_field($_POST['custom_meta_field'])
        );
    }
}
add_action('save_post', 'save_custom_meta_box');

Display the meta box content in your theme:

function display_custom_meta_field() {
    $value = get_post_meta(get_the_ID(), '_custom_meta_key', true);
    if ($value) {
        echo '<div class="custom-meta">' . esc_html($value) . '</div>';
    }
}

Customization Options

• Change 'post' to any post type (like 'page' or custom post types)
• Modify the input field type (text, textarea, select, etc.)
• Add multiple fields by extending the HTML function
• Adjust the meta box position using priority parameter in add_meta_box()

Plugin Alternatives

If you prefer using a plugin, these options work well:

1. Advanced Custom Fields - Popular choice with a user-friendly interface
2. Custom Field Suite - Lightweight alternative
3. Meta Box - Feature-rich solution for developers

Usage Notes

• The meta box will appear in the post editor sidebar
• Data is stored in the post meta table
• Use get_post_meta() to retrieve values in your theme files
• Adjust field names and meta keys according to your needs
• Always sanitize data before saving and escape when displaying