How to create a front end media library in WordPress

March 3, 2021

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!

example of front end media library for images

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 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 Document Library Pro plugin. When you've finished, you'll be able to create a front end media library with optional features like pagination, AJAX search, lazy loading, sort/filtering, and more.

And while the example above uses images, you can use these same principles for other media types like PDFs, audio files, etc.

Let's dive in!

Why Document Library Pro is the best WordPress front end media library plugin

Document library with folders

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

List media library files
Create your WordPress Front End Media library today!

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.

Step 1 - Add media library files to the WordPress front end media library

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

Add Media Library files to document library
  1. Go to the Media section of the WordPress admin.
  2. 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.)
  3. Tick all the media library files that you want to display on the front end.
  4. Click the 'Bulk actions' dropdown and select 'Add to document library'.
  5. 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

Bulk upload files to document library
  1. Go to the Documents → Import section of the WordPress admin.
  2. Drag and drop the files directly onto the page, or click to browse and select them.
  3. 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 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.

  1. In the WordPress admin, go to the plugin settings page at Documents → Settings.
  2. 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:
    1. 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.
    2. Folders - Enable this option if you want to structure the front end media library into folders, based on their categories. This helps people to find media files by category.
    3. 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.
    4. 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.
    5. Lazy load - Enable this if you have a large front end media library.

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

Front end WordPress media library filters

This screenshot includes an image column displaying the featured image, which we have renamed 'Content'. If you are only displaying images in the front end media library 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:

changing column titles

Categorize your front end WordPress media library

WordPress document library plugin

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 to the front end WordPress media library

  1. Install Pods on your WordPress site.
  2. You'll see a new 'Pods Admin' link in the left of the WordPress admin. Click on this and go to 'Edit Pods'.
  3. The next screen lists all the post types on your site. Click on the 'Document' post type.
  4. 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)
Add custom field to WordPress media library
  1. Click 'Save Pod'.
  2. 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

  1. Go to Pods Admin → Add New and click Create New:
create new custom post type
  1. Select 'Taxonomy' from the 'Content Type' dropdown. Name it something like "Frontend Media Library Item" and click Next Step:
custom post type name
  1. On the next screen, go to the 'Advanced Options' tab and scroll down to the 'Associated Post Types' section.
  2. Tick the 'Document' box. This tells Pods to make the new taxonomy available in the document library.
  3. 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 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.

  1. Go back to the Document Library Pro plugin settings page (Documents → Settings).
  2. 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. cf:reference)
    • To add a custom taxonomy column, add tax: followed by the custom taxonomy slug (e.g. tax:document_year)

For example, your list of columns might be: title:Name,excerpt,cf:reference,tax:document_year

WordPress front end media library example

The easy way to create a front end media library in WordPress

WordPress document library

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 front end media library functions.

List media library files
Create your WordPress Front End Media library today!

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!

8 Comments

  1. Ryan Tulloch
    October 19, 2020 Reply

    is there anymore clear guide to integrating the media category library? Mine will not show up despite typing the correct slug. Can I exclude a category?

    • Edge
      October 19, 2020 Reply

      Hi, Ryan. Sorry to hear you're having difficulty with displaying your media library files according to their media categories in the posts table on your site. To exclude a category and since you're using the custom taxonomy term option, you will need to include/list all the other categories/taxonomies *except* the one you want to exclude.

      So that we can assist you best with this, please could you send me the exact posts table shortcode you're using in a plugin support request via our Support Center.

      Thanks in advance. I look forward to hearing from you.

  2. Jacques
    May 8, 2020 Reply

    hello,
    Can i import a CSV file to generate a new document library. CSV contains books or medias with Title, author, editor, description, date, keywords, etc, etc.... as column names in the CSV. I have an existing 5000 items library to add.
    thanks
    jacq

    • EJ
      June 15, 2020 Reply

      Hi, Jaques.

      Our Posts Table Pro plugin that you can use to create a document library works by displaying the exact same posts or custom post type data values by pulling it directly from the WordPress database of your site. Hence, to display data from a CSV file in a posts table document library, you will need to import it into either your posts or custom post type on your site. For full details, please see: Can I import data to display in Posts Table Pro?

      Please let me know if you have any other questions. You can also get in touch with us via our dedicated Support Center.

      Many thanks,

  3. Joni Graves
    May 1, 2020 Reply

    Could you provide links to websites that have this functionality enabled?

  4. Bryan
    February 26, 2020 Reply

    Instead of creating a custom field for file size, why can't I pull from the media library's file size? If the file changes there is an extras the in also changing the file size.

    • EJ
      February 26, 2020 Reply

      Hi, Bryan. I see your point and wish it were that easy. However, the Media Library detects/retrieves the File Size info on the fly each time you add or edit a file. It does not store this anywhere in the WordPress database, which is where Posts Table Pro pulls the specified post type's data values.

      You're the 2nd person who has ever asked to be able to automatically add/display the file size and there are currently 91 items on the feature request list for this plugin that we haven't implemented yet. We add new features based on a combination of demand, difficulty and impact - this means that realistically, it's quite low priority and unlikely to happen in the near future. The most popular item on the list has had 13 requests in total.

      I have added your ‘vote’ for this feature and we will let you know if we add this in future.

      In the meantime, I'm sorry that this isn't possible. You can display the file size programmatically by using the custom column filter, which is a developer-level task. For details, please see: Adding a custom column to the posts table.

Please share your thoughts...

Your email address will not be published.