Skip to content

Instantly share code, notes, and snippets.

@danielbachhuber
Last active January 29, 2025 04:58
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
});
});
@geigel
Copy link

geigel commented Jan 29, 2025

Thanks for this. It works great. Is there anything that can be easily and quickly done in the code to have the select box appear in list view too?

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