In short:
On a post/page edit.php I want to be able to

  1. click Add media and open the default media uploader
  2. instead of Create Gallery on the left-side menu there is a custom tab.
  3. on this custom tab the user can choose/select custom stuff (e.g.: a custom setting).
  4. the user clicks a button (like Create new gallery) and a shortcode is inserted into the editor


  1. the shortcode can be edited afterwards (like edit gallery)

What I have so far:
I can create the custom tab in the default media uploader and display the content.
How to extend Media Library (WP 4.4)

// add the tab
add_filter('media_upload_tabs', 'my_upload_tab');
function my_upload_tab($tabs) 
  $tabs['mytabname'] = "My Tab Name";
  return $tabs;

// call the new tab with wp_iframe
add_action('media_upload_mytabname', 'add_my_new_form');
function add_my_new_form() {
    call custom scripts and styles
  wp_iframe( 'my_new_form' );

// the tab content
function my_new_form() 
    load all relevant functions
  echo '<p>Example HTML content goes here.</p>';

What I also know is, that I can extend the wp.media.View via backbone.js.
But I'm just beginning to learn / understand backbone.

I also know that you can open a pure media library frame and retrieve the selected image id or url or whatever information the attachment provides through jquery:

var custom_uploader = wp.media({
    title: 'Insert image',
        library : {
            // uncomment the next line if you want to attach image to the current post
            // uploadedTo : wp.media.view.settings.post.id, 
            type : 'image'
        button: {
            text: 'Use this image' // button label text
        multiple: false // for multiple image selection set to true
    }).on('select', function() { // it also has "open" and "close" events 
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $(button).removeClass('button').html('<img class="true_pre_image" src="' + attachment.url + '" style="max-width:95%;display:block;" />').next().val(attachment.id).next().show();
        /* if you sen multiple to true, here is some code for getting the image IDs
        var attachments = frame.state().get('selection'),
            attachment_ids = new Array(),
            i = 0;
        attachments.each(function(attachment) {
            attachment_ids[i] = attachment['id'];
            console.log( attachment );

But when I use this 2nd approach, I'm restricted to all attachment types and I can't insert a shortcode into the editor.
So I figured the first method would bring me closer to my goal.

If anyone has a better approach at hand, please let me know.

If there isn't, the remaining questions are:

  1. How can I present custom data (e.g. from an option) to the Backbone.View?
    do I have to localize a script to achieve this or is this somehow done using a template script?

  2. How can I create a button (or a function, to be precise) that closes the upload-iframe and inserts whatever i want into the editor?
    I know that media_send_to_editor($html) is somehow involved, but i don't know how.

So, has anyone any suggestions or could point me in the right direction?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.