Add Custom Meta Boxes

Looking for adding custom meta boxes through UI? ACF - Advanced Custom Fields

Adding custom meta boxes programmatically is straightforward and follows the same approach as the add_meta_box function https://developer.wordpress.org/reference/functions/add_meta_box/

Take a look at the sample code below, you should already be familiar with the `add_meta_boxes` and `save_post` actions.

To enable the metabox for the Post Type Editing screen on the frontend, you can:

• Replace add_meta_boxes with streamtube_add_meta_boxes

• Replace add_meta_box with streamtube_add_meta_box

• Replace 'post_type_name' with 'dashboard_post_type_name'.

In this example, we demonstrate how to register a sample metabox for the Video post type. If you’d like to implement this for a different post type, simply replace 'video' with the desired post type name.

For example:

• 'post' → 'dashboard_post'

• 'page' → 'dashboard_page'

• 'your_post_type' → 'dashboard_your_post_type'

---

Registering a Custom Metabox

/**
 * Registers a custom meta box for the 'video' post type.
 *
 * This function adds a meta box to the WordPress admin interface for the specified
 * post type. The meta box appears in the 'side' context with a 'high' priority.
 *
 * Meta Box Details:
 * - ID: 'my_meta_box_id'
 * - Title: 'Custom Metabox Title'
 * - Callback: 'my_metabox_callback' (renders the meta box content)
 * - Post Type: 'video' (modifiable)
 * - Context: 'side' (position in the editor)
 * - Priority: 'high' (display priority)
 *
 * @return void
 */
function my_custom_metabox() {
    add_meta_box(
        'my_meta_box_id',         // Unique ID
        'Custom Metabox Title',   // Box title
        'my_metabox_callback',    // Callback function
        'video',                  // Post type (change as needed)
        'side',                   // Context (side, normal, advanced)
        'high'                    // Priority
    );
}
add_action( 'add_meta_boxes', 'my_custom_metabox' );

Rendering the Metabox Content

/**
 * Callback function to display the custom meta box content.
 *
 * Adds a nonce field for security, retrieves the existing meta value,
 * and renders an input field for user input.
 *
 * @param WP_Post $post The current post object.
 */
function my_metabox_callback( $post ) {
    // Security nonce
    wp_nonce_field( 'my_custom_nonce', 'my_nonce' );
    // Retrieve existing meta value
    $meta_value = get_post_meta( $post->ID, '_my_meta_key', true );
    // Display the input field
    echo '<label for="my_meta_field">Enter custom value:</label>';
    echo '<input type="text" id="my_meta_field" name="my_meta_field" value="' . esc_attr( $meta_value ) . '" style="width:100%;">';
}

Saving Metabox Data

/**
 * Saves custom meta box data when a post is saved.
 *
 * Verifies the nonce, checks user permissions, and updates the post meta
 * with sanitized input data.
 *
 * @param int $post_id The ID of the post being saved.
 *
 * @return void
 */
function my_save_metabox_data( $post_id ) {
    // Verify nonce
    if ( ! isset( $_POST['my_nonce'] ) || ! wp_verify_nonce( $_POST['my_nonce'], 'my_custom_nonce' ) ) {
        return;
    }
    // Check user permissions
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
    // Save the meta value
    if ( isset( $_POST['my_meta_field'] ) ) {
        update_post_meta( $post_id, '_my_meta_key', sanitize_text_field( $_POST['my_meta_field'] ) );
    }
}
add_action( 'save_post', 'my_save_metabox_data' );

Enabling the Metabox for the Frontend

If you want the metabox to appear on the frontend Video Editing screen, modify the `add_meta_boxes` hook to `streamtube_add_meta_boxes` and change `video` to `dashboard_video`:

/**
 * Registers a custom meta box for the frontend dashboard post type editing screen.
 */
function my_custom_metabox() {
    streamtube_add_meta_box(
        'my_meta_box_id',         // Unique ID
        'Custom Metabox Title',   // Box title
        'my_metabox_callback',    // Callback function
        'dashboard_video',        // Post type (for frontend)
        'side',                   // Context (side, normal, advanced)
        'high'                    // Priority
    );
}
add_action( 'streamtube_add_meta_boxes', 'my_custom_metabox' );
// Uncomment below if you need to use it in the admin area
// add_action( 'add_meta_boxes', 'my_custom_metabox' );
// ....
// The rest code.

Done!