-
-
Save hiphopsmurf/f28337750c8b7d1a918c7671bb85e70e to your computer and use it in GitHub Desktop.
Add a custom taxonomy dropdown filter to the WordPress Media Library
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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() ); | |
} | |
}); | |
})() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment