Wordpress - "Add Media" button in custom plugin
If you want to add a add media button to your admin panels:
You need to use wp_enqueue_media();
add_action ( 'admin_enqueue_scripts', function () {
if (is_admin ())
wp_enqueue_media ();
} );
Then use this js:
jQuery(document).ready(function() {
var $ = jQuery;
if ($('.set_custom_images').length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$('.set_custom_images').on('click', function(e) {
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
id.val(attachment.id);
};
wp.media.editor.open(button);
return false;
});
}
}
});
Use this html:
<p>
<input type="number" value="" class="regular-text process_custom_images" id="process_custom_images" name="" max="" min="1" step="1">
<button class="set_custom_images button">Set Image ID</button>
</p>
Show thumbnail preview instead of number
Just as a tweak, I did this...
changed the number input to hidden.
added:
$imgid =(isset( $instance[ 'imgid' ] )) ? $instance[ 'imgid' ] : "";
$img = wp_get_attachment_image_src($imgid, 'thumbnail');
And then... above the hidden field.
if($img != "") {
?>
<img src="<?= $img[0]; ?>" width="80px" /><br />
<?php
}
That will make a thumbnail visible in the user end instead of a number :)