How to Upload Images via Wordpress Dashboard

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

When you create some sort of meta boxes or possibly a custom options page, sometimes yous demand fields like an image upload push or a file uploader.

Personally for me it is OK if the website settings has a unproblematic input text field where I can identify the image URL, simply information technology is not enough for the regular user, it is not even professional when you create a user interface – that'south what I think.

Image uploader field in WordPress option pages

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

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

ane. Upload Button HTML

Well, actually it is more than PHP than HTML 😁

              if( $prototype = wp_get_attachment_image_src( $image_id ) ) {  	echo '<a href="#" grade="misha-upl"><img src="' . $paradigm[0] . '" /></a> 	      <a href="#" form="misha-rmv">Remove image</a> 	      <input type="hidden" proper noun="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:

Paradigm 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 information technology as a URL if you lot wish – in this case y'all have to modify what is inside your hidden field.
How to go $image_id? If you created the upload button for posts meta boxes, you tin can utilise get_post_meta() part, if for selection pages, then get_option() function etc.
In this case it is not necessary to utilize whatever escaping esc_attr() office with $image_id.

2. JavaScript function

Or to be verbal – jQuery.

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

              jQuery(function($){  	// on upload push click 	$('torso').on( 'click', '.misha-upl', function(due east){  		e.preventDefault();  		var button = $(this), 		custom_uploader = wp.media({ 			title: 'Insert image', 			library : { 				// uploadedTo : wp.media.view.settings.mail service.id, // adhere to the current post? 				type : 'image' 			}, 			button: { 				text: 'Use this image' // push button characterization text 			}, 			multiple: false 		}).on('select', part() { // information technology besides has "open up" and "close" events 			var attachment = custom_uploader.state().get('selection').offset().toJSON(); 			push button.html('<img src="' + attachment.url + '">').side by side().testify().next().val(attachment.id); 		}).open(); 	 	});  	// on remove push button click 	$('body').on('click', '.misha-rmv', function(e){  		e.preventDefault();  		var button = $(this); 		push button.adjacent().val(''); // emptying the hidden field 		button.hibernate().prev().html('Upload image'); 	});  });

Where to insert the code? I recommend you to create an empty .js file and add information technology in that location, we are going to enqueue it in the adjacent step. Or you tin also add together it to admin_footer action hook.

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

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

              add_action( 'admin_enqueue_scripts', 'misha_include_js' );  office misha_include_js() {  	// I recommend to add together boosted 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 information technology. 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 full of fourteen years of feel, oh my gosh. About of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Demand some programmer help? Contact me

Follow me on Twitter

Babin Suble1994