I am trying to implement a new tab next to Media Library. I couldn't find solution to implement this. I found an example how to implement a new tab in this link: https://gist.github.com/Fab1en/4586865 However the tab doesn't show up in the modal form triggered by Add Media button. But if I call the media popup for Featured Image or any other custom button the "New Tab" I created shows up. I am really lost here, not sure why those tabs show up in one place and don't in another.

Thank you

enter image description here

  • 2
    Um, take a look at pendingdraft.net/2015/01/intro-to-wp-media and github.com/ericandrewlewis/wp-media-javascript-guide. There might be something in there. I've been wondering the same thing for quite a while.
    – jgraup
    Feb 1, 2016 at 6:07
  • Maybe a filter in the dropdown is better than a new tab, what do you want to show in the new tab?
    – cybmeta
    Feb 1, 2016 at 7:44
  • @cybmeta I would like to add new file upload form different from the one in the first tab.
    – minnur
    Feb 1, 2016 at 7:49
  • 1
    That sound confusing. Do you want two "Upload" tabs? Have you thought in customize the standard "Upload" tab instead of creating a new one? See this question and answers, specially this answer.
    – cybmeta
    Feb 1, 2016 at 8:20
  • 1
    @cybmeta, I recently created something similar with a DropBox uploader. The menus on the right only show when adding to a post. When you're in the regular Media section you only see the top tabs. It made more sense to create an extra uploader UI then try to modify the main screen.
    – jgraup
    Feb 1, 2016 at 16:30

2 Answers 2


It's not a tab but you might be able to get started with an upload button. Check out pre-upload-ui and some actions that follow. Namely pre-plupload-upload-ui and post-upload-ui.

This will add a couple buttons to the 'Upload Files' tab and to 'Media > Add New'.


add_action( 'pre-plupload-upload-ui', 'wpse_20160202_pre_plupload_upload_ui' );
add_action( 'post-upload-ui', 'wpse_20160202_post_upload_ui' );

function wpse_20160202_pre_plupload_upload_ui()
    # see https://core.trac.wordpress.org/browser/tags/4.4.1/src/wp-admin/includes/media.php#L1902

    print '<button onclick="javascript:alert(\'Upload From Dropbox\');" id="db-upload-btn" class="button media-button button-primary button-large" style="margin-bottom:10px;">Upload From Dropbox</button>';

function wpse_20160202_post_upload_ui()
    # see wp-includes/media-template.php

    print '<button onclick="javascript:alert(\'Another Upload From Dropbox\');" id="db-upload-btn" class="button media-button button-primary button-large" style="margin-bottom:10px;">Another Upload From Dropbox</button>';


Adding this here just to show the alternate. media_upload_tabs will help you control which tabs are included in the side and media_upload_{tab} to render the contents using wp_iframe().

add_filter( 'media_upload_tabs', 'media_upload_tabs__tab_slug' );

function media_upload_tabs__tab_slug( $tabs ) {
    $newtab = array ( 'tab_slug' => 'Your Tab Name' );
    return array_merge( $tabs, $newtab );

add_action( 'media_upload_tab_slug', 'media_upload_tab_slug__content' );

function media_upload_tab_slug__content() {
    wp_iframe( 'media_upload_tab_slug_content__iframe' );

function media_upload_tab_slug_content__iframe() {
    <div>tab_slug: Add your content here.</div><?php
  • This is awesome! In fact this is what I was looking for initially! Thank you for sharing this!
    – minnur
    Feb 2, 2016 at 9:01

I manage to solve this problem after many days of research.

For a better understanding, you can check my short video tutorial: https://www.youtube.com/watch?v=LEr-WmVMkAQ

var frame = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = frame.extend({
  initialize: function () {
    frame.prototype.initialize.apply(this, arguments);

    var State = wp.media.controller.State.extend({
      insert: function () {

      new State({
        id: "ademedia",
        search: false,
        title: "Ade Media"

    //on render
    this.on("content:render:ademedia", this.renderAdemediaContent, this);
  browseRouter: function (routerView) {
      upload: {
        text: wp.media.view.l10n.uploadFilesTitle,
        priority: 20
      ademedia: {
        text: "Ade Media",
        priority: 30
      browse: {
        text: wp.media.view.l10n.mediaLibraryTitle,
        priority: 40
  renderAdemediaContent: function () {
    var AdemediaContent = wp.Backbone.View.extend({
      tagName: "div",
      className: "ademediacontent",
      template: wp.template("ademedia"),
      active: !1,
      toolbar: null,
      frame: null

    var view = new AdemediaContent();


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.