WordPress 3.5 Media Uploader: Tips on Using it Within Plugins

Feel the power of new Media manager!
  • Home
  • Articles
  • WordPress 3.5 Media Uploader: Tips on Using it Within Plugins
Share this post and Be Happy!

With the dramatic improvements it introduced to the existing functions and with raising the program’s efficiency, WordPress 3.5 Media Manager is largely evaluated as the biggest improvement to the WordPress core which has ever been developed after the huge release of functionality — custom post-types, custom menus, and the header/background customizations — brought in by 3.0 in 2010.

What makes WordPress 3.5 a milestone is that all fluff of pointless functions and options has been removed as a way to increase overall efficiency, while the remaining functions have been significantly improved.

Before passing on to WP 3.5′s use within plugins, here is a short overview of the things improved in its interface.

Media Manager

With the words «Upload/Insert» and an icon of a camera gone, the toolbar sports a cleaner interface, free of button outlines or shadings. Clicking of the Add Media button leads to a new image experience of the full-screen drag-and-drop zone, with everything within the browser viewport becoming a drop zone.

Add media button on admin editor

The new uploader has been added a drop-down menu for different media with a nice addition that allows to add a gallery with any image in the library rather than limiting it only to the images attached to a post/page (unless you had the shortcode edited), like in previous versions. This new 3.5 requires no such editing of shortcode, allowing to freely include and exclude images attached to the post, as well as those in the library.

WP 3.5 Within Plugins

Also you can read an article about old WordPress Media Library integration

Here is a solution for those who don’t like the new 3.5 media uploader interface with a sidebar and other elements that may be confusing and not relevant when you want to add images to fields inline.

Fist of all we need to create some file like functions.php:

Let’s write sample HTML code of button to be clicked:

You can simplify your uploader and get rid of these excessive elements by creating a custom frame like this (lenslider.media.uploader.js):

To handle multiple files:

1. set multiple to true:

2. add some tweaked handling on select:

Well done!

Share this post and Be Happy!
About The Author

Hi, I'm Igor, one of many PHP/WordPress developers. I'll try to share here WordPress news and development ideas/hacks here. I'll be glad if you share my texts via socials. Have a good day!

5 comments on «WordPress 3.5 Media Uploader: Tips on Using it Within Plugins»

  • Alex July 3, 2013 at 11:01 — Reply

    Hi, nice tutorial. I was playing with the new media manager and it is nice, but I have an issue for which I can’t find the solution. I want to figure out how to enable multiple image selection with out holding the ctrl key. If you have a hint it will be awesome. Thx.

  • Rabin July 10, 2013 at 13:24 — Reply

    Thanks Igor! With this tutorial now I can use WordPress Media Manager in my plugins. But there is something I(I can’t get jquery right) still can’t do.
    It would be great if you update this tutorial with
    How to get the URLs of files uploaded or selected a text area.

  • Rabin July 10, 2013 at 13:38 — Reply

    I got it $(‘.my_input_class’).val(attachment.url); did that

  • Nabeel July 15, 2013 at 16:32 — Reply

    thanks Igor, it helped me a lot and I was looking for something like this tutorial for long time, I implemented the code and works file, but I have a problem that after selecting the image item and used it, how to make it selected when the user reopen the media uploader ?


    $button.on('click', function(e){
    // prevent default behavior
    e.preventDefault();
    if ( typeof file_frame != 'undefined' ) {
    file_frame.close();
    }

    // create and open new file frame
    file_frame = wp.media({
    //Title of media manager frame
    title: 'Select an Image',
    library: {
    type: 'image'
    },
    button: {
    //Button text
    text: 'Use Image'
    },
    //Do not allow multiple files, if you want multiple, set true
    multiple: false,
    });

    //callback for selected image
    file_frame.on('select', function() {
    var selected = [];
    if ( is_multiple ) {
    // multiple images selected
    var selection = file_frame.state().get('selection');
    selection.map(function(file) {
    selected.push(file.toJSON());
    });
    } else {
    // single image
    selected.push(file_frame.state().get('selection').first().toJSON());
    }

    // loop through selected images
    for (var i in selected) {
    console.log(selected[i]);
    }

    });

    // open file frame
    file_frame.open();
    });

Leave a Reply

Your email address will not be published. Required fields are marked *


9 + four =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

© 2013 LenSlider. All rights reserved.