37

How can add a new menu item underneath the "insert From URL" on the left sidebar in the new Wordpress 3.5 Media Manager?

I've been looking at the backbone js and tried my hand at hooking into it with my own JS but without success.

Edit 2: This seems to do the trick:

http://sumtips.com/2012/12/add-remove-tab-wordpress-3-5-media-upload-page.html

It should do for simple stuff, but I guess its also possible to do the same thing in Javascript. Would be nice if there was a tutorial/explanation on how the new media manager internals work.

4
  • what is your new menu supposed to do? Adding a menu item isn't the main problem and you are on the right track, but if your menu is supposed do display anything different from the default views, just with changed setting, Backbone needs a view for your menu item...and thats where I'm stucked as well... Dec 22, 2012 at 22:22
  • clicking on the menu item is supposed to show a different view. Getting the menu item to show up would be a first step
    – erezie
    Dec 23, 2012 at 10:42
  • 1
    Regarding my 150 point bouny: Looking to continue the original poster's aim to use a JS-based method to add a new State menu item below "Insert from URL" and associate a new view in the primary media modal of the Post Editor. Jan 16, 2013 at 16:34
  • @erezie, can you mark the answer on this as the one provided by Fabien Quatravaux? Jan 19, 2013 at 0:01

4 Answers 4

20
+150

OK, I think that I have something that is really close to be an answer:

I put my code in a gist

Here is the result : custom menu screenshot

I built several Backbone object to respect the MVC pattern : the controller.Custom is in charge of doing all the logic, the view.Toolbar.Custom deals with toolbar buttons, and the view.Custom display the inner UI.

10
  • 2
    What is it missing so far?
    – kaiser
    Jan 18, 2013 at 11:55
  • +1 good start! But, yes, instead of we needing to implement this to know what it does, a snapshot would be very handy. And also, pull that line of comment //build an empty view (needs more work) to the content of the Answer.
    – brasofilo
    Jan 18, 2013 at 14:54
  • I have added a screenshot to show the result. The next thing to do now is to implement the view itself that will display HTML components and react to user interaction. Jan 18, 2013 at 16:24
  • This looks cool, that's definitely a start! Worthy of the bounty as is, but feel free to take it to the next level if you feel the need. Jan 19, 2013 at 0:00
  • Thanks for the bounty Scott ! I will definitely dig a bit deeper because I need it for a project at work. I will post my code back here as soon as it will be usable. Jan 19, 2013 at 21:33
10

I'm working on adding a button to the "router menu" (adding something right of "Media Library"), but the system is the same.

<script type="text/javascript">
    jQuery(window).on('load', function() {
        var media   = window.wp.media,  
        Attachment  = media.model.Attachment,
        Attachments = media.model.Attachments,
        Query       = media.model.Query,
        l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
        NewMenuItem;

        jQuery(document).on( 'click', '.insert-media', function( event ) {
            var workflow = wp.media.editor.get();
            var options = workflow.options;
            if( undefined == NewMenuItem ) {
                NewMenuItem = new wp.media.view.RouterItem( _.extend( options, { text: 'New Item!' } ) );
                workflow.menu.view.views.set( '.media-menu', NewMenuItem, _.extend( options, { add: true } ) );
            }

        });
    });
</script>

Now, it doesn't do anything yet. That's the next step!

1
  • 2
    Any luck on this? A JS-based solution is what I'd really like to see, not the iframe PHP solution already noted in the original poster's edit and another answer Jan 15, 2013 at 19:21
7

You can hook into the media_upload_tabs filter to add the tab. This is the method used by the Network Shared Media plugin:

function wpse_76980_add_upload_tab( $tabs ) {
    $newtab = array( 'tab_slug' => 'Tab Name' );
    return array_merge( $tabs, $newtab );
}
add_filter( 'media_upload_tabs', 'wpse_76980_add_upload_tab' );

You can then hook to the media_upload_tab_slug action (where tab_slug is as used above) to display the tab contents:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );
2
  • 2
    This is the old way of adding a tab. Although it is still working but I suspect that WP is moving away from it.
    – Jenny
    Dec 28, 2012 at 3:11
  • 2
    @Jenny, I think we may count on this filter. Relevant ticket. (:oh, and +1, nice snipett:)
    – brasofilo
    Dec 30, 2012 at 23:12
3

I have not a solution, but hints. The strings get from a array. You can filter via hook media_view_strings. The modal box after click is a javascript, build with backbone.js since WP 3.5. See in /wp-includes/js/media-views.js for a solution. Backbone is also new for me and the scripts have many lines of source.

4
  • That was a very nice hint, but I think it falls short. The media.view.settings js var can be tweaked by a php filter to add new tabs, but then those tabs are rendered via an iframe (see createIframeStates method in media-views.js). Jan 17, 2013 at 16:33
  • Maybe you can add a tutorial, gist to your blog o.o. to add a simple link inside the media view and a custom action on click on this link? Your current gist is very complex and have lot of custom actions.
    – bueltge
    Feb 21, 2013 at 9:51
  • Unfortunately, I did not find another simpler way to achieve this. This code is doing only one basic thing : add a custom menu item on the left, with its own content view, toolbar and controller. All this construction is needed to built the views and controller needed by Backbone. But if you have a simpler solution, feel free to fork my gist. Feb 22, 2013 at 10:38
  • Yes, I have see this and also test it, works fine. But I think it was nice, that you create also a gist only for a button or link and a callback funktion inside the default media screen, not a additional part, how in your example.
    – bueltge
    Feb 22, 2013 at 13:56

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.