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

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


Premium WordPress Themes & Html Templates From $5
  • Lecia The Responsive Bootstrap WordPress Theme
  • Alfie - Responsive Bootstrap Html Template
  • Alfie The Responsive Bootstrap WordPress Theme
  • Folio - Responsive Photographers Wordpress Theme
  • Folio Photography Responsive Html Theme
  • Moot Responsive Wordpress Theme
  • Moot Responsive Html Theme
  • Moot - Responsive Under Construction Theme
3 Comments
  • Azad

    Azad - 10th Aug 2013 at 1:49am - REPLY

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

    • Admin

      Admin - 10th Aug 2013 at 12:21pm - REPLY

      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

  • clipping path photoshop

    clipping path photoshop - 19th Aug 2013 at 12:38pm - REPLY

    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.

Leave a Comment

You may use these html tags : <b>, <a href>, <i>, <em>, <br>

* required
This is a unique website which will require a more modern browser to work! Please upgrade today!