Custom meta boxes in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom meta box in WordPress.

Wordpress

add_action('add_meta_boxes', '[1]');

function my_custom_meta_box() {
    add_meta_box(
        'my_meta_box_id',
        'My Meta Box',
        'my_meta_box_callback',
        'post'
    );
}

Drag options to blanks, or click blank then click option'

Aregister_meta_box

Bmy_custom_meta_box

Cadd_my_meta_box

Dcreate_meta_box

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist.

Confusing the hook name with the callback function.

The 'add_meta_boxes' action hook requires a callback function name that adds the meta box. Here, 'my_custom_meta_box' is the correct function.

2fill in blank

medium

Complete the code to save the custom meta box data when the post is saved.

Wordpress

add_action('save_post', '[1]');

function save_my_meta_box_data($post_id) {
    if (!isset($_POST['my_meta_box_nonce'])) {
        return;
    }
    // Additional saving logic here
}

Drag options to blanks, or click blank then click option'

Aupdate_meta_box_data

Bsave_custom_meta

Csave_my_meta_box_data

Dstore_meta_box

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist.

Not hooking the save function properly.

The 'save_post' hook requires a callback function that handles saving. The function 'save_my_meta_box_data' matches the saving logic.

3fill in blank

hard

Fix the error in the code to correctly display the meta box field value.

Wordpress

function my_meta_box_callback($post) {
    $value = get_post_meta($post->ID, '[1]', true);
    echo '<label for="my_field">Description:</label>';
    echo '<input type="text" id="my_field" name="my_field" value="' . esc_attr($value) . '" />';
}

Drag options to blanks, or click blank then click option'

Amy_field

Bmy_field_value

Cfield_value

Dcustom_field

Attempts:

3 left

💡 Hint

Common Mistakes

Using a meta key that does not match the saved data.

Mismatching input name and meta key.

The meta key used in get_post_meta must match the name used to save the field. 'my_field' is the correct meta key here.

4fill in blank

hard

Fill both blanks to correctly verify the nonce and check user permissions before saving meta box data.

Wordpress

function save_my_meta_box_data($post_id) {
    if (!isset($_POST['[1]']) || !wp_verify_nonce($_POST['[1]'], '[2]')) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    // Save meta box data here
}

Drag options to blanks, or click blank then click option'

Amy_meta_box_nonce

Bsave_nonce

Cmy_meta_box_action

Dnonce_check

Attempts:

3 left

💡 Hint

Common Mistakes

Using different strings for nonce name and action.

Not verifying nonce before saving.

The nonce field name and the nonce action string must match. Here, both are 'my_meta_box_nonce' to verify correctly.

5fill in blank

hard

Fill all three blanks to correctly register a meta box, display its field, and save the data securely.

Wordpress

add_action('add_meta_boxes', '[1]');
add_action('save_post', '[2]');

function [1]() {
    add_meta_box('custom_box', 'Custom Box', '[3]', 'post');
}

function [3]($post) {
    wp_nonce_field('custom_box_nonce_action', 'custom_box_nonce');
    $value = get_post_meta($post->ID, 'custom_field', true);
    echo '<input type="text" name="custom_field" value="' . esc_attr($value) . '" />';
}

function [2]($post_id) {
    if (!isset($_POST['custom_box_nonce']) || !wp_verify_nonce($_POST['custom_box_nonce'], 'custom_box_nonce_action')) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    if (isset($_POST['custom_field'])) {
        update_post_meta($post_id, 'custom_field', sanitize_text_field($_POST['custom_field']));
    }
}

Drag options to blanks, or click blank then click option'

Aregister_custom_meta_box

Bsave_custom_meta_box_data

Cdisplay_custom_meta_box

Dcustom_meta_box_callback

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up function names between hooks and callbacks.

Not matching callback names in add_meta_box.

The add_meta_boxes hook calls 'register_custom_meta_box', the save_post hook calls 'save_custom_meta_box_data', and the meta box callback is 'custom_meta_box_callback'.