Custom meta boxes in Wordpress - Mini Project: Build & Apply

Create Custom Meta Boxes in WordPress

📖 Scenario: You are building a WordPress site for a small business. You want to add extra information fields to the post editor screen so the content creators can add special details easily.

🎯 Goal: Build a custom meta box in the WordPress post editor that allows users to enter a subtitle for each post.

📋 What You'll Learn

Create a function to register a meta box with the ID subtitle_meta_box and title Post Subtitle

Add the meta box to the post post type

Create a callback function to display a text input field with the name post_subtitle

Save the subtitle value when the post is saved

💡 Why This Matters

🌍 Real World

Custom meta boxes let WordPress site owners add extra fields to posts or pages, making content management easier and more tailored to their needs.

💼 Career

Knowing how to create and save custom meta boxes is a common task for WordPress developers customizing themes and plugins.

1

Register the Meta Box

Write a function called add_subtitle_meta_box that uses add_meta_box to add a meta box with ID subtitle_meta_box, title Post Subtitle, callback subtitle_meta_box_callback, and screen post. Then hook this function to add_meta_boxes action.

Wordpress

# Your code here to register the meta box

Hint

Use add_meta_box inside your function and hook it with add_action.

2

Create the Meta Box Callback

Write the function subtitle_meta_box_callback that accepts the $post object. Inside, retrieve the saved meta value with get_post_meta using key post_subtitle. Then output a text input field with name post_subtitle and value set to the retrieved meta value.

Wordpress

<?php
function add_subtitle_meta_box() {
    add_meta_box(
        'subtitle_meta_box',
        'Post Subtitle',
        'subtitle_meta_box_callback',
        'post'
    );
}
add_action('add_meta_boxes', 'add_subtitle_meta_box');

// Your code here to create subtitle_meta_box_callback function

Hint

Use get_post_meta to get the saved subtitle and output an input field with that value.

3

Save the Meta Box Data

Write a function called save_subtitle_meta_box_data that accepts $post_id. Inside, check if post_subtitle is set in $_POST. If yes, sanitize it with sanitize_text_field and save it using update_post_meta with key post_subtitle. Hook this function to save_post action.

Wordpress

ID, 'post_subtitle', true);
    echo 'Subtitle: ';
    echo '';
}

// Your code here to save meta box data

Hint

Check if post_subtitle is in $_POST, sanitize it, then save with update_post_meta.

4

Add Nonce for Security

In the subtitle_meta_box_callback function, add a nonce field with wp_nonce_field using action save_subtitle_meta_box and name subtitle_meta_box_nonce. Then, in save_subtitle_meta_box_data, verify the nonce from $_POST['subtitle_meta_box_nonce'] using wp_verify_nonce with the same action. If nonce verification fails, return early without saving.

Wordpress

ID, 'post_subtitle', true);
    echo 'Subtitle: ';
    echo '';
    // Add nonce field here
}

function save_subtitle_meta_box_data($post_id) {
    // Verify nonce here
    if (isset($_POST['post_subtitle'])) {
        $subtitle = sanitize_text_field($_POST['post_subtitle']);
        update_post_meta($post_id, 'post_subtitle', $subtitle);
    }
}
add_action('save_post', 'save_subtitle_meta_box_data');

Hint

Use wp_nonce_field in the callback and verify it in the save function with wp_verify_nonce.

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