WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Add Multiple Image Upload Button using WordPress Uploader in Theme

by Aky Joe

WordPress core development is real learning and challenging especially when needed for an internal or a client project. I came across to this requirement of adding Media Upload Button in Metabox, while working on a client’s project. Hereby sharing my first Core WordPress Development Tutorial  to Add Multiple Image Upload Button using WordPress Uploader in Theme.

Use Default WordPress Uploader

WordPress Media Upload Box

WordPress Media Upload Box

No doubt, WordPress has an awesome media upload thickbox, in which you can even drag-drop images. In this tutorial we will use default WordPress Uploader to insert link in Metabox. For your ease, I have divided this article into three steps: 1) Multiple Image Upload Button Code, 2) Custom Uploader jQuery Code & 3) Call WordPress Media Upload Function.

Here we go:

Step1: Multiple Image Upload Button Code

It is though easy to implement the code if you are familiar with WordPress Basics. No worries, if you are a beginner, just add below code snippet in functions.php or  custom_function.php file if you are using Thesis Theme.

NOTE: Make sure you take full backup of functions.php file or custom_functions.php file using FTP before modifying the original file or you can also refer to the article about how to safely edit custom_functions.php.

<div style="margin:10px;">
<label style="float:left; margin: 5px 5px 0 0;">Image 1:</label>
<input type="text" id="image_1" name="image_1" value="" style="width: 550px; float:left; margin:0 5px;"/>
<input id="_btn" class="upload_image_button" type="button" value="Upload Image" />
<div style="margin:10px;">
<label style="float:left; margin: 5px 5px 0 0;">Image 2:</label>
<input type="text" id="image_2" name="image_2" value="" style="width: 550px; float:left; margin:0 5px;"/>
<input id="_btn" class="upload_image_button" type="button" value="Upload Image" />
<div style="margin:10px;">
<label style="float:left; margin: 5px 5px 0 0;">Image 3:</label>
<input type="text" id="image_3" name="image_3" value="" style="width: 550px; float:left; margin:0 5px;"/>
<input id="_btn" class="upload_image_button" type="button" value="Upload Image" />

After adding multiple upload image buttons, save the file and you will see something similar to screenshot below:

Multiple Image Upload Buttons

Multiple Image Upload Buttons

Step2: Custom Uploader jQuery Code

Now that our HTML part is ready, its time to do some action. Create a new JS file custom_uploader.js and insert the below code snippet in it.

jQuery(document).ready(function() {
var formfield;
jQuery('.upload_image_button').click(function() {
formfield = jQuery(this).prev().attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
if (formfield) {
fileurl = jQuery('img',html).attr('src');
} else {

Above code will invokes the WordPress Uploader function, so make sure you copy the code very precisely.

Step3: Call WordPress Media Upload Function

Action time, as we will trigger Media Upload Button function en-queuing some default scripts. So, copy/paste the code in functions.php or  custom_function.php file, in case if its Thesis Theme.

NOTE: Make sure you take full backup of functions.php file or custom_functions.php file using FTP before modifying the original file or you can also refer to the article about how to safely edit custom_functions.php.

function joe_admin_scripts() {
wp_register_script('my-upload', ###ADD JAVASCRIPT LOCATION HERE###/custom_uploader.js', array('jquery','media-upload','thickbox'));
function my_admin_styles() {
add_action('admin_print_scripts', 'joe_admin_scripts');
add_action('admin_print_styles', 'joe_admin_styles');

Above code will get Media Upload Box Stylesheet and jQuery files. Don’t forget to insert the location of custom_uploader.js file which we created in Step 2 in line number 4.

Once done, try inserting/uploading files by clicking respective upload buttons use insert into post to fill input field with and you will find similar to screenshot below:

Image Upload Button Demo

Image Upload Button Demo

We’re Done

I hope it wasn’t drain bamaging! Lol!  Its your time to do some action and make the most of this cool development, as you can add Multiple Image Upload Buttons in Gallery Themes or Portfolio Themes.

Any queries for further assistance, kindly use the comment box below for your feedback.

Similar Topics: ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!


{ read them below or add one }

ruth May 22, 2012 at 1:39 pm

I’m having trouble in step 2, the javascript code..where should I insert the js code, before html code or after html code..I’m sorry, I’m new in wordpress

thank you


Aky Joe May 22, 2012 at 3:27 pm

Hey Ruth,

No problem, I am glad to acknowledge your query. As mentioned in Step 2, you are required to create a new file, copy/paste the code in that file and save it as “custom_uploader.js”. Now you can put that file either in Theme Stylesheet Directory or in a Sub directory under Stylesheet Directory, but make sure you make changes accordingly in Step 3 Code line number 4.

Don’t worry, if you are new to WordPress, 6 years back, I was a newbie too. 😀


gabriel castillo July 10, 2012 at 2:43 pm

When I use the image up-loader, the image url does not get populated into the form field. Have you experienced this?


Aky Joe July 10, 2012 at 3:20 pm

Yes, I did experience such bugs initially while testing, but was able to overcome them. Make sure you are using the proper form field id name.
Ps.: Above code is tested and is working properly


Özgür November 25, 2012 at 7:42 pm

Hi Joe
Thanks for your great code.

I am a newbie about wordpress

Can u tell me how can i add this code if i am not using thesis theme.
When i click upload button nothing happens.


Vinawap May 8, 2013 at 3:39 pm


jQuery('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;

Not conflict with “Add media”


Azad August 9, 2013 at 8:20 pm

I used the above code but it is not working. is it because i m not using thesis theme.
Can u pls tell me how to use it in Twenty eleven theme


Aky Joe August 9, 2013 at 8:48 pm

Above code works regardless of any Theme or Framework. Here are the steps below:

  • Simply copy-paste, code snippet from Step 1 & Step 2, in wp-content/themes/twenty-eleven/functions.php.
  • Create Uploader JS file and save it in the theme directory.
  • Further, include the Uploader JS file path in Step 3 Code snippet.
  • Evaluate all the changes made and it should work.
  • Reply

    Madhukar Anand February 2, 2015 at 12:30 pm

    A little changes in above code is function my_admin_styles() to function joe_admin_styles().


    Sunil March 30, 2015 at 12:52 pm

    I have a trouble in admin panel, when I’m clicking on upload image, it’s not working, which means not opening the popup upload image.


    Aky Joe March 31, 2015 at 4:28 pm

    The code is definitely working. There must be something which is missing/skipped in your code. Either try the above steps precisely or you mind dropping us an email along with your code via contact form below.


    Tanvir July 27, 2015 at 6:29 pm

    How I can their link for the front end?


    Max August 19, 2015 at 4:57 pm

    Hi, i have a problem all works good, but images dont get saved. What to do ?


    Max August 19, 2015 at 5:14 pm

    By adding it inside case upload and $field[‘id’] i manage to get images saved. Thing is now, on all fields the same url is saved. Check it out http://pastebin.com/HuWHhdnu


    Aky Joe August 19, 2015 at 5:27 pm

    Make sure that input text fields name="image_upload" should be unique and should be used in corresponding to JavaScript code snippet.


    Max August 20, 2015 at 10:04 am

    I was managed to work this out, but due to bad weather, power went down and i lost the way (tried dozen times with try/error method). Now i cant reproduce the working part. Anywhere now i do have to upload buttons for home team and away team. Home team button works and it saves the image i want. Away team works but it puts images inside home team. Weird thing is if paste url of the image inside away team text box and save it works. Now i need a way so the button for away team puts image inside text-box of away team not the home team.

    My code is short for this so it wont take a lot of time to see it http://pastebin.com/78djwMtp
    On line 39 i renamed name to named and did the same in javascript, ws thinking since their is already name here name=”‘, $field[‘id’], ‘” id=”‘, $field[‘id’], ‘” value=”‘, $meta ? $meta : $field[‘std’], ‘” that it could be a problem.
    I’m not using thesis them if that means something. If i echo the first part again and change image_1 to image_2 and teamlogo1 to teamlogo2, still the same and i get four button uploders and i need only two.

    I just dont have enough knowledge to know how to fix this, so i was hoping that you can help, i am lost totally.


    Soubarna September 27, 2015 at 2:15 pm

    For me the “Upload Image” button is not pop up the image uploader window.
    My codes are as follows
    Form code:
    JS file:


    Gurinder May 18, 2016 at 11:29 pm

    I am using this code in Template page but i unable to open media upload by click upload button its show javascript error “reference error tb_show is not defined image upload” Please help me..


    Gurinder singh May 19, 2016 at 10:32 am

    I am unable to open media uploader by click button i am using Avada theme i put js link in function

    function joe_admin_scripts() {
    wp_register_script(‘my-upload’,’http://caslk.com/brand/wp-content/themes/Avada/custom_uploader.js’, array(‘jquery’,’media-upload’,’thickbox’));
    function my_admin_styles() {
    add_action(‘admin_print_scripts’, ‘joe_admin_scripts’);
    add_action(‘admin_print_styles’, ‘joe_admin_styles’);

    ple telll me here is any wrong.


    Aky Joe May 19, 2016 at 10:02 pm

    Make sure you add the code in specified location of the WordPress Scope. It’s clearly mentioned in STEP #3 above in the article. Once you have added the scripts, test them whether they’re loaded properly in the Wp-Admin Area, without any conflicts.

    If all JS are loaded on the page where you’re adding the Upload Image button, then it shall execute without any issues. The code above is tested only for WP-Admin Dashboard and within the scope of Administrator user.

    Hope it helps!


    Leave a Comment

    Previous post:

    Next post:

    Contact Aky

    Yes, I agree that all information above is valid.

    Simple question, what's...