Custom meta boxes in Wordpress - Step-by-Step Execution

Concept Flow - Custom meta boxes

Add action 'add_meta_boxes'

↓

Call function to register meta box

↓

WordPress shows meta box in editor

↓

User enters data in meta box

↓

Save post triggers 'save_post' action

↓

Save function saves meta box data

↓

Data stored in post meta

This flow shows how WordPress adds a custom meta box to the editor, lets the user enter data, and saves that data when the post is saved.

Execution Sample

Wordpress

<?php
add_action('add_meta_boxes', 'my_custom_meta_box');
function my_custom_meta_box() {
  add_meta_box('my_box', 'My Box', 'my_box_html', 'post');
}
function my_box_html($post) {
  $value = get_post_meta($post->ID, '_my_meta_key', true);
  echo '<input type="text" name="my_meta_input" value="' . esc_attr($value) . '" />';
}
add_action('save_post', 'save_my_meta_box');
function save_my_meta_box($post_id) {
  if (array_key_exists('my_meta_input', $_POST)) {
    update_post_meta($post_id, '_my_meta_key', sanitize_text_field($_POST['my_meta_input']));
  }
}
?>

This code adds a custom meta box to post editor, shows a text input, and saves the input as post meta when the post is saved.

Execution Table

Step	Action	Function Called	Data Read/Written	Result
1	WordPress triggers 'add_meta_boxes' action	my_custom_meta_box	None	Registers meta box 'my_box' for posts
2	Editor loads post edit screen	my_box_html	Reads post meta '_my_meta_key'	Displays input with saved value or empty
3	User types in input box	None	User input stored in browser form	Input visible in meta box
4	User clicks Save/Update post	save_my_meta_box	Reads $_POST['my_meta_input']	Sanitizes and updates post meta '_my_meta_key'
5	Post saved	None	Post meta updated	Data saved and available for next edit
6	Editor reloads	my_box_html	Reads updated post meta	Input shows saved value
7	End	None	None	Meta box data saved and displayed correctly

💡 Meta box data saved in post meta and displayed on editor reload

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6
$post->ID	N/A	123	123	123
$value (meta)	'' (empty)	'hello'	'new input'	'new input'
$_POST['my_meta_input']	N/A	N/A	'new input'	N/A

Key Moments - 3 Insights

Why does the meta box input show empty when editing a post for the first time?

Because the post meta key '_my_meta_key' does not exist yet, so get_post_meta returns empty string as shown in execution_table step 2.

How does WordPress know when to save the meta box data?

The save_my_meta_box function is hooked to 'save_post' action, which runs when the post is saved, as shown in execution_table step 4.

Why do we sanitize the input before saving?

To protect from unwanted code or harmful input, sanitize_text_field cleans the input before saving, ensuring safe data storage (step 4).

Visual Quiz - 3 Questions

Look at the execution table, what function reads the saved meta value to display in the meta box?

A save_my_meta_box

B my_custom_meta_box

C my_box_html

D add_meta_box

💡 Hint

Check step 2 in the execution_table where the meta value is read to show input.

At which step does the meta box data get saved to the database?

A Step 2

B Step 4

C Step 6

D Step 1

💡 Hint

Look at step 4 where save_my_meta_box updates post meta.

If the user does not enter any input, what happens to the post meta after saving?

A It remains unchanged

B It is updated to empty string

C It is deleted

D An error occurs

💡 Hint

Refer to variable_tracker and execution_table step 4: update_post_meta only runs if input exists.

Concept Snapshot

Custom meta boxes add extra fields to post editor.
Use add_meta_box() inside 'add_meta_boxes' action.
Display input fields in callback function.
Save data on 'save_post' action with update_post_meta().
Sanitize user input before saving.
Data stored as post meta, shown on edit screen.

Full Transcript

Custom meta boxes in WordPress let you add extra input fields to the post editor screen. First, you hook a function to 'add_meta_boxes' action to register your meta box with add_meta_box(). This meta box appears on the post edit screen. Inside the meta box callback, you read existing post meta with get_post_meta() and show an input field with that value. When the user saves the post, WordPress triggers 'save_post' action. Your save function reads the input from $_POST, sanitizes it, and saves it with update_post_meta(). This way, the data is stored safely and shown again when editing the post. The execution flow starts with registering the meta box, displaying it, user input, saving data, and reloading with saved data visible. Variables like $value track the meta value across steps. Key points include why input is empty initially, how saving is triggered, and why sanitization is important. The visual quiz checks understanding of which functions run at each step and what happens if input is empty.

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