Skip to content

Instantly share code, notes, and snippets.

@danielbachhuber
Last active June 17, 2024 17:40
Show Gist options
  • Save danielbachhuber/0e4ff7ad82ffc15ceacf to your computer and use it in GitHub Desktop.
Save danielbachhuber/0e4ff7ad82ffc15ceacf to your computer and use it in GitHub Desktop.
Add a custom taxonomy dropdown filter to the WordPress Media Library
(function(){
/**
* Create a new MediaLibraryTaxonomyFilter we later will instantiate
*/
var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-attachment-taxonomy-filter',
createFilters: function() {
var filters = {};
// Formats the 'terms' we've included via wp_localize_script()
_.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
filters[ index ] = {
text: value.name,
props: {
// Change this: key needs to be the WP_Query var for the taxonomy
collection: value.slug,
}
};
});
filters.all = {
// Change this: use whatever default label you'd like
text: 'All collections',
props: {
// Change this: key needs to be the WP_Query var for the taxonomy
collection: ''
},
priority: 10
};
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( 'MediaLibraryTaxonomyFilter', new MediaLibraryTaxonomyFilter({
controller: this.controller,
model: this.collection.props,
priority: -75
}).render() );
}
});
})()
<?php
add_action( 'wp_enqueue_media', function() {
wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
// Load 'terms' into a JavaScript variable that collection-filter.js has access to
wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
'terms' => get_terms( 'collection', array( 'hide_empty' => false ) ),
) );
// Overrides code styling to accommodate for a third dropdown filter
add_action( 'admin_footer', function(){
?>
<style>
.media-modal-content .media-frame select.attachment-filters {
max-width: -webkit-calc(33% - 12px);
max-width: calc(33% - 12px);
}
</style>
<?php
});
});
@seb-montana
Copy link

Same problem with a custom taxonomy, displayed but doesn't filter my media..
After search, I found solution in my case : I have to set 'query_var' => true when I register my cutom taxonomy.
Great, it works !
Thanks a lot Daniel for this work.

@jeancarlos110295
Copy link

jeancarlos110295 commented May 29, 2022

When I select an option, the contents by category are not updated

`
var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-attachment-taxonomy-filter',

	createFilters: function() {
		var filters = {};
		// Formats the 'terms' we've included via wp_localize_script()
		_.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
			filters[ index ] = {
				text: value.name,
				props: {
					// Change this: key needs to be the WP_Query var for the taxonomy
					collection: 'category',
				}
			};
		});
		filters.all = {
			// Change this: use whatever default label you'd like
			text:  'Todas las categorías',
			props: {
				// Change this: key needs to be the WP_Query var for the taxonomy
				collection: 'category'
			},
			priority: 10
		};
		this.filters = filters;
	}
});

`

@kionae
Copy link

kionae commented Apr 18, 2023

Just a note... I could not get it to work at all using value.slug on line 16. I had to change it to value.term_id. After that, worked perfectly.

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