How do I display Youtube/Vimeo video ID on custom post type when user enters it in custom meta box?

I have created a 2x shortcodes that displays a youtube video and vimeo video when the user enters the videos id in it, for example: [youtube id=""] [vimeo id=""].

Instead of entering this in my post I am trying to create a custom meta box that the user can enter the id in and then this is displayed.

So far I have been able to create a plugin to display the meta box but I'm not sure how to get it to save the youtube/vimeo ID and display the video.

Will I need 2x different meta boxes? One that the user can enter the youtube video ID in and the other where the vimeo ID can be entered and then this is displayed on the front end?

The code I have for the meta box is:

add_action( 'add_meta_boxes', 'cd_meta_box_add' );
function cd_meta_box_add()
{
    add_meta_box( 'my-meta-box-id', 'Enter Video ID', 'cd_meta_box_cb', 'videos', 'normal', 'high' );
}

function cd_meta_box_cb( $post )
{
    $video_type = get_post_meta($post-ID,'my_video_type',true);
    $video_id = get_post_meta($post-ID,'my_meta_box_text',true);
    wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );

    ?
    p
        label for="my_meta_box_text"Select video type:/label
         !-- added select for selecting vedio type --
        select name="my_video_type" id="my_video_type"  
            option ?php echo ($video_type == 'youtube') ? "selected='selected'" : "" ;? value="youtube"Youtube/option
            option ?php echo ($video_type == 'vimeo') ? "selected='selected'" : "" ;? value="vimeo"Vimeo/option
        /select
        !-- added select for selecting vedio type --
    /p

    p
        label for="my_meta_box_text"Youtube/Vimeo ID:/label
        input type="text" name="my_meta_box_text" id="my_meta_box_text" value="?php echo $video_id; ?" /
    /p



    ?php   
}


add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' )  DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;

    // now we can actually save the data
    $allowed = array( 
        'a' = array( // on allow a tags
            'href' = array() // and those anchords can only have href attribute
        )
    );

    // Probably a good idea to make sure your data is set
    if( isset( $_POST['my_meta_box_text'] ) )
        update_post_meta( $post_id, 'my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) );


}
?

In single.php I need to run a query to display the video based on what the user enters in the meta box. My code for that is:

?php global $post; ?
?php


                        if(get_post_meta($post-ID,'my_video_type',true) == "youtube"){
                            $youtube_id = get_post_meta($post-ID,'my_meta_box_text',true);     
                            }
                            if(get_post_meta($post-ID,'my_video_type',true) == "vimeo"){
                                $vimeo_id = get_post_meta($post-ID,'my_meta_box_text',true);   
                            }





   ?

However this does not display anything. I have been pulling my hair out to get this sorted. If anyone can help it will be greatly appreciated. Thanks in advance.

Topic vimeo id youtube metabox Wordpress

Category Web

1
answered at

Do you have custom post type videos? if not change videos to post

add_meta_box( 'my-meta-box-id', 'Enter Video ID', 'cd_meta_box_cb', 'post', 'normal', 'high' );

Your code is fine but you are not saving the video type select box you just updated the id input field.

Place this code in add_action('save_post', 'cd_meta_box_save');

if( isset( $_POST['my_meta_box_text'] ) && isset( $_POST['my_video_type'] ) ) {
        update_post_meta( $post_id, 'my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) );
        update_post_meta( $post_id, 'my_video_type', strip_tags($_POST['my_video_type']) );
    }

It will also save your selected video type and after try echo with the following code.

EDITED:

global $post;
if (get_post_meta($post->ID, 'my_video_type', true) == "youtube") {
    echo do_shortcode('[youtube id="'.get_post_meta($post->ID, 'my_meta_box_text', true).'"]');
}
if (get_post_meta($post->ID, 'my_video_type', true) == "vimeo") {
    echo do_shortcode('[vimeo id="'.get_post_meta($post->ID, 'my_meta_box_text', true).'"]');
}

Youtube and Vimeo Shortcode:

function wp_youtube_video($atts) {
    extract(shortcode_atts(array('id' => ''), $atts));
    return '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/'.$id.'" frameborder="0" allowFullScreen></iframe>';
}

add_shortcode('youtube', 'wp_youtube_video');

    function wp_vimeo_video($atts) {
        extract(shortcode_atts(array('id' => ''), $atts));
        return '<iframe src="http://player.vimeo.com/video/'.$id.'" width="WIDTH" height="HEIGHT" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
    }
    add_shortcode('vimeo', 'wp_vimeo_video');

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.