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 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 filesIf you need to display files like PDFs or audio files, a frontend 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 Document Library Pro plugin. When you've finished, you'll be able to create a professional-looking library with optional features like pagination, AJAX search, lazy loading, and sort/filtering.
Let's dive in!
Why Document Library Pro is the best WordPress front end media library plugin
In a nutshell, Document Library Pro creates a 'Documents' post type where you can store information about each file that you want to display. The document posts link to files in the WordPress media library so that you can display them in the front end. Customers can click on a link, button or file type icon to instantly view or download the media file.
Keep reading to learn how to take files from the WordPress media library and display them in a searchable table or grid layout on your website. As well as displaying the basic information that WordPress stores in the media library, I'll show you how to add and display extra data about each file. Soon you'll know everything you need 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 Document Library Pro plugin to directly display 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 view the file on a separate page.
- Title - the filename.
- Image - a featured image to represent the media file.
- Caption - this is a useful way to show a description or summary of each file.
- File size and file type - these are both generated automatically.
- Dates - e.g. the date the media file was added to the library, and the date it was last modified.
- 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.
- Download link - A link, button or file type icon to download the media file or open it in the browser.
You'll also learn how to list media library files in a more simple grid layout, with each file displayed in its own tile.
Step 1 - Add media library files
First, I'll tell you how to convert media library files into 'Documents' so that you can display them on the front end. Don't worry about the word 'documents' - you can do this with literally any type of file! This might be images (e.g. jpg or png), spreadsheets (e.g. csv or xls), or even audio or video (e.g. mp3 or mp4)!
You can do this by selecting files that are already in the WordPress media library. You can also drag and drop new files into the WordPress admin.
Before you start, install the Document Library Pro plugin and follow the on-screen instructions to activate your license key. You can then get started with adding your media files to the front end media library.
Add existing media files
- Go to the Media section of the WordPress admin.
- Make sure you're on the list view and not the grid view. (You can toggle the two views using the blue icons on the top left of the WordPress media library.)
- Tick all the media library files that you want to display on the front end.
- Click the 'Bulk actions' dropdown and select 'Add to document library'.
- Next, go to the Documents section of the WordPress admin. You'll see that each media library file has been added as a 'document'. Make any changes as needed. For example, if you're planning to display the filename in the front end WordPress media library then you might want to edit the title of each document to make it more readable.
Drag and drop new files
- Go to the Documents → Import section of the WordPress admin.
- Drag and drop the files directly onto the page, or click to browse and select them.
- This will add the file to the media library, and will also add each one as a document that you can display in the front end - complete with links to download the files. Again, make any changes to the data that you're planning to display about each one.
Step 2 - List media library files 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.
- In the WordPress admin, go to the plugin settings page at Documents → Settings.
- Go through the settings and choose how you want the front end media library to look and behave. There are lots of settings, and here's a summary of the ones that are most important for listing media files on the front end:
- Columns - Choose which columns to display about the media files. Make sure you include a 'link' column so that people can download the media file. If you have added a featured image for each media file then include the 'image' column too. You can also include columns like file size and file type.
- Folders - Enable this option if you want to structure the media files into folders, based on their categories. This helps people to find files by category.
- Link options - There are several options for choosing how the download links work in the front end WordPress media library. If you're displaying different file types then it's a good idea to enable the 'Icon' option. This displays file type icons so that people know what type of file they're about to download. You can also choose whether or not to open links to media library files in a new tab.
- Filters - If you've added media library categories and tabs (under Documents → Categories and Documents → Tags), then add
doc_categories,doc_tags. This will add category and tag filter dropdowns above the front end media library.
- Lazy load - Enable this if you have more than a couple of dozen media files to display.
View the page and you'll see a front end WordPress media library that looks something like this:
This screenshot includes an image column displaying the featured image, which we have renamed 'Content'. If you are only displaying images and don't want to have to add a featured image for each document, then you might prefer to use this method which uses the Posts Table Pro plugin.
You can also display non-image files (e.g. PDF, XLS or DOCX), for example like this:
Categorize your front end WordPress media library
The Document Library Pro plugin lets you categorize your media library files (i.e. documents) and add tags. These allow you to keep things organized in the back end, while allowing visitors to filter by media category and tag.
To set up your media library categories and tags, go to Documents → Categories and Documents → Tags. Add your categories and tags as needed, and then apply them to each document as needed. If you're using the bulk import feature then you can also include a categories and tags column to do this automatically.
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 fieldsUse 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 a reference number, then you'd need a custom field.
- Custom taxonomiesUse 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 for each file and add a Year filter dropdown above the front end media library, then you'd need a taxonomy for this.
How to add custom fields
- 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 'Document' 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 'Documents' section of the WordPress admin. 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 'Document' box. This tells Pods to make the new taxonomy available in the document library.
- Click 'Save Pod'.
Now when you go to edit a file in the 'Documents' section of the WP admin, 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
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 Document Library Pro plugin settings page (Documents → Settings).
- 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:
The easy way to create a front end media library in WordPress
The WordPress media library is fantastic, and it's a shame that it's normally only available in the back end.
By using the Document Library 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 frontend media library functions.
Have any other questions about using Document Library Pro to create a front end media library in WordPress? Leave a comment and we'll try to help out!