How to to Add a Custom Media Uploader Button in WordPress Admin

When you create some sort of meta boxes or maybe a custom options page, sometimes you need fields like an image upload button or a file uploader.

Personally for me it is OK if the website settings has a simple input text field where I can place the image URL, but it is not enough for the regular user, it is not even professional when you create a user interface – that’s what I think.

Image uploader field in WordPress option pages

There are also a plenty of ready plugins that allow you to create image upload buttons on the fly, one of them – Simple Meta Boxes plugin created by me 🚀

But if you continue reading this – below are 3 easy steps how to create an uploader button on your own.

1. Upload Button HTML

Well, actually it is more PHP than HTML 😁

if( $image = wp_get_attachment_image_src( $image_id ) ) {
 
	echo '<a href="#" class="misha-upl"><img src="' . $image[0] . '" /></a>
	      <a href="#" class="misha-rmv">Remove image</a>
	      <input type="hidden" name="misha-img" value="' . $image_id . '">';
 
} else {
 
	echo '<a href="#" class="misha-upl">Upload image</a>
	      <a href="#" class="misha-rmv" style="display:none">Remove image</a>
	      <input type="hidden" name="misha-img" value="">';
 
}

Some things to keep in mind:

2. JavaScript part

Or to be exact – jQuery.

Actually there is no reason to use raw JavaScrpt implementation because jQuery is included in WordPress admin in any case.

jQuery(function($){
 
	// on upload button click
	$('body').on( 'click', '.misha-upl', function(e){
 
		e.preventDefault();
 
		var button = $(this),
		custom_uploader = wp.media({
			title: 'Insert image',
			library : {
				// uploadedTo : wp.media.view.settings.post.id, // attach to the current post?
				type : 'image'
			},
			button: {
				text: 'Use this image' // button label text
			},
			multiple: false
		}).on('select', function() { // it also has "open" and "close" events
			var attachment = custom_uploader.state().get('selection').first().toJSON();
			button.html('<img src="' + attachment.url + '">').next().val(attachment.id).next().show();
		}).open();
 
	});
 
	// on remove button click
	$('body').on('click', '.misha-rmv', function(e){
 
		e.preventDefault();
 
		var button = $(this);
		button.next().val(''); // emptying the hidden field
		button.hide().prev().html('Upload image');
	});
 
});

Where to insert the code? I recommend you to create an empty .js file and add it there, we are going to enqueue it in the next step. Or you can also add it to admin_footer action hook.

3. Enqueue scripts into admin area using wp_enqueue_script() and wp_enqueue_media()

We need this piece of code to add our jQuery script to WordPress admin area. Insert it to your current theme functions.php file.

add_action( 'admin_enqueue_scripts', 'misha_include_js' );
 
function misha_include_js() {
 
	// I recommend to add additional conditions just to not to load the scipts on each page
 
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
 
 	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/customscript.js', array( 'jquery' ) );
}

That’s it. Now we can use the button in your meta boxes or option pages. If this code doesn’t seems simple for you, please look at this ready solution.

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.

Need some custom developer help? Get in touch