How to use WordPress 3.5 Media Uploader in Theme Options

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.

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.
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)
- http://themoonwatch.com/ Nikola Nikolov
  
  Hi Xaver,
  
  I just found this topic – http://wordpress.org/support/topic/new-media-manager-closeunload-event?replies=2 and tried the solution described there and it works fine :) .
  
  Please try this and see if it works for you as well.
  - http://twitter.com/revaxarts Xaver
    
    Hi Nikola!
    
    Thanks, That does the trick! works fine!
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
  
  @maharzan:disqus this post has a solution for that : http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
- 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

Blog Entries

Thoughts and Writings about everything web

How to use WordPress 3.5 Media Uploader in Theme Options