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 :
// for debug : trace every event
/*var originalTrigger =; = function(){
console.log('Event Triggered:', arguments);
// custom state : this controller contains your application logic ={
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
// called when the toolbar button is clicked
customAction: function(){
// custom toolbar : contains the buttons at the bottom ={
initialize: function() {
_.defaults( this.options, {
event: 'custom_event',
close: false,
items: {
custom_event: {
text:, // added via 'media_view_strings' filter,
style: 'primary',
priority: 80,
requires: false,
click: this.customAction
}); 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 this, arguments );
// triggered when the button is clicked
customAction: function(){
// custom content : this view contains the main panel UI ={
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
// 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', );
// supersede the default MediaFrame.Post view
var oldMediaFrame =; = oldMediaFrame.extend({
initialize: function() {
oldMediaFrame.prototype.initialize.apply( this, arguments );
id: 'my-action',
menu: 'default', // menu event = menu:render:default
content: 'custom',
title:, // 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{
controller: this
customContent: function(){
// this view has no router
// custom content view
var view = new{
controller: this,
model: this.state().props
this.content.set( view );
* 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;

Hello. It is a nice part of something to get started with.
On 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.


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 ( 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.


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