I would like to add new tab to upload manager and inside list images from

theme_folder/images/patterns

I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible.

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Patterns' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo 'Hello content';
}
add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );

to be precise this is where I would like to add a new tab and in that tab I would like to list images from theme folder.

I am aware that media manager JS needs to be rewritten for it but to be honest I dont know where to start. Looks like I need to write completely new template for media manager in order to achieve this.

I went trough all suggestions but seems like no one is reading the question. As advised "I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible."

So for now no one is able to find the solution for this.

I would like to add new tab to upload manager and inside list images from

theme_folder/images/patterns

I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible.

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Patterns' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo 'Hello content';
}
add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );

to be precise this is where I would like to add a new tab and in that tab I would like to list images from theme folder.

I am aware that media manager JS needs to be rewritten for it but to be honest I dont know where to start. Looks like I need to write completely new template for media manager in order to achieve this.

I went trough all suggestions but seems like no one is reading the question. As advised "I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible."

So for now no one is able to find the solution for this.

• uploads
• media

4 Answers 4

This is an old thread but for me still as still as relevant. I have been fiddling and has come up with this code for adding a media tab here, maybe someone want to continue for how the handle content for the tab? :)

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

And then the js file:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};

EDIT: Ok, so. For handling the content i have not found a nice way to do this by wp.media. My current solution are 2 liseners, one for opening the media library and one for clicking in the media router menu;

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($('body').find('.media-modal-content .media-router a.media-menu-item.active')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on('click', '.media-router a.media-menu-item', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});

the function doMyTabContent(); is just something like;

function doMyTabContent() {
    var html = '<div class="myTabContent">';
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

I'm very sure this can be done in a much more delicate way. Whoever reads this and has a better solution, please fill in :-)

According to WordPress Codex you can add custom tab in media uploader like this:

// 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() {
    wp_iframe( 'my_new_form' );
}

// the tab content
function my_new_form() {
    echo media_upload_header(); // This function is used for print media uploader headers etc.
    echo '<p>Example HTML content goes here.</p>';
}

Hope it will help you.

Add Tab / Button within 'Select or Upload Media' Modal of WordPress

jQuery(document).ready(function ($) {
  console.log('Hello, bdkoder!');

  var l10n = wp.media.view.l10n;

  // Extending the MediaFrame.Select prototype to add custom tabs and content
  var frame = wp.media.view.MediaFrame.Select;
  wp.media.view.MediaFrame.Select = frame.extend({
    initialize: function () {
      frame.prototype.initialize.apply(this, arguments);

      var State = wp.media.controller.State.extend({
        insert: function () {
          console.log("Something...");
          this.frame.close();
        }
      });

      this.states.add([
        new State({
          id: "my_tab",
          search: false,
          title: "My Tab"
        })
      ]);

      // On render
      this.on("content:render:my_tab", this.renderMyTabContent, this);
    },
    browseRouter: function (routerView) {
      routerView.set({
        upload: {
          text: l10n.uploadFilesTitle,
          priority: 20
        },
        browse: {
          text: l10n.mediaLibraryTitle,
          priority: 40
        },
        my_tab: {
          text: "My Tab",
          priority: 60
        }
      });
    },
    renderMyTabContent: function () {
      var MyTabContent = wp.Backbone.View.extend({
        tagName: "div",
        className: "my-tab-content",
        template: wp.template("my-tab-template"),
        active: false,
        toolbar: null,
        frame: null
      });

      var view = new MyTabContent();

      this.content.set(view);
    }
  });

  // Add the custom template to the page
  $('body').append('<script type="text/html" id="tmpl-my-tab-template"><h3>My Custom Tab Content</h3><p>This is the content of my custom tab.</p></script>');
});

   function axcoto_genify_media_menu($tabs) {
            $newtab = array('genify'  => __('Axcoto Genify', 'axcotogenify'));
            return array_merge($tabs, $newtab);
            }
            add_filter('media_upload_tabs', 'axcoto_genify_media_menu');

           array('genify' => __('Axcoto Genify', 'axcotogenify'));


        function axcoto_genify_media_process() {
        media_upload_header();
        echo 'hello';
        }
        function axcoto_genify_media_menu_handle() {
        return wp_iframe( 'axcoto_genify_media_process');
        }



 if ( ( is_array( $content_func ) && ! empty( $content_func[1] ) && 0 === strpos( (string) $content_func[1], 'media' ) ) || 0 === strpos( $content_func, 'media' ) )
        wp_enqueue_style( 'media' );