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 withwp_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 useget_post_meta()
function, if for option pages, thenget_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
Hi, it’s possible upload multiple image and save an array in a metadata field, like the most popular real estate site?
Hi,
first of all – uncomment line 19 in JS code :)
Hello Misha, thanks for your answer.
You’re using your scripts to manage the image gallery of a site of a real estate agency. I have two questions to ask yourself:
you can after you upload the images to manage them in administration, one by one? Now it is only seen her picture and I have no chance to toglierne or add, then if I click on “remove image” takes it from me by the administration but not from the site
In the plugin there are other features?
Thank you.
Hello,
Hmm, strange… I’m not sure that there is a plugin but you can contact me and I will help you.
frame is not defined while using multiple image uploading
Please describe me what you did.
frame is not defined message showing in console.
You just set
multiple
parameter to true, right? Is that all?yes.
for selecting multiple image.
and in this code (
), i cann’t see where the
defined ?
After turning on multiple attribute you should change the other code as well.
console.log()
should help you with that.replace the keyword
from
but you code not works. how can you solve this
How do I see what the link in the image is?
It is
$image_attributes[0]
in Step 3.I need the image url in a shortcode, can I use get_meta to see the value of the metabox?
Yes, you can use
get_post_meta()
to obtain the attachment ID (metabox value), after that usewp_get_attachment_image_src()
to get URL by the image ID.hey, using this method, do the images get attached to a post? via a meta box….
Not just an id in the post meta, but actually get attached to the post.
Hi Eric,
now yes, I’ve just added some code here (lines 36-37). Please let me know if it works for you.
Hey Misha,
Great tutorial, though I’m stuck with one feature. After altering the “multiple: true” variable how do I then display an extra upload button on the posts admin page.
Do I just duplicate some part of the misha_image_uploader_field function for each uploader I need or is it something more complicated?
Someone already asked something similar above but the question and answers didn’t really help.
Thanks again.
Hi Robert,
multiple:true
just should allow the multiple image selection in popup. After activating this option you can try to add in onselect event something like this.i use it in my plugin . when i click on Upload image button it not works. Js file enqueued corectly. but not works. Help me
Are there any errors in your browser console?
i get warnning :
. But use your code to enqueue the js
thanks Misha. actually i have a mistake. you used enqueue path of theme folder. so i used plugin folder and it works fine.
Now you please help me a little that for the
second_featured_img
meta key what function i use to get this attachment’surl
or image object to use it in any template.The attachment ID is stored in post meta. So, you can use
get_post_meta()
to get attachment ID.After that any attachment function can help you –
wp_get_attachment_url()
orwp_get_attachment_image_src()
.thanks misha.
It works fine for single image upload. but for multiple image upload it stores only the first attachment id as meta key value, not any array of ids. how i store multiple ids in wp_post_meta table
I didn’t make it work for multiple uploads yet. Sorry.
Then why you give the code in js for multiple upload?
When I published this post, it worked, but now – it doesn’t. I suppose it just requires some small refinements.
Thanks Misha a lot.
Actually I made multiple images uploader for image gallery purpose upgrading your code.it works very fine in latest version of wordpress and its credit goes to you.
Ok, great!
I’m glad you’ve figured it out.
hi misha i have error in your script please help
my images cant loading after adding your script
Hi Nazim,
it is not enough information for me to help you.
multiple images cants dispaly after selecting multiple images
read comments, it was discussed many times
Hi,
Nice Tutorial post but it’s for just single image upload. In post you have not mention how to display uploaded image on theme pages.
Please write about how to upload multiple images dynamically as you shown in first image of client site.
That would be great.
Waiting for your updated guided post.
Thanks
Hi,
Ok, maybe I will publish a post about it later.
Hi Misha,
Thank you for this tutorial.. it is very useful. i have tried this a lot.. thanks it works successfully..
hi,
This is very helpful tutorial. Thanks a lot, I have a request to you can you please upload any video tutorial for multiple images upload.
Hi,
I will.
How show ? in front page ?
I do not recommend to use this uploader outside the admin area. Or do you mean the dashboard?
Hi
Thank you for sharing your knowledge with us all . I am very grateful. I would like to add this to the woo-commerce products quick edit as well . Is this possible?
Thank you
Andwit
Hi,
Yes, sure, here is the tutorial. 🙃
nice tutorial, but after uploading the image how to use this image on frontend?
Thank you!
You can get the image by its ID with
wp_get_attachment_image_src()
function.Many thanks for the reply. Can you please demonstrate an example. Say I want to use the image in header.php file.
Sure,
Thanks ! IT was very useful
When I click on the update button, it creates infinite entries in the database
It shouldn’t. You’re doing something wrong.
The problem is in:
Hi dear Misha
How can i use this code for video?
Hi Hossein,
Hmmm.. not sure how to describe it shortly. First of all you have to use
wp_get_attachment_url()
instead ofwp_get_attachment_image_src()
in Step 3.3.Thanks Misha
I use your code for video by some minor changes and it worked correctly.
Thanks!
Thank you very much helped me a lot
Clear and concise
Still waiting for the multi-upload version..