Introduction

WordPress allows developers to store additional information for posts and pages using Custom Fields. These fields make it possible to add structured data to your content beyond the default title and editor.

For example, if you are building a movie review website, you may want to store extra information such as:

• Movie release year
• Director name
• Rating
• Duration

Instead of placing this information inside the post content, it can be stored as custom fields.

To make managing these fields easier, WordPress allows developers to create Meta Boxes inside the post editor. Meta boxes provide a user-friendly interface where users can enter and edit custom field data.

In this tutorial, you will learn what custom fields and meta boxes are, how they work, and how to create them in WordPress.

What Are Custom Fields in WordPress?

A Custom Field is additional metadata stored for a post or page in WordPress.

This information is stored in the database and linked to the specific post.

Examples of custom field data include:

These fields allow developers to store structured information related to content.

What Are Meta Boxes?

A Meta Box is a user interface element in the WordPress editor that allows users to enter custom field data easily.

Instead of manually adding fields through the database, meta boxes provide a form-like interface inside the WordPress dashboard.

Meta boxes usually appear below or beside the post editor.

Example meta box fields might include:

• Product price
• Event location
• Book author
• Course duration

Why Use Custom Fields and Meta Boxes?

Custom fields and meta boxes are useful when you need to store structured data for posts or custom post types.

Benefits include:

• Better data organization
• Cleaner content structure
• Easier data retrieval in themes
• More flexible website functionality

They are commonly used in:

• Portfolio websites
• Event websites
• Product listings
• Course directories

How Custom Fields Work in WordPress

WordPress stores custom field data in the post meta table in the database.

When you add a custom field, WordPress saves it in the:

wp_postmeta

table.

Each entry in this table contains:

• post_id
• meta_key
• meta_value

This allows WordPress to link custom data with a specific post.

Step 1: Add a Custom Meta Box

Add this code to your theme’s functions.php file or a custom plugin:

function dpt_add_custom_meta_box() {
    add_meta_box(
        'dpt_project_details',
        'Project Details',
        'dpt_project_details_callback',
        'post', // change to your CPT if needed
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'dpt_add_custom_meta_box');

You can your Custom Post Type slug in place of ‘post’, if you are creating custom meta box for any Custom Post Type like “Projects”.

Step 2: Create the Meta Box Fields (HTML Form)

function dpt_project_details_callback($post) {
    wp_nonce_field('dpt_save_project_details', 'dpt_project_nonce');    $project_url = get_post_meta($post->ID, '_dpt_project_url', true);
    ?>    <p>
        <label for="dpt_project_url"><strong>Project URL</strong></label><br>
        <input type="text" name="dpt_project_url" id="dpt_project_url" value="<?php echo esc_attr($project_url); ?>" style="width:100%;" />
    </p>    <?php
}

Step 3: Save Custom Field Data Securely

function dpt_save_project_details($post_id) {
    if (!isset($_POST['dpt_project_nonce']) || 
        !wp_verify_nonce($_POST['dpt_project_nonce'], 'dpt_save_project_details')) {
        return;
    }    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }    if (!current_user_can('edit_post', $post_id)) {
        return;
    }    if (isset($_POST['dpt_project_url'])) {
        update_post_meta($post_id, '_dpt_project_url', sanitize_text_field($_POST['dpt_project_url']));
    }
}
add_action('save_post', 'dpt_save_project_details');

Using Nonces for Security

WordPress also recommends using nonces to verify that requests are coming from a valid source.

A nonce adds an additional security layer when saving data from meta boxes.

Example:

wp_nonce_field('movie_meta_box_nonce', 'movie_meta_box_nonce_field');

Before saving the data, verify the nonce:

if (!isset($_POST['movie_meta_box_nonce_field']) ||
    !wp_verify_nonce($_POST['movie_meta_box_nonce_field'], 'movie_meta_box_nonce')) {
    return;
}

This helps prevent unauthorized form submissions.

Best Practices for Custom Field Security

Follow these best practices when working with custom fields:

• Always sanitize user input before saving
• Escape output when displaying data
• Use nonces for form security
• Validate data types when possible

These practices help ensure that your WordPress application remains secure and stable.

Step 4: Display Custom Field on the Frontend

Add this in your theme template (like single.php):

$project_url = get_post_meta(get_the_ID(), '_dpt_project_url', true);if (!empty($project_url)) {
    echo '<p><strong>Project URL:</strong>
           <a href="' . esc_url($project_url) . '" target="_blank">' . esc_html($project_url) . '</a>
    </p>';
}

Common Mistakes to Avoid

Beginners often make the following mistakes when working with custom fields:

• Not sanitizing input data
• Forgetting to save field values
• Using incorrect meta keys
• Not escaping output data

Always validate and sanitize user input for security.

Practical Tasks

Try the following tasks to practice working with custom fields and meta boxes.

Task 1

Create a meta box called Book Details for posts.

Add fields such as:

• Book Author
• Publication Year

Task 2

Save the custom field values using update_post_meta().

Confirm that the values are stored in the database.

Task 3

Display the custom field data on the front end of the website.

Example output:

Author: John Smith
Publication Year: 2023

Task 4

Create custom fields for a Portfolio post type.

Possible fields include:

• Project URL
• Client Name
• Project Completion Date

Conclusion

Custom fields with meta boxes are a foundation of advanced WordPress development. They allow you to build structured content without plugins and create custom dashboards for your clients or personal projects.

Once you master this, you can move on to:

• Taxonomies for Custom Post Types
• Custom Templates for CPT
• Building custom admin interfaces

In the next tutorial, we’ll learn about Taxonomies for Custom Post Types.