Display Media Uploader in Own Plugin on WordPress 3.5

Question

Only Uploader

below a example code, works only on post edit page. If you will use also on other page, then include the function wp_enqueue_media(), see the next headline.

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;
  });

});

Short explanation of Media Manager

At first include the relevant scripts, use the core function: wp_enqueue_media();
The function set up all the relevant settings, localizes menu text, and loads in all the appropriate javascript files.

You can add custom script via wp_enqueue_script().
```
// Also adds a check to make sure `wp_enqueue_media` has only been called once.
// @see: http://core.trac.wordpress.org/ticket/22843
if ( ! did_action( 'wp_enqueue_media' ) )
    wp_enqueue_media();
```
Add also a default script for custom header: wp_enqueue_script( 'custom-header' );
This creates an image selection frame, and ties it to an interface element, for example a button or link. It then calls a url or our choice with the selected image id. This is the same script that is used when selecting theme custom header images.

Add the button to media manager:

<?php
$modal_update_href = esc_url( add_query_arg( array(
    'page'     => 'my_media_manager',
    '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
), admin_url( 'upload.php' ) ) );
?>

<p>
<a id="choose-from-library-link" href="#"
    data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
    data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
    data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
</a> |
</p>

Define Action Function
last, you need to add in some code for processing the image id that we will pass to the data-update-link url.

// Add to the top of our data-update-link page
if ( isset($_REQUEST['file']) ) { 
    check_admin_referer( 'my_media_manager_options' );

        // Process and save the image id
    $options = get_option( 'my_media_manager_options', TRUE );
    $options['default_image'] = absint( $_REQUEST['file'] );
    update_option( 'my_media_manager_options', $options );
}

Sources and hints:

Related Posts:

Leave a Comment Cancel reply