22

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.

enter image description here

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.

3 Answers 3

9

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 :-)

6
  • thnx for this will look in to it. Old or not it was never solved. and this is exactly what I asked for prntscr.com/kse5yk. Great job!
    – Benn
    Sep 9, 2018 at 17:09
  • did you try combining this wordpress.stackexchange.com/a/190604/67176 and your tab creation ? I'm 99% sure it could work especially if the tabs have same id.
    – Benn
    Sep 10, 2018 at 10:09
  • 1
    Yes, I looked into that first, but I'm not really a fan of the iframe solution that comes with this solution. Recieving image data with iframe messaging. Displaying the content is one thing, but handling actions is another. :) Maybe i'm missing something out.
    – gubbfett
    Sep 11, 2018 at 16:25
  • Hello @Benn just caught up in the wp.media nightmares again. The code i provided above where i do my "doMyTabContent" does only trigger on one event. For example: Load a post, click add featured image and close. After this click add media for the post, and it does not load anything, probably since the wp.media is in a new instance (the tab is still there tho). I'm not sure how to move on here. Have you made any progress regarding adding a tab and inserting media in some way at all? Wanna share some code? :)
    – gubbfett
    Jun 17, 2019 at 17:38
  • @gubbfett did you ever find a solution to this?
    – RaajTram
    Sep 1, 2019 at 6:49
6

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.

1
  • 8
    To be clear, that tab is not added to the top of the modal box, but to the left sidebar. I could not find a way to actually add the tab to the top of the Insert Media tab. I also had issues trying to use the css styles already available because the content is inserted inside an iframe. Which probably means you would need to add your own css to display the images correctly. And just to complete the answer, you could use the php scandir() function to retrieve all items inside the image folder.
    – gdaniel
    Jun 5, 2015 at 16:01
-1
   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' );
3
  • 1
    Your code is full of syntax errors. Please use proper php syntax as the syntax that you are using does not even exists in php. Also, please explain what your code does and how it works. Thank you Jun 5, 2015 at 8:17
  • I had just edited the code. Its working code.Try this code.
    – sarath
    Jun 5, 2015 at 8:28
  • 2
    Please reread my comment, but skip the syntax part. Dumping code is not a quality answer. Please add an explanation to how your code works and what it does Jun 5, 2015 at 9:21

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.