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.

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:

• Image is stored in database as an attachment ID $image_id and we get the URL of the media with wp_get_attachment_image_src() function.You can store it as a URL if you wish – in this case you have to change what is inside your hidden field.
• How to get $image_id? If you created the upload button for posts meta boxes, you can use get_post_meta() function, if for option pages, then get_option() function etc.
• In this case it is not necessary to use any escaping esc_attr() function with $image_id.

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().show().next().val(attachment.id);
		}).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

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter