WordPress Plugin Development Basics: IV

WordPress Meta boxes are one of the most useful ways to add custom data fields to our posts, pages, or custom post types. These fields, also known as “meta fields” allow us to store additional information which is not covered by WordPress’s default fields.

What are meta boxes?

Meta boxes are the UI Elements that appear on a WordPress page or post editor screen, these allow us to add custom data to the post or page. They are not visible on the frontend by default but they are saved in the database and can be displayed as needed.

Meta box is used to store additional information that is not part of the default WordPress content. Eg- for an event post type we can use it to gather information about the event date, location, etc.

Creating a Meta Box

1. Register the Meta Box

First, we need to tell WordPress to add our meta box. This is done using the add_meta_box() function.

function meta_box_test() {
    add_meta_box(
        'event-meta-basic', // ID of the meta box
        'Basic Meta', // Title of the meta box
        'basic_meta_box_html', // Callback function HTML
        'my_event', // Post type name
        'side', // Position
    );
}
add_action( 'add_meta_boxes', 'meta_box_test' );

In this Example—

event-meta-basic: This is the unique ID for our meta box.
'Basic Meta': The title of the meta box.
'basic_meta_box_html': This is the callback function that will generate the HTML.
'my_event': This is the custom post type where we want the meta box to appear.
'side': This defines where the meta box will be placed on the editor page. Options are normal, side, or advanced.

2. Create the Meta Box HTML

function basic_meta_box_html(WP_Post $post) {
    // Retrieve stored metadata for the current post
    $data = get_post_meta( $post->ID, 'event-data', true);
    ?>
    <p>This is inside a meta box</p>
    <input type="text" name="event-data" value="<?php echo esc_attr($data) ?>">
    <?php
}

The basic_meta_box_html function stores the HTML to show in the metabox.

get_post_meta($post->ID, 'event-data', true): This retrieves the stored meta value for the current post, if it exists.
esc_attr($data): This function ensures that any special characters in the meta value are properly escaped and displayed.

3. Save the Meta Data

function save_basic_meta(int $post) {
    // Check if the meta field is set
    if (isset($_POST['event-data'])) {
        // Save the data
        update_post_meta($post, 'event-data', sanitize_text_field( $_POST[ 'event-data']));
    }
}
add_action( 'save_post_my_event', 'save_basic_meta' );

isset($_POST['event-data']): We first check if the user has entered any data in the event-data field.
update_post_meta($post, 'event-data', sanitize_text_field($_POST['event-data'])): If data exists we sanitize it and save it to the database with the update_post_meta() function.

By hooking into the save_post_my_event action, we ensure that this function runs whenever a post of type my_event is saved.

The hook for any custom post type will be save_post_{custom-post-slug}.

4. Displaying the Meta Data

If we want to display the saved meta data on the frontend. We can retrieve the saved data using the get_post_meta() function and output it wherever we want.

<?php
$event_data = get_post_meta($post->ID, 'event-data', true);
echo '<p>Event Data: ' . esc_html($event_data) . '</p>';
?>

Conclusion

Meta boxes in WordPress allow us to extend the default post editing interface by adding custom fields and metadata.
By leveraging meta boxes we can create more dynamic websites by helping us collect, store, and display information beyond the basic title and content fields.

Lakshyajeet.