adding a button to the media uploader

Question

I am writing a plugin for Wordpress and am wondering how to add an extra button to the media uploader that says something like "add to album". I can't seem to find info on how other developers have managed to get this done. Thanks :)

Answer 1

When i needed to do something similar i used the admin_print_scripts-media-upload-popup hook to add my own js/Jquery code to insert a button and handled it's click event with ajax.

something like this:

add_action('admin_print_scripts-media-upload-popup','add_my_media_button');
function add_my_media_button(){
?>
<script>
jQuery(document).ready(function() {
    //loop over all attachments
    jQuery(".savesend").each(function(i,v){
        if (jQuery(this).next().attr('id') != ""){
            //get attachment id
            var att_id = jQuery(this).next().attr('id');
            att_id = att_id.replace("send[", "");
            att_id = att_id.replace("]", "");
            //insert button
            jQuery(this).append('<a href="#" class="button add_to_album" rel="'+ att_id +'" id="add_to_album['+att_id+']" name="add_to_album['+att_id+']">add to album</a>');
        }
    });

    //add handler for click
    jQuery(".add_to_album").live("click", function(){
        //do  your thing here
        alert("add to album click");
    )};
)};
</script>
<?php
}

Answer 2

I managed to get it done this way:

Adding JS to the media uploader:

function mediabutton(){

    wp_register_script( 'mediabutton', ''.WP_PLUGIN_URL.'/magic-gallery/js/mediabutton.js', null, null);
    wp_enqueue_script( 'mediabutton');

}

add_action('admin_print_scripts-media-upload-popup','mediabutton'); // Adding insert button

And then using this JS:

jQuery(document).ready(function() {

    jQuery('<a href="#" id="insert_gallery" class="button">Return to gallery</a>').insertAfter('.ml-submit');   

    jQuery('#insert_gallery').live('click',function() {

        self.parent.tb_remove(); // This closes the thickbox

    });

});

Then I hooked into tb_close like this:

tb_remove = function () { 

    // Your code here
    alert('closing thickbox');

    // Original tb_remove code
    jQuery("#TB_imageOff").unbind("click");
    jQuery("#TB_closeWindowButton").unbind("click");
    jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').trigger("tb_unload").unbind().remove();});
    jQuery("#TB_load").remove();

    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6

        jQuery("body","html").css({height: "auto", width: "auto"});
        jQuery("html").css("overflow","");

    }

    jQuery(document).unbind('.thickbox');

    return false;
}

Answer 3

Or you can add a new tab, containing whatever you want .

<?php
function my_media_menu($tabs) {
$newtab = array('tabname' =&gt; __('TextInMenu', 'yourname'));
return array_merge($tabs, $newtab);
}
add_filter('media_upload_tabs', 'my_media_menu');
?>