Custom meta boxes in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this WordPress custom meta box code?

Consider this code snippet that adds a custom meta box to the post editor:

function add_custom_meta_box() {
  add_meta_box(
    'my_meta_box',
    'My Meta Box',
    'render_my_meta_box',
    'post',
    'side',
    'default'
  );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

function render_my_meta_box($post) {
  echo '<label for="my_field">Enter text:</label>';
  echo '<input type="text" id="my_field" name="my_field" value="" />';
}

What will the user see in the post editor screen?

Wordpress

function add_custom_meta_box() {
  add_meta_box(
    'my_meta_box',
    'My Meta Box',
    'render_my_meta_box',
    'post',
    'side',
    'default'
  );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

function render_my_meta_box($post) {
  echo '<label for="my_field">Enter text:</label>';
  echo '<input type="text" id="my_field" name="my_field" value="" />';
}

A A new box titled 'My Meta Box' appears in the sidebar with a label 'Enter text:' and an empty text input field.

B A new box titled 'My Meta Box' appears below the post content with a label and a dropdown menu.

C No new box appears because the add_meta_box function is missing a required parameter.

D A fatal error occurs because the render_my_meta_box function is not hooked properly.

💡 Hint

Look at the parameters of add_meta_box and the output of the callback function.

The add_meta_box function adds a box titled 'My Meta Box' to the 'post' edit screen in the sidebar ('side' context). The callback render_my_meta_box outputs a label and an empty text input. So the user sees this box with the label and input field in the sidebar.

❓ state_output

intermediate

What is the saved meta value after this code runs?

This code saves a custom meta field when a post is saved:

function save_my_meta_box_data($post_id) {
  if (!isset($_POST['my_field'])) return;
  update_post_meta($post_id, 'my_field', sanitize_text_field($_POST['my_field']));
}
add_action('save_post', 'save_my_meta_box_data');

If the user enters 'Hello World' in the meta box input and saves the post, what will be stored in the post meta?

Wordpress

function save_my_meta_box_data($post_id) {
  if (!isset($_POST['my_field'])) return;
  update_post_meta($post_id, 'my_field', sanitize_text_field($_POST['my_field']));
}
add_action('save_post', 'save_my_meta_box_data');

A A PHP error because $_POST['my_field'] is not checked before use

B An empty string because the input value is not saved automatically

C The string 'my_field' because the key is saved instead of the value

D 'Hello World' (the exact text entered, sanitized to remove harmful code)

💡 Hint

Check how update_post_meta and sanitize_text_field work.

The function checks if $_POST['my_field'] exists, then sanitizes the input text and saves it as post meta with key 'my_field'. So the exact text entered, cleaned of harmful code, is saved.

🔧 Debug

advanced

Why does this custom meta box not appear on the post editor?

Look at this code snippet:

function add_custom_box() {
  add_meta_box(
    'custom_box',
    'Custom Box',
    'custom_box_callback',
    'page',
    'normal',
    'high'
  );
}
add_action('add_meta_boxes_post', 'add_custom_box');

function custom_box_callback($post) {
  echo '<p>Custom content here</p>';
}

The developer expects the box to appear on the post editor screen, but it does not. Why?

Wordpress

function add_custom_box() {
  add_meta_box(
    'custom_box',
    'Custom Box',
    'custom_box_callback',
    'page',
    'normal',
    'high'
  );
}
add_action('add_meta_boxes_post', 'add_custom_box');

function custom_box_callback($post) {
  echo '<p>Custom content here</p>';
}

A The priority 'high' is invalid and prevents the box from showing.

B The callback function name is misspelled, causing the box not to render.

C The meta box is registered for 'page' post type but hooked to 'add_meta_boxes_post', so it never runs for posts.

D The meta box ID 'custom_box' conflicts with a core WordPress box, hiding it.

💡 Hint

Check the post type parameter and the hook name carefully.

The add_meta_box call targets the 'page' post type, but the hook used is add_meta_boxes_post, which runs only for 'post' post type. Since the hook and post type don't match, the box does not appear on the post editor.

📝 Syntax

advanced

Which option causes a syntax error in this custom meta box code?

Identify which code snippet will cause a syntax error when adding a custom meta box:

A add_meta_box('box4', 'Box 4', 'callback_func', 'post', 'side', 'low');

B add_meta_box('box3', 'Box 3', 'callback_func', 'post', 'normal' 'high');

C add_meta_box('box1', 'Box 1', 'callback_func', 'post', 'side', 'default');

D add_meta_box('box2', 'Box 2', callback_func, 'post', 'normal', 'high');

💡 Hint

Look for missing commas between parameters.

Option B is missing a comma between 'normal' and 'high', causing a syntax error. All other options have correct syntax.

🧠 Conceptual

expert

Which option best explains why nonce verification is important in saving custom meta box data?

When saving data from a custom meta box, developers often use a nonce field and verify it before saving. Why is this step important?

A To prevent unauthorized users or scripts from submitting data and protect against Cross-Site Request Forgery (CSRF) attacks.

B To speed up the saving process by caching the meta box data temporarily.

C To automatically sanitize all input data without extra code.

D To ensure the meta box appears only for logged-in users.

💡 Hint

Think about security risks when saving data from forms.

Nonce verification helps confirm that the data submission is intentional and from a valid source, protecting against CSRF attacks. It does not speed saving, sanitize data automatically, or control visibility.