Tag: wordpress development

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

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.

[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>

[/php]

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

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.

[php]

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);
}
};
});

[/php]

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.

[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’);
[/php]

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:

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.