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.

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