Adding your own filter to the WordPress Media Library - Cobbled Code

Yay! A nice short and helpful intro by Daniel Bachhuber on how to add a custom taxonomy dropdown filter to a WordPress media view.

I find good examples of working with the not-so-new Media Uploader quite hard to come by. This modified version of the example adds an “Uploaded to this post” filter for a custom media view. Really helpful when wading through lots of uploads.

(function(){
	/**
	 * Create a new MediaLibraryUploadedFilter.
	 */
	var MediaLibraryUploadedFilter = wp.media.view.AttachmentFilters.extend({

		id: 'media-attachment-uploaded-filter',

		createFilters: function() {

			var filters = {};

			filters.all = {
				// Todo: String not strictly correct.
				text:  wp.media.view.l10n.allMediaItems,
				props: {
					status:  null,
					type:    'image',
					uploadedTo: null,
					orderby: 'date',
					order:   'DESC'
				},
				priority: 10
			};

			filters.uploaded = {
				text:  wp.media.view.l10n.uploadedToThisPost,
				props: {
					status:  null,
					type:    null,
					uploadedTo: wp.media.view.settings.post.id,
					orderby: 'menuOrder',
					order:   'ASC'
				},
				priority: 20
			};

			filters.unattached = {
				text:  wp.media.view.l10n.unattached,
				props: {
					status:     null,
					uploadedTo: 0,
					type:       'image',
					orderby:    'menuOrder',
					order:      'ASC'
				},
				priority: 30
			};

			this.filters = filters;
		}
	});

	/**
	 * Extend and override wp.media.view.AttachmentsBrowser
	 * to include our new filter
	 */
	var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
		createToolbar: function() {

			// Make sure to load the original toolbar
			AttachmentsBrowser.prototype.createToolbar.call( this );

			this.toolbar.set(
				'MediaLibraryUploadedFilter',
				new MediaLibraryUploadedFilter({
					controller: this.controller,
					model:      this.collection.props,
					priority:   -100
				})
				.render()
			);
		}
	});
})()

One thought on “Adding your own filter to the WordPress Media Library

  1. This was very helpful and you’re correct that finding good examples of customizing the media section are hard to find. I had set my default media view to be “uploaded to this post” so I had to move a couple of things around for my scenario but this was basically exactly what I was looking for and it’s working great. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.