How can I create a custom meta box to add an mp4 video to a page?

I've cobbled together code (as I'm a php and jquery newbie) from a couple of different posts to try and get an mp4 video URL input field in the wordpress admin. I've been able to get a media uploader to display, choose a file and on select populate a form field with the URL in the wordpress admin however when I click update the URL disappears. I can't for the life of me figure out what I need to do to display this URL once the page is updated. Any help would be greatly appreciated! Here is the code that I've added to my functions.php (please disregard that the id etc is called "upload image" as opposed to video I'll change all of that once I get it working):

    add_action('plugins_loaded', function(){ 
    if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
}
});

function my_admin_scripts() { wp_enqueue_script('jquery');    wp_enqueue_script('media-upload');   wp_enqueue_script('thickbox'); }   
function my_admin_styles()  { wp_enqueue_style('thickbox'); }

    add_action('add_meta_boxes', function(){  add_meta_box('my-metaboxx1', 'my-metaboxx1-title','func99999', get_post_types(),'normal'); }, 9);

function func99999($post){ 
$attachment =get_post_meta($post-ID,'my-image-for-post', true);   ?

Here is the HTML for the form field:

label for="upload_image"
input id="upload_image" type="text" size="36" name="ad_image" value="?php echo $attachment; ?" / 
input id="upload_image_button" class="button" type="button" value="Upload Image" /
br /Enter a URL or upload an image
/label

Here is the jQuery:

script
    jQuery(document).ready(function($){


var custom_uploader;


$('#upload_image_button').click(function(e) {

    e.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
            text: 'Choose Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('#upload_image').val(attachment.url);
        $('#upload_image').attr("src", attachment.url);
    });

    //Open the uploader dialog
    custom_uploader.open();

});


});
/script

Here is what I'm using to try and save the input field:

add_action( 'save_post', function ($post_id) {
if (isset($_POST['upload_image'])){
    update_post_meta($post_id, 'my-image-for-post',$_POST['upload_image']);
}
});

Is is possible that I need to change the value in this line or is there a larger issue?

input id="upload_image" type="text" size="36" name="ad_image" value="?php echo $attachment; ?" /

Topic videos metabox admin customization custom-post-types Wordpress

Category Web


You were close. This is similar to something I'd done recently. Here is a rewrite of your code that is working. In addition I've changed the word "image" to "video" throughout the function so that it is aptly named. Finally, I've changed the orientation in the admin panel to make this meta box appear above the content editor. First:

// add necessary scripts
add_action('plugins_loaded', function(){ 
if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
}
});

function my_admin_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('media-upload');   wp_enqueue_script('thickbox'); }  
function my_admin_styles()  { wp_enqueue_style('thickbox'); }

Next, add your meta box as well as the html for the form field and the upload button:

add_action('add_meta_boxes', function(){  add_meta_box('video-metabox', 'Add a Video','func99999', get_post_types(),'top', 'high'); }, 9);
function func99999($post){ 
$url =get_post_meta($post->ID,'video-for-post', true);   ?>
<label for="video_URL">
<input id="video_URL" type="text" size="36" name="video_URL" value="<?php echo $url;?>" /> 
<input id="upload_video_button" class="button" type="button" value="Choose a Video" />
<br />Choose a video from the media library then, update your post/page to save it.<br /><br />
// This is to display the video in the admin area
<video class="video" controls>
            <source src="<?php echo $url;?>" type="video/mp4" id="vidsrc">
            Your browser does not support HTML5 video.
        </video>
</label>

Then add your jquery (I've added a line of css to provide some space above the meta box):

<script>


jQuery(document).ready(function($){
 $('#video-metabox.postbox').css('margin-top','30px');

 var custom_uploader;
 $('#upload_video_button').click(function(e) {

    e.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose a Video',
        button: {
            text: 'Choose a Video'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('#video_URL').val(attachment.url);

    });

    //Open the uploader dialog
    custom_uploader.open();

    });


});
</script>

Next, provide a save function for the url:

<?php

}

add_action( 'save_post', function ($post_id) {
if (isset($_POST['video_URL'])){
    update_post_meta($post_id, 'video-for-post',$_POST['video_URL']);
}
});

Finally, add a function to move the meta box above the content editor. This creates a location called top on your admin page so be sure to match the position and priority in the arguments contained in the code to add the meta box to "top" and set the priority to "high". If you don't wish to move your meta box to the top just remove this function and change the code in the meta box arguments to something else like "normal" or "side" and change the priority from "high" to "default" You also may want to remove the jquery line " $('#video-metabox.postbox').css('margin-top','30px');" to remove space if not placing the meta box above the content editor:

add_action('edit_form_after_title', function() {
  do_meta_boxes(get_current_screen(), 'top', $post);
  unset($wp_meta_boxes[get_post_type($post)]['top']);
});

If you need this meta box to appear only on a certain page template like I did, you can just change this last function to the following:

add_action('edit_form_after_title', function() {
global $post, $wp_meta_boxes;
if ( 'template-name.php' == get_post_meta( $post->ID, '_wp_page_template', true ) ) {
  do_meta_boxes(get_current_screen(), 'top', $post);
  unset($wp_meta_boxes[get_post_type($post)]['top']);
}
});

About

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