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