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 :)