Custom meta boxes in Wordpress

Introduction

Custom meta boxes let you add extra fields to WordPress posts or pages. This helps you store and show more information easily.

You want to add a special input field for extra details on posts.

You need to collect custom data like ratings or dates from users.

You want to organize extra information in a neat box on the edit screen.

You want to save and display custom settings for each post or page.

Syntax

Wordpress

<?php
function add_custom_meta_box() {
    add_meta_box(
        'custom_meta_box_id',       // Unique ID
        'Custom Meta Box Title',    // Box title
        'custom_meta_box_callback', // Callback function
        'post',                     // Screen to show on (post, page, custom post type)
        'normal',                   // Context (normal, side, advanced)
        'high'                      // Priority
    );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

function custom_meta_box_callback($post) {
    // Add nonce for security
    wp_nonce_field('custom_meta_box_nonce_action', 'custom_meta_box_nonce');

    // Get existing value if any
    $value = get_post_meta($post->ID, '_custom_meta_key', true);

    // Display input field
    echo '<label for="custom_field">Custom Field:</label>';
    echo '<input type="text" id="custom_field" name="custom_field" value="' . esc_attr($value) . '" size="25" />';
}

function save_custom_meta_box_data($post_id) {
    // Check nonce
    if (!isset($_POST['custom_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_meta_box_nonce'], 'custom_meta_box_nonce_action')) {
        return;
    }

    // Check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // Check user permissions
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // Save or delete meta
    if (isset($_POST['custom_field'])) {
        update_post_meta($post_id, '_custom_meta_key', sanitize_text_field($_POST['custom_field']));
    } else {
        delete_post_meta($post_id, '_custom_meta_key');
    }
}
add_action('save_post', 'save_custom_meta_box_data');

The add_meta_box function adds the box to the edit screen.

The callback function outputs the HTML for the box content.

Examples

This example shows how to add the meta box to pages instead of posts.

Wordpress

<?php
// Add meta box to pages instead of posts
function add_custom_meta_box_page() {
    add_meta_box('custom_meta_box_id', 'Page Meta Box', 'custom_meta_box_callback', 'page');
}
add_action('add_meta_boxes', 'add_custom_meta_box_page');

This example changes the input field to a textarea for longer text.

Wordpress

<?php
// Use a textarea instead of input
function custom_meta_box_callback($post) {
    wp_nonce_field('custom_meta_box_nonce_action', 'custom_meta_box_nonce');
    $value = get_post_meta($post->ID, '_custom_meta_key', true);
    echo '<label for="custom_field">Description:</label>';
    echo '<textarea id="custom_field" name="custom_field" rows="4" cols="30">' . esc_textarea($value) . '</textarea>';
}

Sample Program

This code adds a meta box titled "Favorite Color" on the side of the post edit screen. It shows a text input where you can type a color. When you save the post, it stores the color as post meta data.

Wordpress

<?php
// Add a custom meta box to posts
function add_custom_meta_box() {
    add_meta_box(
        'custom_meta_box_id',
        'Favorite Color',
        'custom_meta_box_callback',
        'post',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

function custom_meta_box_callback($post) {
    wp_nonce_field('custom_meta_box_nonce_action', 'custom_meta_box_nonce');
    $value = get_post_meta($post->ID, '_favorite_color', true);
    echo '<label for="favorite_color">Favorite Color:</label><br />';
    echo '<input type="text" id="favorite_color" name="favorite_color" value="' . esc_attr($value) . '" size="20" />';
}

function save_custom_meta_box_data($post_id) {
    if (!isset($_POST['custom_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_meta_box_nonce'], 'custom_meta_box_nonce_action')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    if (isset($_POST['favorite_color'])) {
        update_post_meta($post_id, '_favorite_color', sanitize_text_field($_POST['favorite_color']));
    } else {
        delete_post_meta($post_id, '_favorite_color');
    }
}
add_action('save_post', 'save_custom_meta_box_data');

Important Notes

Always use wp_nonce_field and check nonce to secure your meta box.

Use sanitize_text_field or similar functions to clean user input before saving.

Remember to check user permissions to avoid unauthorized changes.

Summary

Custom meta boxes add extra fields to WordPress edit screens.

Use add_meta_box to create the box and a callback to show fields.

Save data securely using save_post action with nonce and permission checks.

Practice

1. What is the main purpose of adding a custom meta box in WordPress?

easy

A. To change the theme colors automatically

B. To create new user roles

C. To add extra input fields on the post edit screen

D. To optimize the website speed

Solution

1. Step 1: Understand what meta boxes do

   Meta boxes provide extra areas on the post edit screen for input.

2. Step 2: Identify the purpose of custom meta boxes

   They allow adding custom fields to collect extra data for posts or pages.

3. Final Answer:

   To add extra input fields on the post edit screen -> Option C

4. Quick Check:

   Custom meta boxes = extra input fields [OK]

Hint: Meta boxes add fields on edit screens [OK]

Common Mistakes:

• Confusing meta boxes with theme or user settings
• Thinking meta boxes change site speed
• Assuming meta boxes create user roles

2. Which function is used to add a custom meta box in WordPress?

easy

A. add_meta_box()

B. register_meta_box()

C. add_custom_box()

D. create_meta_box()

Solution

1. Step 1: Recall WordPress function for meta boxes

   The official function to add meta boxes is add_meta_box().

2. Step 2: Verify other options

   Other options are not valid WordPress functions for meta boxes.

3. Final Answer:

   add_meta_box() -> Option A

4. Quick Check:

   Use add_meta_box() to add meta boxes [OK]

Hint: Remember exact function name: add_meta_box() [OK]

Common Mistakes:

• Using incorrect function names like add_custom_box()
• Confusing with register_meta_box() which doesn't exist
• Trying to create meta boxes without this function

3. Given this code snippet, what will be the output on the post edit screen?

add_action('add_meta_boxes', function() {
  add_meta_box('my_box', 'My Box', function() {
    echo '<input type="text" name="my_field" value="Hello" />';
  }, 'post');
});

medium

A. A checkbox labeled 'My Box' with 'Hello' inside

B. A text input box labeled 'My Box' with 'Hello' inside

C. No meta box will appear because 'post' is invalid

D. An error because the callback function is missing parameters

Solution

1. Step 1: Analyze add_meta_box parameters

   The ID is 'my_box', title is 'My Box', callback outputs a text input with value 'Hello', and screen is 'post'.

2. Step 2: Understand the callback output

   The callback prints an input box of type text with name 'my_field' and value 'Hello'.

3. Final Answer:

   A text input box labeled 'My Box' with 'Hello' inside -> Option B

4. Quick Check:

   Callback outputs text input with value 'Hello' [OK]

Hint: Callback echoes input field HTML inside meta box [OK]

Common Mistakes:

• Thinking callback needs parameters to work
• Assuming 'post' is invalid screen
• Confusing input types (text vs checkbox)

4. What is wrong with this code snippet for saving meta box data?

add_action('save_post', function($post_id) {
  update_post_meta($post_id, 'my_field', $_POST['my_field']);
});

medium

A. It should echo the data instead of updating

B. It uses the wrong hook; should be 'add_meta_box'

C. It updates meta with wrong function; should use add_post_meta

D. It lacks a nonce check for security

Solution

1. Step 1: Check security best practices

   Saving meta box data requires verifying a nonce to prevent unauthorized saves.

2. Step 2: Identify missing nonce check

   The code updates post meta directly without checking nonce or user permissions.

3. Final Answer:

   It lacks a nonce check for security -> Option D

4. Quick Check:

   Always verify nonce before saving meta data [OK]

Hint: Always check nonce before saving meta data [OK]

Common Mistakes:

• Skipping nonce verification
• Using wrong hook for saving data
• Confusing update_post_meta with add_post_meta

5. You want to add a custom meta box that only appears on pages (not posts) and saves a checkbox value safely. Which steps are correct to implement this?

hard

A. Use add_meta_box with 'page' screen, output checkbox in callback, save with save_post hook including nonce and permission checks

B. Use add_meta_box with 'post' screen, output checkbox, save without nonce check

C. Use add_meta_box with 'page' screen, output text input, save with save_post hook but no permission check

D. Use add_meta_box with 'post' screen, output checkbox, save with add_post_meta function

Solution

1. Step 1: Choose correct screen and output

   To show on pages only, use 'page' as screen in add_meta_box and output a checkbox input in the callback.

2. Step 2: Save data securely

   Use the 'save_post' hook to save data, but include nonce verification and user permission checks to ensure security.

3. Final Answer:

   Use add_meta_box with 'page' screen, output checkbox in callback, save with save_post hook including nonce and permission checks -> Option A

4. Quick Check:

   Screen='page', checkbox output, secure save with nonce [OK]

Hint: Match screen type and add nonce checks when saving [OK]

Common Mistakes:

• Using wrong screen type ('post' instead of 'page')
• Skipping nonce or permission checks
• Saving checkbox as text input