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!
Last updated