Adding categories and tags to the WordPress Media Library can enhance your media management process, especially if you run a heavy media website with a lot of media like a stock photo website.
By assigning categories and tags to the media, you will gain the ability to organize your media files with the same level of precision and ease as you do with your posts and pages.
If you’re a WordPress enthusiast who prefers non-plugin solutions, you’re in the right place!
This tutorial will guide you through the process of assigning taxonomies to your WordPress media, filtering it effectively on the WordPress Media Library list view, and displaying it by categories or tags on your desired pages or posts within a customizable grid view.
Adding Categories and Tags to WordPress Media Library
Integrate the Media Taxonomy Code
The first step is to enable the feature that allows you to assign categories or tags to your media.
The code below will help you achieve this, as well as provide the ability to filter media by its assigned tag or category.
// add categories for media
function add_categories_for_attachments() {
register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_action( 'init' , 'add_categories_for_attachments' );
// add tags for media
function add_tags_for_attachments() {
register_taxonomy_for_object_type( 'post_tag', 'attachment' );
}
add_action( 'init' , 'add_tags_for_attachments' );
function wpp_media_taxonomy_filters() {
global $pagenow;
if ( $pagenow == 'upload.php' ) {
$taxonomies = array( 'category', 'post_tag' );
foreach ( $taxonomies as $taxonomy ) {
$selected = isset( $_GET[$taxonomy] ) ? $_GET[$taxonomy] : '';
$info_taxonomy = get_taxonomy($taxonomy);
wp_dropdown_categories(array(
'show_option_all' => __("Show All {$info_taxonomy->label}"),
'taxonomy' => $taxonomy,
'name' => $taxonomy,
'orderby' => 'name',
'selected' => $selected,
'hierarchical' => true,
'depth' => 3,
'hide_empty' => false,
));
}
}
}
add_action('restrict_manage_posts', 'wpp_media_taxonomy_filters');
function filter_media_library_by_taxonomy( $query ) {
global $pagenow;
$taxonomies = array( 'category', 'post_tag' );
if ( $pagenow == 'upload.php' ) {
$tax_query = array();
foreach ( $taxonomies as $taxonomy ) {
if ( isset( $_GET[$taxonomy] ) && is_numeric( $_GET[$taxonomy] ) && $_GET[$taxonomy] != 0 ) {
$term = get_term_by( 'id', $_GET[$taxonomy], $taxonomy );
$tax_query[] = array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => $term->slug,
);
}
}
if ( count( $tax_query ) > 0 ) {
$query->set( 'tax_query', $tax_query );
}
}
}
add_filter('parse_query', 'filter_media_library_by_taxonomy');
Integrate the code in a safer way by adding it to a child theme functions.php file or by creating a custom plugin.
If you choose to use a child theme, you can access the functions.php file by navigating to the Appearance → Theme File Editor menu from your WordPress dashboard.
For block themes, locate the Theme File Editor in the Tools menu.
Assigning Taxonomies to the Media
Once the code is applied, you can easily assign taxonomies to your media files. Simply edit the media item you want, then assign a new or existing category or tag.
Filtering the Media by Categories and Tags
Once you’ve assigned taxonomies to your media files, you can now filter them by category and tag in the media library list view.
Yes, unfortunately, this feature is only available in the list view, as there is no hook to modify the WordPress media library grid view.
But don’t worry, we will provide you with a way to view it as a grid that you can add to a post or page so it can be served to your website visitors as well.
Not only that, you can also set how many images you want to display at once with a pagination feature to see the rest.
Displaying the Media by Category on Pages and Posts
To display the media on any posts or pages of your choice, you will utilize the [displaymedia] shortcode. Simply type this shortcode into the WordPress default editor to add it.
The shortcode will allow you to specify attributes to control which category or tag of media you want to display.
You will also be able to specify the number of media items displayed and the number of grid columns.
Integrating the Display Media Shortcode
To utilize the shortcode, integrate the following code into your WordPress website.
function wpp_displaymedia( $atts ) {
$atts = shortcode_atts( array(
'category' => '',
'columns' => 3,
'tag' => '',
'media_per_page' => 9, // Display 9 images by default
), $atts );
$args = array(
'post_type' => 'attachment',
'post_status' => 'any',
'posts_per_page' => $atts['media_per_page'],
);
if ( !empty( $atts['category'] ) ) {
$args['tax_query'][] = array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array( $atts['category'] ),
);
}
if ( !empty( $atts['tag'] ) ) {
$args['tax_query'][] = array(
'taxonomy' => 'post_tag',
'field' => 'slug',
'terms' => array( $atts['tag'] ),
);
}
$current_page = isset( $_GET['displaymedia_page'] ) ? (int) $_GET['displaymedia_page'] : 1;
$args['paged'] = $current_page;
$query = new WP_Query( $args );
$total_pages = ceil( $query->found_posts / $atts['media_per_page'] );
$column_class = 'media-grid-' . $atts['columns'];
if ( $query->have_posts() ) :
ob_start();
?>
<div class="media-grid <?php echo $column_class; ?>">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="media-item">
<a href="<?php echo wp_get_attachment_url( get_the_ID() ); ?>">
<?php echo wp_get_attachment_image( get_the_ID(), 'medium' ); // Adjust image size ?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php
if ($total_pages > 1) {
$previous_page = $current_page - 1;
$next_page = $current_page + 1;
?>
<div class="pagination">
<?php if ($previous_page > 0) : ?>
<a href="<?php echo add_query_arg( 'displaymedia_page', $previous_page ); ?>" class="prev-page">Previous</a>
<?php endif; ?>
<?php for ($i = 1; $i <= $total_pages; $i++) : ?>
<a href="<?php echo add_query_arg( 'displaymedia_page', $i ); ?>" class="page-number <?php echo ($i == $current_page) ? 'active' : ''; ?>">
<?php echo $i; ?>
</a>
<?php endfor; ?>
<?php if ($next_page <= $total_pages) : ?>
<a href="<?php echo add_query_arg( 'displaymedia_page', $next_page ); ?>" class="next-page">Next</a>
<?php endif; ?>
</div>
<?php
}
return ob_get_clean();
else :
return 'No media found.';
endif;
wp_reset_postdata();
}
add_shortcode( 'displaymedia', 'wpp_displaymedia');
The above code will register the [displaymedia] shortcode to your website. This shortcode will accept attributes to control which media is being displayed and how it appears. Below are the accepted attributes:
- category
- tag
- media_per_page
- columns
Add a Custom CSS for Grid Mode
By now, the shortcode should be functional. However, the media display might still leave a lot to be desired.
To improve the display, use the following custom CSS snippet to adjust it to grid mode.
.media-grid {
display: grid;
gap: 20px;
}
.media-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.media-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.media-grid-4 {
grid-template-columns: repeat(3, 1fr);
}
.media-grid-5 {
grid-template-columns: repeat(3, 1fr);
}
.media-item {
text-align: center;
}
.media-item img {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.media-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.media-grid {
grid-template-columns: 1fr;
}
}
Feel free to add more styles to suit your needs, such as setting a maximum width for the grid, adding borders, and so on.
To implement the CSS snippet, navigate to Appearance → Customize and access the Additional CSS section to place the snippet.
If you’re using a block theme, we have a separate article on how to enable the theme customizer specifically for block themes.
Utilizing the Shortcode
With the code integrated, you’re ready to use the shortcode to display your media on any posts or pages.
Simply create or edit an existing post or page, and then type the shortcode directly into the editor or use a shortcode block. Either method will work perfectly.
Displaying All Media
To display all the media in your library, use the shortcode [displaymedia] without adding any additional attributes.
After adding the shortcode to the desired location, save or publish your post or page, and then view it on the front end to see the media display.
By default, the [displaymedia] shortcode will display a grid of images with 3 columns and 9 media items, as shown in the following screenshot.
And if you have more than 9 images which is likely since you need to categorize them, you’ll see a pagination feature appear just below the image grid. This allows you to navigate through additional media items easily.
Displaying Media by Category and Tag in a Posts or Pages
Now, let’s dive into the important part: displaying images by category and tag of your choice. We’ll explore each shortcode attribute one by one and then combine them to suit your needs.
Display Media By Category
To display media by their category, use the shortcode as follows:
- [displaymedia category=”mymediacategory”]
Replace the “mymediacategory” value with your existing category, save your changes, and then view the result on the front end.
Display Image by Tag
To display media by their tag, use the shortcode as follows:
[displaymedia tag="mymediatag"]
Similarly to the category attribute, replace the value “mymediatag” with your desired existing tag, then save your changes.
Adjust the Column and Media Number
By default, the shortcode displays the grid with 3 columns and 9 images per page. You can adjust these numbers using the columns and media_per_page attributes.
[displayimage columns="2" media_per_page="4"]
The above shortcode will display 4 media items in a 2-column grid. You can adjust the number of columns up to 5 and set the media_per_page value to as many items as you need.
Combining All Shortcode Attributes
You can also combine all the shortcode attributes to further filter the displayed media and customize the grid layout. Here is an example:
[displaymedia category="fashion" tag="bag" columns="2" media_per_page="4"]
Additional: Pagination Styling
In the shortcode code, we also add a custom CSS class, pagination, to the pagination feature.
With this CSS class, you can customize the pagination styling for a better appearance. Below is a custom CSS snippet to help you style your pagination:
/*PAGINATION STYLE BOXED*/
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.pagination a {
text-decoration: none;
color: #333;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 0 5px;
}
.pagination a.active {
background-color: #f2f2f2;
color: #333;
}
Simply add the CSS to the Theme Customizer, just below the grid CSS snippet, and publish your changes to make them live.
If you want to style it further, you can use additional custom CSS classes: page-number for the page numbers, prev-page for the previous link, and next-page for the next link. These classes are included in the shortcode code.
The Bottom Line
By applying categories and tags to your WordPress media, you can improve how you organize and find images, videos, and other files. This guide will show you how to add these tools to your media library, filter your media by them, and even display them in custom grid layouts on your website, all without needing extra plugins.
