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().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

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me