1. Posts Table Pro
  2. FAQ

How to list WordPress Media Library files in a table

example of front end media library for images

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 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

WordPress document library
  1. First, install Posts Table Pro on your WordPress website in the usual way.
  2. Second, go to the plugin settings page: Settings → Posts Table Pro.
  3. Enter your license key and configure the options as needed. In particular, you should:
    • Find the Post Type option and select 'Attachment'. (Tip: If you are also using Posts Table Pro to display other post types elsewhere on your site, then you can set the post type in the shortcode instead.)
      • Add any or all of the following columns to the 'columns' option, with a comma between each one. Posts Table Pro has other columns too, but 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.
  4. Finally, add the shortcode: [posts_table] to a page.

View the page and you'll see a front end WordPress media library that looks like this:

Front end WordPress media library

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:

example of a basic front end media library

For example, if you add title:Click To View File,content:File Description to the Columns option then it will create columns for title and description, with a custom heading for each title:

changing column titles

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 Media Library Categories plugin.

  1. Simply install the plugin and then go to Media → Settings. Scroll to the bottom and set the taxonomy slug as 'mediacat'.
  2. Now go to Media → Categories:
WordPress media library categories
  1. Create categories as needed, for example one called 'pdf' if you want to be able to list PDF's separately from other file types.
  2. Next, edit each item in the Media Library and assign it to the appropriate category.
  3. Now go to the page where you've created a front end media library using the [posts_table] shortcode. (Or if you haven't done this yet, create a new page and add the shortcode now.)
  4. Expand your shortcode by adding the slug of the category that you wish to list in the front end: [posts_table term="mediacat:pdf"] (replace pdf with the actual slug of your category).

This will create a front end WordPress media library that lists files from a specific category only.

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 Pods plugin is perfect for adding custom fields and taxonomies to the 'attachment' 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':

WordPress front end media library example

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, 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):

Front end WordPress media library filters

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):

Redirect WordPress attachment to media file

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.

Related Articles

Still need help?
If searching the knowledge base hasn't answered your question, please contact support.