Last active
December 6, 2023 14:23
-
-
Save cferdinandi/86f6e326b30b8b5416c0a7e43271efa6 to your computer and use it in GitHub Desktop.
Adding a Media Uploader to a custom metabox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Load media uploader on pages with our custom metabox | |
*/ | |
jQuery(document).ready(function($){ | |
'use strict'; | |
// Instantiates the variable that holds the media library frame. | |
var metaImageFrame; | |
// Runs when the media button is clicked. | |
$( 'body' ).click(function(e) { | |
// Get the btn | |
var btn = e.target; | |
// Check if it's the upload button | |
if ( !btn || !$( btn ).attr( 'data-media-uploader-target' ) ) return; | |
// Get the field target | |
var field = $( btn ).data( 'media-uploader-target' ); | |
// Prevents the default action from occuring. | |
e.preventDefault(); | |
// Sets up the media library frame | |
metaImageFrame = wp.media.frames.metaImageFrame = wp.media({ | |
title: meta_image.title, | |
button: { text: 'Use this file' }, | |
}); | |
// Runs when an image is selected. | |
metaImageFrame.on('select', function() { | |
// Grabs the attachment selection and creates a JSON representation of the model. | |
var media_attachment = metaImageFrame.state().get('selection').first().toJSON(); | |
// Sends the attachment URL to our custom image input field. | |
$( field ).val(media_attachment.url); | |
}); | |
// Opens the media library frame. | |
metaImageFrame.open(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Render the metabox | |
*/ | |
function myplugin_render_metabox() { | |
// Variables | |
global $post; | |
$saved = get_post_meta( $post->ID, 'myplugin_media_id', true ); | |
?> | |
<fieldset> | |
<div> | |
<?php | |
/** | |
* The label for the media field | |
*/ | |
?> | |
<label for="myplugin_media"><?php _e( 'Field Label', 'events' )?></label><br> | |
<?php | |
/** | |
* The actual field that will hold the URL for our file | |
*/ | |
?> | |
<input type="url" class="large-text" name="myplugin_media" id="myplugin_media" value="<?php echo esc_attr( $saved ); ?>"><br> | |
<?php | |
/** | |
* The button that opens our media uploader | |
* The `data-media-uploader-target` value should match the ID/unique selector of your field. | |
* We'll use this value to dynamically inject the file URL of our uploaded media asset into your field once successful (in the myplugin-media.js file) | |
*/ | |
?> | |
<button type="button" class="button" id="events_video_upload_btn" data-media-uploader-target="#myplugin_media"><?php _e( 'Upload Media', 'myplugin' )?></button> | |
</div> | |
</fieldset> | |
<?php | |
// Security field | |
wp_nonce_field( 'myplugin_form_metabox_nonce', 'myplugin_form_metabox_process' ); | |
} | |
/** | |
* Load the media uploader and our custom myplugin-media.js file | |
* Change `myplugin_custom_post_type` to whatever the post type for your metabox is | |
* You may also need to change the `plugins_url()` path to match your plugin folder structure (currently assumes flat with no subfolders) | |
*/ | |
function myplugin_load_admin_scripts( $hook ) { | |
global $typenow; | |
if( $typenow == 'myplugin_custom_post_type' ) { | |
wp_enqueue_media(); | |
// Registers and enqueues the required javascript. | |
wp_register_script( 'meta-box-image', plugins_url( 'myplugin-media.js' , __FILE__ ), array( 'jquery' ) ); | |
wp_localize_script( 'meta-box-image', 'meta_image', | |
array( | |
'title' => __( 'Choose or Upload Media', 'events' ), | |
'button' => __( 'Use this media', 'events' ), | |
) | |
); | |
wp_enqueue_script( 'meta-box-image' ); | |
} | |
} | |
add_action( 'admin_enqueue_scripts', 'gmt_events_load_admin_scripts', 10, 1 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you it works like a charm 👍