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.