Adding Custom Meta Boxes in WordPress: A Complete Guide

MD ARIF

Feb 28, 2024

Meta boxes are a great way to add additional fields to your WordPress posts or custom post types. In this tutorial, we’ll walk you through adding two custom meta boxes to WordPress using PHP code:

A Project Link meta box for the mav_portfolio post type.
A Service Icon meta box for the mav_service post type.

By the end of this guide, you’ll know how to create and save meta box data and display it in your WordPress admin interface.

What Are Meta Boxes?

Meta boxes in WordPress provide a way to add extra fields to your post editor screen. These fields allow you to save and manage custom metadata for your posts or custom post types.

Adding Custom Meta Boxes to Your WordPress Site

Let’s dive into the code to register, display, and save meta boxes.

Step 1: Registering Meta Boxes

First, we need to register our meta boxes using the add_meta_boxes action. Here’s the code:

function mountaviary_register_meta_box() {
    add_meta_box(
        'project_id', 
        'Enter Your Project Link', 
        'mountaviary_project_metabox', 
        'mav_portfolio', 
        'normal', 
        'low'
    );

    add_meta_box(
        'services_id', 
        'Add your favourite icon', 
        'mountaviary_services_metabox', 
        'mav_service', 
        'normal', 
        'low'
    );
}
add_action('add_meta_boxes', 'mountaviary_register_meta_box');

add_meta_box Parameters:

project_id and services_id: Unique IDs for the meta boxes.
Title: The title is displayed on the meta box.
Callback functions: Functions to display the meta box content.
Post type: The post types (mav_portfolio and mav_service) where the meta boxes will appear.

Step 2: Displaying Meta Box Content

Next, we’ll define the callback functions to display the content inside the meta boxes.

Project Link Meta Box

function mountaviary_project_metabox($post) {
    wp_nonce_field(basename(__FILE__), 'portfolio_nonce');
    ?>
    <div>
        <input 
            type="url" 
            name="project-link" 
            class="widefat" 
            placeholder="Enter Link" 
            value="<?php echo get_post_meta($post->ID, 'project-link', true); ?>"
        >
    </div>
    <?php
}

This meta box includes:

A text field for users to enter a project link.
The get_post_meta function retrieves the existing value from the database, if available.

Service Icon Meta Box

function mountaviary_services_metabox($post) {
    wp_nonce_field(basename(__FILE__), 'service_nonce');
    ?>
    <div>
        <input 
            type="text" 
            name="service-icon" 
            class="widefat" 
            placeholder="Put your icon name" 
            value="<?php echo get_post_meta($post->ID, 'service-icon', true); ?>"
        >
        <label for="service-icon">
            To add your favourite icon, 
            <a target="_blank" href="https://developer.wordpress.org/resource/dashicons/">
                follow this link
            </a> 
            and copy the icon name. Paste it here. Example: <i>dashicons-index-card</i>.
        </label>
    </div>
    <?php
}

This meta box provides:

A text field for entering the name of a Dashicon.
A helpful link to the Dashicons library.

Step 3: Saving Meta Box Data

To save the data entered into these meta boxes, we hook into the save_post action.

Saving Project Link Data

function mountaviary_save_metabox($post_id) {
    if (isset($_POST['project-link'])) {
        update_post_meta($post_id, 'project-link', $_POST['project-link']);
    }
}
add_action('save_post', 'mountaviary_save_metabox');

Saving Service Icon Data

function mountaviary_save_service_metabox($post_id) {
    if (isset($_POST['service-icon'])) {
        update_post_meta($post_id, 'service-icon', $_POST['service-icon']);
    }
}
add_action('save_post', 'mountaviary_save_service_metabox');

These functions:

Use update_post_meta to save the submitted data into the WordPress database.
Check if the data exists in $_POST to prevent errors.

How to Use This Code

~ Add the Code to Your Theme

~ Place the complete code in your theme’s functions.php file or a custom plugin.

~ Create Custom Post Types. Ensure custom post types mav_portfolio and mav_service are registered in your WordPress setup. If not, create them first.

~ Add a New Post. Navigate to the mav_portfolio post type to add a new portfolio item.

~ Fill in the “Project Link” field with a valid URL.

~ Navigate to the mav_service post type to add a new service. Enter a Dashicon name in the “Service Icon” field.

~ Save and Verify

~ Save the post. The entered data will be stored in the WordPress database and can be retrieved using the get_post_meta function.

Final Thoughts

By following this guide, you can create custom meta boxes in WordPress to enhance your post-editing experience. These meta boxes can be adapted for any type of data you want to store, making your site more dynamic and user-friendly.

Happy coding! 🚀

Discover more from MountAviary

Subscribe to get the latest posts sent to your email.

MountAviary