Learn How To Create Multipule WordPress 3.5 Media Uploaders In Theme Options

UBL Designs Blog

HOW TO CREATE MULTIPULE WORDPRESS 3.5 MEDIA UPLOADERS IN THEME OPTIONS

Just recently we have been having a few people ask about the new WordPress media uploader and how to create one from within the theme options, custom meta data etc etc.

Please bare in mind that this tutorial is for people who know how to create basic theme options or are using an old version of the media uploader and want to change it for the new ones.

First thing is first, ill show you how the html side should look
<p>
 
<input id="image1" name="image1" type="text" value="" /><input class="upload_image_button" id="_btn" type="button" value="Upload" />
 
<input id="image2" name="image2" type="text" value="" /><input class="upload_image_button" id="_btn" type="button" value="Upload" />
 
<input id="image3" name="image3" type="text" value="" /><input class="upload_image_button" id="_btn" type="button" value="Upload" />
 
</p>

As you can see we have 3 all all thats changed is the id and name have different names.

Now all we need to do is add some javascript for the magic

Create a jquery file called adminjs.js and input this code

jQuery(document).ready(function(){
 
 jQuery('.upload_image_button').click(function(){
 
 var textfieldid = jQuery(this).prev().attr("id");
 
 wp.media.editor.send.attachment = function(props, attachment){jQuery('#' + textfieldid).val(attachment.url);}<p></p>
 wp.media.editor.open(this);
 return false;
 
  });
 
});

Basically this is calling the media uploader when the upload_image_button is clicked.

It then asks for the previous text fields id.

Then the the magic happens, after you select the image of your choice it then sends the url to your text field.

But none of this is even worth anything unless you call the javascript file you have just created

Go to your functions.php file and insert this bit of code in and now you have a working multiple WordPress 3.5 Media Uploader.

function multiple_media_upload_js() {
 
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', TEMPPATH .'/ThemeFunctions/adminjs.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
 
}
 
function multiple_media_upload_css() {wp_enqueue_style('thickbox');}
 
add_action('admin_print_scripts', 'multiple_media_upload_js');
add_action('admin_print_styles', 'multiple_media_upload_css');

Now that concludes this tutorial, if you liked this and got it to work on your WordPress site, please share using the share buttons below :)

Comments

avatar

Azad 10 Aug, 2013

Hi I tried the above but it doesn't work. Can u pls explain in detail. Thx

avatar

Admin 10 Aug, 2013

Sorry but these type of things are hard to explain, within the start it does say that if you are not familiar with theme options etc then you may want to know about these first. I cant explain without knowing anything about your theme and how its developed. This code is what we use within our themes we create and works fine if implemented correctly. Thanks UBL

avatar

clipping path photoshop 19 Aug, 2013

Sounds hearing great and excellent, multiple WordPress media uploads in theme idea, design knowledge, and interest sides are superb. Hope it will help to improve to us to work with WordPress as soon as possible and will be a great design theme.

avatar

Anon 2 Sep, 2016

Sorry I realise this is super old, but you have an error in your js code with an extra paragraph tag at the end of line 7.

avatar

UBL Designs 23 Aug, 2017

Thanks for noticing, I will amend that soon.

Comments are now closed for this post... – UBL Designs
TOP