Return to Snippet

Revision: 60114
at October 21, 2012 08:29 by FatFolderDesigner


Initial Code
// PHP, adds the appropriate scripts and styles in admin
add_action('admin_print_scripts',array(&$this,'uploader_scripts'));
add_action('admin_print_styles',array(&$this,'uploader_styles'));
public function uploader_scripts(){
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thinkbox');
}
public function uploader_styles(){
    wp_enqueue_style('thickbox');
}

// The html for the button and hidden input for result (super simple)
<input id="backdrop_upload_button" value="Upload/Select Image" type="button" class="button" />
<input type="hidden" name="the_image" id="the_image" value="<?= $settings['the_image'] ?>" />

// The jQuery to open the media uploader and get the response
var $ = jQuery;
// Handels image uploading
$(document).ready(function(){
    $("input#upload_button").click(function(){
        tb_show('','media-upload.php?type=image&post_id=1&TB_iframe=true&flash=0&backdrop=true');
        return false;
    })
    window.send_to_editor=function(html){
        var img = $('<div>'+html+'</div>').find('img').attr('src');
        $('#the_image').val(img);
        tb_remove();
    };
});

Initial URL
http://fatfolderdesign.com/684/wordpress/implementing-the-wordpress-media-uploader-into-your-plugin

Initial Description
It's a 3 part process, first is the PHP that you need to run, which includes the appropriate scripts and styles into the admin header, then you need an html button and input field to put the stored value in, then you need some jQuery to open the popup and get the appropriate information from it (then close it again).

There more information on implementation at the URL.

Initial Title
Intergrating the wordpress media uploader into your plugin

Initial Tags
plugin, wordpress, theme, Development

Initial Language
PHP