phpface
  • Introduction
  • Installation
  • Verify License
  • Install Plugins
  • Import Sample Content
  • Content Capabilities
  • Theme Options
  • Site Logo
  • Elementor Widgets
  • Sidebars
  • Shortcodes
  • Widgets
  • Add Menu
  • Add Custom User Dashboard Pages
  • Mobile Bottom Menu
  • Upload/Embed Video
  • Upload Big Files
  • Transcode and Encrypt Video With FFmpeg
  • Video Collections
  • Video Chapters
  • Import YouTube Videos
  • Post Location
  • Live Chat and Private Messages
  • User Dashboard
  • Video Advertising
  • BuddyPress (Activity Stream, Notifications, User Groups, Friend Connections ... etc)
  • Restrict Content
  • User Registration / Membership
    • Patreon Membership
    • Paid Membership Pro
    • Paid Member Subscriptions
  • myCred
  • ACF - Advanced Custom Fields
  • Create User Channels
  • WP Statistics (Page Views, Reports, Analytics ...)
  • Sitekit By Google (Page Views, Reports, Analytics ...)
  • Limit Backend Access
  • Bunny Stream
  • Cloudflare Stream
  • DynTube Stream
  • WooCommerce - Sell Video Content
  • Dokan - WooCommerce Multivendor Marketplace.
  • Forums
  • Search Everything in WordPress
  • Translation
  • Changelogs
  • For Developers
    • Add Custom Meta Boxes
    • REST APIs & Upload
  • FAQs
    • How to resolve 404 Error?
    • How to update the theme and all bundled plugins?
    • How to update all bundled plugins?
    • What is a Short Video?
  • How to solve "video is being encoded, please wait a minute" issue?
  • How to Add Custom Roles and Capabilities?
  • How to set custom single video template?
  • End
    • Thank you!
  • Customer Support
Powered by GitBook
On this page
  1. For Developers

Add Custom Meta Boxes

PreviousChangelogsNextREST APIs & Upload

Last updated 2 months ago

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

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!

https://developer.wordpress.org/reference/functions/add_meta_box/