WordPress 3.5 is just released with a number of major changes. The one I love most is HiDPI display support, WordPress looks so beautiful on my MacBook Pro Retina display. Besides, after the update was released I considered upgrading my StagFramework to the WordPress 3.5 standard, going ahead I implemented media uploader and color picker along with a couple of new functions in WP 3.5.

So as you all know that WordPress has got a new media uploader so why not to use it our theme options, WordPress theme developer would be happy working with this because it has got less hassle than previous media uploader; you don’t need to do any enqueue any script like we did before wp_enqueue_script('media-upload');. So let’s go ahead and see how can we achieve this.

I assume you have following code for uploader, that’s what I have used.

<div class="uploader">
  <input type="text" name="settings[_unique_name]" id="_unique_name" />
  <input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
</div>

Once we have code above now let’s write some jQuery for upload button to work.

jQuery(document).ready(function($){
  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {
    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');
    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment){
      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };
    }

    wp.media.editor.open(button);
    return false;
  });

  $('.add_media').on('click', function(){
    _custom_media = false;
  });
});

Bingo! We are done here. As you click on upload button you will see the new media uploader. If you want to play around the attachment, you can just do a console.log(attachment) or alert(attachment).

Meanwhile, if you come up with any better solution let me know in the comments.

Above code snippet works on post edit page only, to make it work elsewhere you need to use wp_enqueue_media(); in your theme. Thanks to daviedR for correcting me on this.

Comments

  • daviedR

    Hi Ram Ratan,

    Thanks for this small tutorial. I have done everything according to your tutorial, however an error occurs.

    Uncaught TypeError: Cannot read property ‘editor’ of undefined

    Can you help me with this?

    • http://twitter.com/mauryaratan Ram Ratan Maurya

      Can you make sure, you WP Admin source code has something similar to this?

      If yes try doing console.log(wp);. WP media editor vars are loaded by default.

      • daviedR

        Hi, I got something like this,

        It missed a lot of scripts than yours. What registered scripts have you enqueued using wp_enqueue_script?

        • http://ramratanmaurya.com/ Ram Ratan Maurya

          Please view the source while editing the post, not on dashboard.

          • daviedR

            No, I did it in my own option framework page. I tried to enqueue ‘plupload-handlers’ and now the source code has the exact line you wrote above. however it still goes to the same error, ‘wp’ variable on javascript doesn’t have ‘media’

          • daviedR

            It turns out I need to call wp_enqueue_media() function in my functions.php. Otherwise it won’t work. Thanks Ram!

          • http://ramratanmaurya.com/ Ram Ratan Maurya

            I just checked it never worked on theme options page, with code in the article it will only work while editing the post. wp_enqueue_media(); does the trick for theme options page. Thanks for this one, will update the article shortly.

          • http://twitter.com/chapterthemes Alex

            Hi!

            I’m trying it on a custom options page and i’ve loaded the wp_enqueue_media(); but the media still won’t open.. am i missing something?

          • http://twitter.com/chapterthemes Alex

            Well, got it working now! I used another script which was working only on edit post screens but with the same one here it works on custom pages as well.

          • http://ramratanmaurya.com/ Ram Ratan Maurya

            Great.

          • Tai

            where do you put wp_enqueue_media??? i’m tryin to put a upload fom on the category edit screen thx

          • http://mauryaratan.me/ Ram Ratan Maurya

            All you have to do is to use admin_enqueue_scripts() function and add wp_enqueue_media() into that. Here’s an example of how to do that – http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts#Example:_Target_a_Specific_Admin_Page.

            Let us know if you have any more questions. Thanks.

          • hafizero

            If this never work on theme option page, you should change this article title to something else…just sayin..

          • http://mauryaratan.me/ Ram Ratan Maurya

            Notice the last paragraph of the article where its clearly mentioned that it’s required to use wp_enqueue_media();.

  • http://themoonwatch.com/ Nikola Nikolov

    Note that this method has one pitfall(when used on edit screens mainly) – since you restore the original handler for “wp.media.editor.send.attachment” after you send the first attachment, you will have a bug in the following situation:

    – User clicks on the button to open media
    – The user then decides that he’s not going to insert an image to your option and closes the media pop-up without choosing any media
    – The user then proceeds to add an image to their post content from the media pop-up
    – He selects the image, changes the settings, clicks the button and your option gets the image
    – User is confused and sad :(

    :)) In order to get around this, I’m trying to hook to the “close” event for the media pop-up(I know there’s got to be a way, I’ve been banging my head with it and haven’t found it yet though). Then you can set a flag variable(like “custom_media”) in your code – when the user clicks on your button, you set the variable to true. In the overriding function you check whether the flag variable is true – if it is, you execute your code, otherwise you execute the original code.

    Like I said the only problem is to find how exactly to hook to the close event… If you have any ideas, I’d love to hear them :)

    • http://ramratanmaurya.com/ Ram Ratan Maurya

      @moon_watch:disqus Thanks for bringing this bug in front, it actually happens. Trying to get it solved, meanwhile if you come up with any solution let me know.

      • http://themoonwatch.com/ Nikola Nikolov

        Hey Ram,

        I’ve been poking around and I finally found a simple enough(and I think safe enough) way to do this. I went from doing all kinds of ugly things(including overriding jQuery’s hide() function in order to intercept the hiding of the media pop-up), but at the end, I just bound a handler for click events on the Add Media button. Here’s a sample code(it’s not exactly the one I use, since it’s adapted to my situation, but it should still work):

        jQuery(document).ready(function($){

        var _custom_media = false,

        _orig_send_attachment = wp.media.editor.send.attachment;

        wp.media.editor.send.attachment = function(props, attachment){

        if ( _custom_media ) {

        $("#"+id).val(attachment.url);

        } else {

        return _orig_send_attachment.apply( this, [props, attachment] );

        };

        }

        $('.uploader .button').click(function(e) {

        var send_attachment_bkp = wp.media.editor.send.attachment;

        var button = $(this);

        var id = button.attr('id').replace('_button', '');

        wp.media.editor.open(button);

        return false;

        });

        $('.add_media').on('click', function(){

        _custom_media = false;

        })

        });

        • http://themoonwatch.com/ Nikola Nikolov

          PP: I have no clue why Disqus messed-up my code highlighting, but also it seems like I can’t actually delete my comment – instead it made it appear as a comment made from a Guest user :?

          • http://ramratanmaurya.com/ Ram Ratan Maurya

            Thanks @moon_watch:disqus for coming up with this. However, above code didn’t work for me. So here is the snippet that works for me :: http://istag.cc/SU6EUw

          • http://themoonwatch.com/ Nikola Nikolov

            I just found a different way to make this work:
            var ed_id = $('.wp-media-buttons:eq(0) .add_media').attr( 'data-editor' ); // Get the proper editor id from the "Add Media" button
            var ed_media = wp.media.editor.get( ed_id ); // Try to get the editor instance
            ed_media = 'undefined' != typeof( ed_media ) ? ed_media : wp.media.editor.add( ed_id ); // If it doesn't exist, create it

            if ( ed_media ) { // If we have a media editor instance, we use it's "open" event
            ed_media.on('open', function(){
            _custom_media = false;
            });
            } else { // If we don't we hook to the "click" event for the "Add Media" button
            $('.add_media').on('click', function(){
            _custom_media = false;
            });
            };

            Props go to this article – http://wordpress.org/support/topic/new-media-manager-closeunload-event?replies=2

            Hope that helps :)

  • http://twitter.com/revaxarts Xaver

    How can I listen to the close event of the upload form. I like to trigger a custom function if no media is selected and the lightbox is just closed (with X, Escape or clicking outside)

  • maharzan

    Great. Thanks. I also wanted to edit the image and go to the Edit Gallery window. Do you know how to do that? Thanks again.

    • http://mauryaratan.me/ Ram Ratan Maurya
    • http://mauryaratan.me/ Ram Ratan Maurya

      Well, it’s possible. Just click on the image you want to edit, you’ll notice ‘Edit image’ in right sidebar, it will open a new tab. There you can edit your changes and after saving it just go back to previous tab and hit ‘Refresh’ in right sidebar and you’re all set.

      • maharzan

        Thanks. That post doesn’t have the edit gallery option. Its about customizing the add media popup (removing other frames). And, its not about individual edit image. I want to behave it like the default Add Media and Edit Gallery buttons.. So, I can click Add Media and upload images, then also click on an ‘edit’ button to get the Edit Gallery window, the one you get when you have a gallery in the post and click Edit on that. I have been looking all over the place but can’t seem to find what triggers it. If you have any idea, please do reply. I will be hunting until then. :)

        • Beejeridou

          I have the same problem…

  • Pingback: 2012 Year in Review - Ram Ratan Maurya

  • JamesBruner

    Fantastic tutorial, I learned something!

  • Arun Kumar

    great tutorials

  • http://www.vincelaw.com.au/ Vince Law

    Thanks for the code.

    I did this for my theme’s options page.

    jQuery(document).ready(function()
    {
    jQuery(‘#mp_logo_image_button’).click(function()
    {
    wp.media.editor.send.attachment = function(props, attachment)
    {
    jQuery(‘#mp_logo_image’).val(attachment.url);
    }

    wp.media.editor.open(this);

    return false;
    });
    });

    Seems to work fine. Sorry if the code above looks messy. How do you insert it nicely in the Disqus comments?

    • M Teguh A Suandi

      This is work for me, thank @vinnydisqus:disqus :)

  • Wee Sritippho

    Trying putting these codes in my theme option, not a success even with wp_enqueue_media().

    BTW where does .stag-metabox-table or .add_media come from?

    • Wee Sritippho

      This is the error from my console:
      Uncaught TypeError: Cannot read property ‘id’ of undefined (load-scripts.php:69)
      Uncaught TypeError: Cannot read property ‘send’ of undefined (themes.php:39)

    • http://mauryaratan.me/ Ram Ratan Maurya

      .stag-metabox-table is the name the button’s class which initiates the uploader. And the property ‘id’ is just an attribute of the same. Your question’s answer relies in the code snippet itself.

      • Wee Sritippho

        Thanks, what about .add_media ? I ask because didn’t see them in the html example that you provide. I just placed your code in my functions.php and changed ‘_unique_name’

        • http://mauryaratan.me/ Ram Ratan Maurya

          It’s the class name of the ‘Add Media’ but on post edit screen.

  • http://twitter.com/cmdtv Brad Zimmerman

    newbie here: I understand that i am adding the button code toa meta box or admin panel, but where am I putting the jQuery code?

    • http://mauryaratan.me/ Ram Ratan Maurya

      Sorry for the delay @twitter-15857957:disqus I didn’t notice your comment. You can put the code in .js file and enqueue it in admin using admin_enqueue_scripts. Refer to WordPress Codex for more info.

  • Alexis Nomine

    Great! Thank you so much! I was going crazy trying tu update my plugin.

  • http://www.facebook.com/rdamery1 Roberto Damery

    I’ve been trying for a while now to add the new wordpress 3.5 uploader to a plugin I am developing. Problem is there is little information out there about it, your post being one of the few helpful posts on the matter. I’ve been trying to use the wp_enqueue_scripts() function to add the necessary scripts to my admin page. However, doing this is breaking my page for some reason. I have also tried using the admin_enqueue_scripts to load the scripts but it keeps breaking simply saying that there is a server error configuration. I was wondering if you could give me some guidance on how to go about using the wp_enqueue_scripts() function?

    • http://mauryaratan.me/ Ram Ratan Maurya

      Hey Roberto Damery,

      Firstly, wp_enqueue_scripts is not a function, it’s an action hook. Correct function is wp_enqueue_script(). Since you need to display scripts in admin you must use admin_enqueue_scripts action hook.

      As per the error, there must be something wrong with your code. In this case, you should try debugging your code.

      Besides, you should read more about enqueuing the scripts in WordPress: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    • http://www.facebook.com/rdamery1 Roberto Damery

      hey Ram, thanks for the fast reply! I had a typo when I tried using the admin_enqueue_scripts action hook but I’ve fixed it now, thanks!

  • http://www.facebook.com/dejan7stosic Dejan Stosic

    Hmmm for some reason i can’t get it work. I’m using WP 3.5.1 and i don’t think that i am missing anything. js script is enqueued, input is there, all classes are properly (re)named. Can you check if you got time if it’s working in 3.5.1? Thanks

    • http://mauryaratan.me/ Ram Ratan Maurya

      Yes it works for me. I’m using the same (more customised and complicated) code for all of my projects.

      Check for any errors in console. And make sure you have wp_enqueue_media(); in your code.

  • Pingback: smartcode | blog | WordPress 3.5 Media Uploader in Meta Box Plugin

  • Avinash Kadaji

    I was looking for a similar and more customizable solution and came across the demo posted by the author of the WP Media Uploader – Dominik Schilling

    https://github.com/ocean90/media-modal-demo.

    Great tutorials that show how you can customize the button text, title and the media upload manager.

  • Bryan Gentry

    I am implementing this on the front end. However, I keep getting this error:

    Uncaught TypeError: Cannot read property ‘editor’ of undefined

    It looks like the wp.editor class is defined in media-models.js, but wp_enqueue_media() does not load this file. So I loaded it manually, but it seems to require variables that get set by other files that also don’t get loaded. Do you know of a way to make wp_enqueue_media() to actually load all the scripts it needs to load?

    • http://mauryaratan.me/ Ram Ratan Maurya

      I just tested the code at my end in a blank theme and it works perfectly for me, I was able to get the media dialog open. There must be something going wrong there, try inspecting a little more. I could look into the issue if you have this site online somewhere.

      • Bryan Gentry

        It’s on localhost.
        wp_enqueue_media() is loading the following scripts: utils.min.js, plupload.js, plupload.html5.js, plupload.flash.js, plupload.silverlight.js, plupload.html4.js, json2.min.js. And that’s it. Does yours load additional scripts automatically?
        I will try this from a fresh installation, as I had run into another problem, too, in that enqueue_script(‘heartbeat’) was not loading heartbeat.js, either. I’ll come back here and share any solution I find.

      • Bryan Gentry

        I have discovered the problem. I had not yet called wp_footer() in the page template I was working on. wp_enqueue_media loads most of its scripts in the footer, so that is why they were not getting loaded.
        Thank you for the great tutorial.

  • Pingback: Wordpress: Media Uploader for Meta Boxes | gorirrajoe

  • Pingback: How To Call WP3.5 Media Library Manager? | Click & Find Answer !

  • Pshtiwan KarDo

    i apply the setps below, but i can’t use it when i click on Upload! how to slove it?
    and i don’t understand wp_enqueue_media(); how to use it ? please if you cloud explain it with example..
    thanks

    • http://mauryaratan.me/ Ram Ratan Maurya

      Just make sure that wp_enqueue_media(); is enqueued on the page that you’re using along with other scripts.

  • Dave

    Great stuff! Thanks! This was very helpful … I was able to adapt this code to work with the WP Types plugin — a great plugin but one that still uses the old thickbox dialog for custom image fields.

  • Pingback: Assignment Bank: with Media Uploads! - CogDogBlog

  • Alex Nitsa

    This is for single image uploader?