How to create a front end media library in WordPress
Looking for a way to create a front end media library for your WordPress site that your visitors can browse? You’ve come to the right place!
While the core WordPress Media Library does a solid job of organizing files in your dashboard, sometimes you might want those files to be accessible to your website visitors as well.
A front end media library can come in handy for displaying:
- Large numbers of files (especially images) For example, you might need to display more images than a gallery can handle. In this case, a front end media library with search, filter, and sort options will be more user-friendly.
- Non-image files If you need to display files like PDFs or audio files, a front end media library provides an easy way to make those files accessible. You can even use it to create a document library.
In this article, we’ll show you how to create a front end media library in WordPress using the Posts Table Pro plugin. By the end of this post, you’ll be able to create a front end media library with optional features like pagination, AJAX search, lazy loading, sort/filtering, and more.
Let’s dive in!
How Posts Table Pro helps you create a front end media library in WordPress
In a nutshell, Posts Table Pro takes content from any WordPress post type and lets you display it as a flexible table on the front end of your site.
Today, we’re looking at how you can take files from the WordPress media library and display them on the front end of your website. This is possible because WordPress uses a post type called ‘attachment’ to store the files in the media library. As a result, Posts Table Pro can list these files in a searchable, filterable table on the front end.
As well as displaying the basic information that WordPress stores in the media library, I’ll show you how to add and display extra information about each file.
Keep reading to learn how to create your own front end WordPress media library.
How to display files from WordPress media library on front end
Next, I’ll tell how you to use the attachment post type to directly display the files from your WordPress media library on the front end of your site.
You’ll learn how to create a table which lists any (or all) of the following information in the front end:
- File name – with or without a link to download the file.
- Title or Image (if you are displaying image files) – with optional link to download the file or open the attachment page. Any non-image files will just show the file name in this column.
- Caption – this is a useful way to show a description or summary of each file.
- Any additional categories, custom fields or taxonomies that you choose to add. You can use these to store information such as the file size, file type, add any extra descriptive text, and even add extra links, images, icons, or download buttons.
Step 1 – List media library files in a table on the front end
First, I’ll tell how how to create a front end WordPress media library that uses the information that WordPress itself stores about each file. Afterwards, I’ll tell you how to store extra information about your files and display it in the media library.
- First, install Posts Table Pro on your WordPress website.
- Go to the plugin settings page at Settings → Posts Table Pro.
- Enter your license key and choose how you want your tables to behave. Find the Post Type setting and select ‘Attachment’. This is the name of the post type the WordPress uses for the Media Library files.
- 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.
- Now create a new page and add the shortcode:
View the page and you’ll see a front end WordPress media library that looks something 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:
Step 2: Edit your front end media library columns
So far, your list of files contains the default columns and column names that come with Posts Table Pro. These are the file title, content (which shows the image if it’s an image file, or the filename if it’s not an image), author and date.
Not all these columns and headings are appropriate for a front end WordPress media library. Luckily, you can easily change which columns are displayed in the table. Do this using the ‘Columns’ option on the Posts Table Pro settings page.
We suggest the following columns for a front end media library:
title– the title that appears at the top of the page when you edit the item in the Media Library.
content– this will show the image if it’s an image file, or the file name for non-image files.
excerpt– the caption for the item in the Media Library.
- Any custom fields or taxonomies that you have added to your media library, for example categories (see the advice later in this tutorial).
For example, if you add the following to the Columns option then it will create columns for title and description, with a custom heading for each title:
title:Click To View File,content:File Description
When you add the
[posts_table] shortcode now, it will look more like this:
How to add download links to the media library file
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.
Need a more flexible files database?
So far, I’ve told you how to list WordPress media library files in the front end using the data that is built into WordPress itself. If you need more flexibility, keep reading. By adding some extra free WordPress plugins, you can:
- Divide your front end media library into categories.
- Create multiple tables, each listing different files from the WordPress media library.
- Show extra columns of information about each file.
- Add filter dropdowns above the table to help people to find specific files or topics more easily.
- Add more visual download buttons, or even icons that people can click on to download the file.
Sound good? Keep reading and I’ll show you how to do all this.
Categorize your front end WordPress 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.
- Simply install the plugin and then go to Media → Settings. Scroll to the bottom and 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 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.)
- Expand your shortcode by adding the slug of the category that you wish to list in the front end:
This will create a front end WordPress media library that lists files from a specific category only.
Add extra fields to your WordPress media library and display them in the front end
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.
How to add custom fields to the WordPress media library
- Install Pods on your WordPress site.
- You’ll see a new ‘Pods Admin’ link in the left of the WordPress admin. Click on this and go to ‘Edit Pods’.
- The next screen lists all the post types on your site. Click on the ‘Media’ post type.
- Next, you’ll see a page where you can manage the custom fields for your WordPress media library. Click ‘Add Field’ and add a label and name for each custom field that you wish to create. In the example below, I created a custom field called ‘File Size’ with the label ‘size’. (Make a note of the label – you’ll need this to display the custom field in the WordPress front end media library. We’ll do this in a minute)
- Click ‘Save Pod’.
- Now edit each item in the media library. You’ll see these custom fields towards the bottom of the page. Use them to store extra information about each file.
How to add custom taxonomies to the WordPress media library
- Go to Pods Admin → Add New and click Create New:
- Select ‘Taxonomy’ from the ‘Content Type’ dropdown. Name it something like “Frontend Media Library Item” and click Next Step:
- On the next screen, go to the ‘Advanced Options’ tab and scroll down to the ‘Associated Post Types’ section.
- Tick the ‘Media (attachment)’ box. This tells Pods to make the new taxonomy available in the WordPress media library.
- Click ‘Save Pod’.
Now when you go to edit a file in the media library, you’ll the taxonomy on the right hand side. It works just like categories, so you can add as many terms as you like to tag your files in different ways.
Display custom fields and taxonomies in the WordPress front end media library
Ok, so now you know how to use custom fields and taxonomies to store extra information about each item in the WordPress media library. But how do you display it on the front end?
We’ll do this next.
- Go back to the Posts Table Pro plugin settings page (Settings → Posts Table Pro).
- Find the ‘Columns’ option again. Now you need to extend the list of columns you added earlier:
- To add a custom field column, add
cf:followed by the custom field name (e.g.
- To add a custom taxonomy column, add
tax:followed by the custom taxonomy slug (e.g.
- To add a custom field column, add
For example, your list of columns might be:
This will create a media library like this screenshot. You can see that there’s a title column (which I renamed to ‘Name’), the content column (which I renamed to ‘Image’ and shows the image for image files, and the filename for non-image files), excerpt (which is actually the caption field from the media library), plus a custom field called ‘size’ and a custom taxonomy called ‘Document Year’.
Allow users to filter the WordPress media library
By default, Posts Table Pro adds a keyword search box above the front end media library. That’s a good way for visitors to find specific files.
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 in Posts Table Pro 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):
Add download buttons and links to the media library
In the previous screenshot, you can see a ‘Download’ button. This is a more advanced way to allow people to download a media library file.
It’s trickier to set up than simply letting people click on the file name to download the file. This is because it requires an extra step, as you need to manually add a download button for each file. You can also add it as a plain text link, or even upload an additional image or icon for visitors to click on. The instructions on how to add download buttons, links and icons are in this article of the Posts Table Pro knowledge base.
If you don’t want to do this, then I recommend keeping it simple and just allowing the filename column of the table to link to the file URL. This happens automatically and doesn’t require any manual work.
The easy way to create a front end media library in WordPress
By using the fabulous Posts Table Pro plugin, you can take your existing media library files and display them on the front end of your website for everyone to see. Use the advice and tips in this tutorial, and you’ll find huge flexibility in controlling how your front end media library functions.
Have any other questions about using Posts Table Pro to create a front end media library for your WordPress site? Leave a comment and we’ll try to help out!