Create a gist now

Instantly share code, notes, and snippets.

Draft plugin example to add a javascript menu into the WP3.5 Media Library popup. Answer to this Wordpress stackexchange question : http://wordpress.stackexchange.com/questions/76980/add-a-menu-item-to-wordpress-3-5-media-manager/
// for debug : trace every event
/*var originalTrigger = wp.media.view.MediaFrame.Post.prototype.trigger;
wp.media.view.MediaFrame.Post.prototype.trigger = function(){
console.log('Event Triggered:', arguments);
originalTrigger.apply(this, Array.prototype.slice.call(arguments));
}*/
// custom state : this controller contains your application logic
wp.media.controller.Custom = wp.media.controller.State.extend({
initialize: function(){
// this model contains all the relevant data needed for the application
this.props = new Backbone.Model({ custom_data: '' });
this.props.on( 'change:custom_data', this.refresh, this );
},
// called each time the model changes
refresh: function() {
// update the toolbar
this.frame.toolbar.get().refresh();
},
// called when the toolbar button is clicked
customAction: function(){
console.log(this.props.get('custom_data'));
}
});
// custom toolbar : contains the buttons at the bottom
wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
initialize: function() {
_.defaults( this.options, {
event: 'custom_event',
close: false,
items: {
custom_event: {
text: wp.media.view.l10n.customButton, // added via 'media_view_strings' filter,
style: 'primary',
priority: 80,
requires: false,
click: this.customAction
}
}
});
wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
},
// called each time the model changes
refresh: function() {
// you can modify the toolbar behaviour in response to user actions here
// disable the button if there is no custom data
var custom_data = this.controller.state().props.get('custom_data');
this.get('custom_event').model.set( 'disabled', ! custom_data );
// call the parent refresh
wp.media.view.Toolbar.prototype.refresh.apply( this, arguments );
},
// triggered when the button is clicked
customAction: function(){
this.controller.state().customAction();
}
});
// custom content : this view contains the main panel UI
wp.media.view.Custom = wp.media.View.extend({
className: 'media-custom',
// bind view events
events: {
'input': 'custom_update',
'keyup': 'custom_update',
'change': 'custom_update'
},
initialize: function() {
// create an input
this.input = this.make( 'input', {
type: 'text',
value: this.model.get('custom_data')
});
// insert it in the view
this.$el.append(this.input);
// re-render the view when the model changes
this.model.on( 'change:custom_data', this.render, this );
},
render: function(){
this.input.value = this.model.get('custom_data');
return this;
},
custom_update: function( event ) {
this.model.set( 'custom_data', event.target.value );
}
});
// supersede the default MediaFrame.Post view
var oldMediaFrame = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
initialize: function() {
oldMediaFrame.prototype.initialize.apply( this, arguments );
this.states.add([
new wp.media.controller.Custom({
id: 'my-action',
menu: 'default', // menu event = menu:render:default
content: 'custom',
title: wp.media.view.l10n.customMenuTitle, // added via 'media_view_strings' filter
priority: 200,
toolbar: 'main-my-action', // toolbar event = toolbar:create:main-my-action
type: 'link'
})
]);
this.on( 'content:render:custom', this.customContent, this );
this.on( 'toolbar:create:main-my-action', this.createCustomToolbar, this );
this.on( 'toolbar:render:main-my-action', this.renderCustomToolbar, this );
},
createCustomToolbar: function(toolbar){
toolbar.view = new wp.media.view.Toolbar.Custom({
controller: this
});
},
customContent: function(){
// this view has no router
this.$el.addClass('hide-router');
// custom content view
var view = new wp.media.view.Custom({
controller: this,
model: this.state().props
});
this.content.set( view );
}
});
<?php
/*
* Plugin Name: Custom media menu
* Description: Adds a custom menu in WP3.5 Media Popup
* Author: Fabien Quatravaux
* Version: 1.0
*/
add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
wp_enqueue_script('custom', plugins_url('custom_media_menu.js', __FILE__), array('media-views'), false, true);
}
add_filter('media_view_strings', 'custom_media_string', 10, 2);
function custom_media_string($strings, $post){
$strings['customMenuTitle'] = __('Custom Menu Title', 'custom');
$strings['customButton'] = __('Custom Button', 'custom');
return $strings;
}
?>
@Cyberek
Cyberek commented Feb 21, 2013

Hello. It is a nice part of something to get started with.
On http://wordpress.stackexchange.com/questions/78881/wordpress-3-5-media-manager-add-a-button i Have puted a request for help in doing something simmilar, but still diffrent - instead of adding new "left" menu item - the request is for help with adding aditional two buttons to standard view: insert media -> add files. Maybe with Your knowledge You could help somehow? Thanks in advice.

@ClassANerd

Hey, this looks like a great starting point!

I'm very new to things like js (and therefore Backbone.js) though I am beginning to understand the basics ... but, unfortunately I don't have time in my current project to try and learn this now.

Was wondering if you could look over my Stack Overflow question (http://wordpress.stackexchange.com/questions/130585/customizing-the-3-5-add-media-popup-backbone-js) and tell me what I might be doing wrong / how to customize your code to better fit my needs until I have time to learn this stuff for myself.

Thanks for your time / any help you can offer.

@josheby
josheby commented Mar 4, 2016

I am seeing an issue where when I click on the new menu item in the media library, the view doesn't appear to actually display. It just displays the previous section tha twas being viewed. I have poked around with the code for a while, but being new to backbone.js I am not certain what I am missing. Have you seen this issue with your example by chance?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment