Need Blog Updates?

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 450x263 Add Multiple Image Upload Button using WordPress Uploader in Theme

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>
<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>
<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" />
</div>

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

Multiple Image Upload Buttons 450x114 Add Multiple Image Upload Button using WordPress Uploader in Theme

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() {
jQuery('html').addClass('Image');
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');
jQuery('#'+formfield).val(fileurl);
tb_remove();
jQuery('html').removeClass('Image');
} else {
window.original_send_to_editor(html);
}
};
});

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_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', ###ADD JAVASCRIPT LOCATION HERE###/custom_uploader.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
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 450x70 Add Multiple Image Upload Button using WordPress Uploader in Theme

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

We are ready, Just Say it!

If you have any doubt or a feedback, 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!

8 Comments

{ read them below or add one }

ruth May 22, 2012 at 1:39 pm

Hi..
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

Reply

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. :D

Reply

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?

Reply

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

Reply

Ö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.

Reply

Vinawap May 8, 2013 at 3:39 pm

Add

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

Not conflict with “Add media”

Reply

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

Reply

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

    Leave a Comment

    Previous post:

    Next post:

    Contact Aky




    Yes, I agree that all information above is valid.