How to list WordPress Media Library files in a table
The Posts Table Pro plugin can list any WordPress post type in a table. Not everyone knows that media library files are saved as a post type called 'attachment', so you can display them in the front end too.
This article explains how to use Posts Table Pro to list files from the Media Library in a searchable table on the front end. This method is particularly useful if you want to display images, audio files etc. in a front end media library because you can do it automatically. If you want to list other file types, for example to display PDF's from the Media Library, then you might prefer our Document Library Pro plugin which can also be used as a front end media library.
Displaying Media Library files
- Create a table using your chosen method.
- In the post type option, choose 'Media' (if you are using the table builder) or 'attachment' if you are setting the post type directly in the shortcode.
- Add any or all of the following columns to the Columns option. Only the following columns are relevant to displaying Media Library files:
title- displays the filename, with or without a link to download the file.
content- displays the image if you are displaying image files, and non-image files will just show the file name.
excerpt- shows the caption that you added in the Media Library. You can use this to show a description or summary of each file.
Author- the username of the WordPress user who added the file to the Media Library.
Date- the date the file was added to the Media Library.
- Any additional custom fields or categories/taxonomies that you have added to the 'attachment' post type. You can use these to store information such as the file size, file type, add any extra text, or add extra links, images, icons, or download buttons.
- If you are displaying images in your front end media library, then you must set the 'Content length' option to -1. This is essential because if you tell Posts Table Pro to restrict the content length then it can prevent your images from displaying in the table.
- Finally, insert the table onto your site.
View the page and you'll see a front end WordPress media library that looks like this:
The files in the screenshot above are image files (e.g. JPG or PNH). Alternatively, if your media library contains non-image files (e.g. PDF, XLS or DOCX) then it will look more like this:
Showing specific file types in the table
By default, Posts Table Pro will display all Media Library files. You can use MIME types to display specific file types only, such as images or audio files.
To use MIME types, you need to add the post_type parameter directly to the
[posts_table] shortcode. For example:
- To show only images:
- To show only PNG images:
- To show only PDFs:
Adding categories to the front end media library
WordPress doesn't come with any options to categorize the media library in the back end, or structure it into folders. Fortunately, you can easily do this by installing the free Easy Post Types and Fields plugin.
- After installing Easy Post Types and Fields, go to Post Types → Other Post Types.
- Find the 'Media' post type in the list and click the option to manage its taxonomies.
- Add a new taxonomy called something like 'Media Categories'. In my example, I set the taxonomy slug as 'mediacat'.
- Now go to Media → Categories:
- Create categories as needed, for example one called 'pdf' if you want to be able to list PDF's separately from other file types.
- Next, edit each item in the Media Library and assign it to the appropriate category.
Now you have added categories to the WordPress Media Library, you can use the options in Posts Table Pro to list files based on their category, add a category column to the table, add a category filter dropdown above the table, etc. (Tip: Remember that already we're referring to these as 'categories', they are actually custom taxonomies so you should use the taxonomy options in Posts Table Pro and not the category options.)
Adding extra fields
You can also add extra fields to display in the front end WordPress media library. There are two types of field available:
- Custom fields Use these to list unique information about each file. For example, if you wanted to add an extra summary or descriptive text about each file, or to store the file size or a document reference number, then you'd need a custom field.
- Custom taxonomies Use these for information that you want to be able to filter by and use to group your files. For example, if you wanted to store the year or file type for each document and add a Year or File Type filter dropdown above the front end media library, then you'd need a taxonomy for this.
The free Easy Post Types and Fields plugin is perfect for adding custom fields and taxonomies to the 'Media' post type in WordPress. Once you've done this, you'll be able to store extra information about each file in the media library.
For example, this screenshot has a title column (which we renamed to 'Name'), the content column (which we renamed to 'Image' and shows the image for image files, and the filename for non-image files), excerpt (which is the caption from the media library), plus a custom field called 'size' and a custom taxonomy called 'Document Year':
Filtering the front end media library
By default, Posts Table Pro adds a keyword search box above the front end media library. If you're using the standard method of loading the table, then the search box looks at all the columns of the table. If you're using the lazy load option (which lets you list unlimited files in the table without performance problems) then the search box will look at the title of each file.
Unfortunately it's not possible to search the full content of any downloadable files or PDF's (unless you use Posts Table Pro with SearchWP), so it's important to use categories and custom taxonomies to tag your files and make them easy to file. Once you've done this, you can add multiple filter dropdowns above the front end WordPress file manager. Visitors can use these filters to quickly narrow down the list and find what they're looking for.
Use the filters option to add these filters. Your filterable media library will look something like this example, which has filters for Media Categories (created by the Media Library Categories plugin) and Document Years (a custom taxonomy created using Pods):
Adding download links
By default, if you click on the file name in the front end media library, then you will be taken to the attachment page. This will contain a link where users can download the file.
This isn't ideal in most situations and creates an extra 'click' for your visitors. If you want users to download the file directly from the front end media library, then you can do this in the Yoast SEO settings. Yoast have provided a useful tutorial about how to set it up. (If you're using a different SEO plugin, then you would need to check whether it has an equivalent setting):
This disables the attachment post and directs people straight to download the file. You can also follow the instructions in this article to add download buttons and other types of link.
Alternatively, if you want to add download buttons then you may be better off with our Document Library Pro plugin instead of Posts Table Pro. This lets you convert files from the Media Library into 'documents' and then display them in a searchable resource library complete with download buttons, preview buttons, customizable button text and icons, and more.