Is this possible to do?

I love how the new uploader works. I'm guessing it has to do with a jQuery call like the other way did.


This is the code I am currently using

jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
    imageField = $(this).prev('input');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
$('.clear_field').click(function() {
    var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
    return false;

5 Answers 5


To get you started, the basic functions and overrides as far as I know currently.There might be better solutions, but I only had two days with 3.5 yet:

// open modal - bind this to your button
    if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor; 

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.

This is not complete working answer. You have to define and keep track of your input fields by yourself etc.. This just should get you started. If you have more concrete questions, just ask.

And make sure to reassign the original functions when your script is done.

Pulled from comments:

How can I listen to the close event of the lightbox?

// add listener: 
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
  • Thanks! I can't seem to get it to work though. I pasted what I have been using for the old media uploader above, if that helps. Commented Dec 12, 2012 at 18:16
  • Ipstenu and the support team have put together a master list of issues (wordpress.org/support/topic/…) being reported for WordPress 3.5. This thread is not meant to have any user feedback but is a curated thread that quickly highlights the known issues being reported as well as instructions on how to fix the problem.
    – Tara
    Commented Dec 12, 2012 at 20:24
  • How can I listen to the close event of the lightbox? I need to trigger a custom function if someone doesn't choose a new image
    – Xaver
    Commented Dec 13, 2012 at 16:34
  • 3
    // add listener: wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); } Commented Dec 13, 2012 at 22:16

Here is a small tutorial on how to use WP 3.5 media uploader in theme options. That's what I came up with and it works perfect for me. Let me know if you come up with any better solution.

Here is how I have implemented the code in my theme options:

  $('.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', '');
  wp.media.editor.send.attachment = function(props, attachment){
    wp.media.editor.send.attachment = send_attachment_bkp;

  return false;



This code works only on post edit page. To make it work on theme options page you need to add wp_enqueue_media();

  • what if only provide single image selection not multiple? Commented Mar 6, 2015 at 15:06

I'm doing almost the same it's not ready yet but it works:

in the php:

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id

The javascript:

jQuery('#default_featured_image_button').click(function () {
    var formfield = jQuery('#default_featured_image').attr('name');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    // set the url as the value

This will enable you to upload and send the image url (of any size) to the <input> element.
I'm trying to do this as a setting it and it works, Only thig I need now is a reliable way to send the attachment ID to the <input>

  • Thank you sooooooooooooooooooo much!!!! This finally worked after 2 days of desperate hunting for the solution!!! Thanks a ton!!!
    – Devner
    Commented Feb 25, 2013 at 7:24
  • you might wanna take a look at the source code of this in my plugin: wordpress.org/extend/plugins/default-featured-image
    – janw
    Commented Feb 25, 2013 at 9:35

I think @janw has got this one completely right, but I was unable to make one thing work. Jan inserts the media library button using:

do_action( 'media_buttons', 'default_featured_image' );

and then pre-empts the default action using:

jQuery('#default_featured_image_button').click(function () {...

The problem that I ran into is that inserting a media button in this fashion does not assign an id of "default_featured_image_button" to the link. In fact it does not add any id on the inserted link. So this is what I did to get it to work.

I added this line to my meta box callback function just after my input field:

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

I then enqueued my custom jquery file and the thickbox css file, also in my functions.php file, using:

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );

Finally my image-set.js file included the following:

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

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {


        formfield = $(this).prev('input').attr('name');  
        formfield_id = $(this).prev('input').attr('id'); 

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);


            formfield = null;
        } else {

You will note that I used variables to store the name and id of the input field that is just prior to the link that calls the jQuery. In that way this code can be used repeatedly on the same page. You would just need to assign a class to all buttons or use individual id's for the buttons in your jquery as I did. I hope this helps someone as Jan's answer did me.


I know that this is an old post, but I just want to share my findings:

To open the media editor, we call this function


the media editor basically will check for tinyMCE editor (window.tinymce), then Quicktags (window.QTags), to pass the content to.

For my approach to get the content, I assigned window.QTags with a custom object, which has an insertContent() method:

var newObject = {
  insertContent: function(html){
    // to extract the image source

// assign the newObject to window.QTags property
window.QTags = newObject;

Reference: phpxref

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.