How to use WordPress 3.5 Media Uploader in Theme Options

How to use WordPress 3.5 Media Uploader in Theme Options

Ram Ratan Maurya
May 24, 2017
December 13, 2012

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.

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

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.

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’

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.

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

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

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.

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

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?

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

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?

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.

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.

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.