# Add Custom Meta Boxes

Looking for adding custom meta boxes through UI? [acf-advanced-custom-fields](https://phpface.gitbook.io/streamtube/acf-advanced-custom-fields "mention")

{% hint style="success" %}
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/>&#x20;
{% endhint %}

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:&#x20;

* 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.&#x20;

For example:

* 'post' → 'dashboard\_post'
* 'page' → 'dashboard\_page'
* 'your\_post\_type' → 'dashboard\_your\_post\_type'

***

#### Registering a Custom Metabox

```php
/**
 * 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

```php
/**
 * 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

```php
/**
 * 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**\`:

```php
/**
 * 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!