Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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... –  ungestaltbar Dec 22 '12 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 '12 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. –  Scott Kingsley Clark Jan 16 '13 at 16:34
    
@erezie, can you mark the answer on this as the one provided by Fabien Quatravaux? –  Scott Kingsley Clark Jan 19 '13 at 0:01
add comment

4 Answers

up vote 12 down vote accepted
+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.

share|improve this answer
2  
What is it missing so far? –  kaiser Jan 18 '13 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 '13 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. –  Fabien Quatravaux Jan 18 '13 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. –  Scott Kingsley Clark Jan 19 '13 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. –  Fabien Quatravaux Jan 19 '13 at 21:33
show 2 more comments

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' );
share|improve this answer
1  
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 '12 at 3:11
2  
@Jenny, I think we may count on this filter. Relevant ticket. (:oh, and +1, nice snipett:) –  brasofilo Dec 30 '12 at 23:12
add comment

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!

share|improve this answer
    
+1 Very good one! Keep us informed :) –  brasofilo Dec 30 '12 at 23:01
1  
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 –  Scott Kingsley Clark Jan 15 '13 at 19:21
add comment

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.

share|improve this answer
    
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). –  Fabien Quatravaux Jan 17 '13 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 '13 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. –  Fabien Quatravaux Feb 22 '13 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 '13 at 13:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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