How to Add Custom Meta Boxes in WordPress Posts and Post Types

Adding custom meta boxes in WordPress allows you to add additional fields and data to your posts and post types beyond the default ones like title, content, and categories. Here’s a step-by-step guide on how to add custom meta boxes:

Create a Plugin or Use Your Theme’s Functions.php:
You can add custom meta boxes either by creating a custom plugin or by adding code to your theme’s `functions.php` file. It’s generally better to use a plugin for better organization and portability.

Create a Callback Function:
You need to create a callback function that will render the contents of your custom meta box. This function will output the HTML elements for your custom fields.

Hook into WordPress:
You need to hook into WordPress using the `add_meta_boxes` action hook to register your custom meta box. This tells WordPress where and when to display your custom meta box.

Save Custom Meta Box Data:
You also need to create a function to save the data entered into your custom meta box fields. This function will hook into the `save_post` action to save the data when the post is saved or updated.

Here’s a basic example of how you can add a custom meta box to your posts:

// Step 2: Create a Callback Function
function wpr_meta_box_callback($post) {
    // Retrieve existing value from post meta
    $value = get_post_meta($post->ID, '_custom_meta_key', true);
    echo '<label for="wpr_field">WPR Field:</label>';
    echo '<input type="text" id="wpr_field" name="wpr_field" value="' . esc_attr($value) . '">';
}
// Step 3: Hook into WordPress
function add_wpr_meta_box() {
    add_meta_box(
        'wpr_meta_box', // Unique ID
        'WPR Meta Box', // Box title
        'wpr_meta_box_callback', // Callback function
        'post', // Post type
        'normal', // Context
        'default' // Priority
    );
}
add_action('add_meta_boxes', 'add_wpr_meta_box');
// Step 4: Save WPR Meta Box Data
function save_wpr_meta_box($post_id) {
    // Check if nonce is set
    if (!isset($_POST['wpr_meta_box_nonce'])) {
        return;
    }
    // Verify nonce
    if (!wp_verify_nonce($_POST['wpr_meta_box_nonce'], 'wpr_meta_box_nonce')) {
        return;
    }
    // Check if this is an autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    // Check permissions
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    // Save the data
    if (isset($_POST['wpr_field'])) {
        update_post_meta($post_id, '_custom_meta_key', sanitize_text_field($_POST['wpr_field']));
    }
}
add_action('save_post', 'save_wpr_meta_box');

Remember to replace `_custom_meta_key` with your actual meta key.

This example creates a simple text input field for a custom meta box named “Custom Meta Box” on the post edit screen. You can expand upon this by adding different types of fields like checkboxes, radio buttons, or even custom JavaScript for more interactive elements.