How to Create a Front End Media Library in WordPress

Published on: Under Posts Table Pro 0 Comments

Looking for a way to create a front end media library for your WordPress site that your visitors can browse?

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

example of front end media library for images

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!

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.

There are two ways that you can apply this functionality to create a front end media library. These options are displaying…

  1. The attachment post type – this approach lets you pull a list of files directly from your actual WordPress Media Library. While this is the simplest implementation, it’s fairly limited because of how the WordPress core software stores information about media attachments. While you can easily link to the attachment page, you can’t actually display an image, add a download button for a PDF, etc. In a nutshell, this approach doesn’t give you very much control.
  2. A custom post type that you create – while this approach requires a bit more upfront setup, it gives you more flexibility because you can easily add custom fields to display extra information about each file (if needed).

We’ll show you both approaches in this article. By reading the process for each approach, you should gain a better understanding of which is right for your specific situation.

*For reference, we used Approach 2 to create the example front end media library screenshot above.

Get Posts Table Pro

Approach 1: How to display files from actual media library on front end

Let’s start with the simpler, but more limited, approach:

Using the attachment post type to directly display the files from your WordPress Media Library on the front end of your site.

There are no steps involved in this one – you just use the Posts Table Pro shortcode to query for the attachment post type like so:

[posts_table post_type="attachment"]

This will generate a front end table that looks something like this:

example of a basic front end media library

If desired, you could use Posts Table Pros shortcode parameters to further adjust which columns display and the title of those columns. For example:

[posts_table post_type="attachment" columns="title:Click To View File,content:File Description"]

This shortcode generates something that looks more like this:

changing column titles

If you’re displaying images, you can also add an image column to display the image in your frontend media library. For example:

[posts_table post_type="attachment" columns="image,title:View File,content:Description"]

Unfortunately, clicking on the link in the Click To View File column only takes visitors to the attachment page, which isn’t ideal in most situations. If you want this to link to the actual media library file instead, then you can do this in the Yoast SEO settings (if you’re using that SEO plugin):

Redirect WordPress attachment to media file

If you need more flexibility than the method above, we recommend the second approach where you’ll actually create a custom post type to house the media files. This way, you can:

  • Display the actual media file in your front end media library (rather than a link to the attachment page).
  • Add custom fields to display as much additional information as you want.

Approach 2: How to create a front end media library using a custom post type

With this approach, you’ll:

  1. Create a custom post type using Pods. Depending on your needs, you might also want to use Pods to create some custom fields or custom taxonomies, as well.
  2. Add the media files that you want to display on the front end to this custom post type.
  3. Use Posts Table Pro to display the custom post type on the front end.

Step 1: Create a custom post type with Pods

To get started, install the free Pods plugin. Then go to Pods Admin → Add New and click Create New:

create new custom post type

Name it something like “Frontend Media Library Item” and click Next Step:

custom post type name

If you want to add custom fields to display additional information, you can do that here. Some examples of what you can use custom fields for include (this is by no means a complete list):

  • A download link
  • Media file reference number
  • File size
  • File type

add custom fieldsIf you want to make a custom taxonomy to help visitors filter your media files, you can also create a custom taxonomy with Pods and then associate that custom taxonomy with your media file custom post type by going to the Advanced Options tab and scrolling down to the Built-in Taxonomies section.

Finally, if you’re planning to display images (rather than, say, links to download a PDF file), you should enable the core Featured Image functionality by going to Advanced Options, scrolling down to Supports, and checking the box for Featured Image:

enable featured images

Read this post for more on how to use the Pods plugin

Step 2: Add Your Media Files As Custom Post Types

Once you’ve created your custom post type using Pods, you can add the media items that you want to display on the front end by going to Frontend Media Library Item → Add New (or whatever the name of your custom post type is):

At a minimum, you’ll need to add the:

  1. Title of the media file in the Title field
  2. Actual image as the featured image

add media files

You could also add a description in the main content editor. And in the screenshot above, you can see that I also added a WYSIWYG Editor custom field to house the download link for a file. You can do this from the Pods interface (as mentioned in the previous step).

This type of flexibility is what makes using the custom post type method worth it.

Repeat the same process for all the media files that you want to display on the front end of your site.

Tip: If you have a huge number of media items to import, the WP All Import plugin can save you a ton of time by letting you export your media attachments and then import them to the custom post type. It is a premium plugin, though.

Step 3: Display custom post type using Posts Table Pro

Once you’ve added all of your media files to the custom post type, all you need to do is generate the Posts Table Pro shortcode to display your custom post type on the front end of our site.

For our example, here’s a front end media library that displays:

  • Image
  • Title
  • Description
  • Download link

example of front end media library for images

To generate this example, you’d use this shortcode:

[posts_table post_type="front end_media_libra" columns="image,title,content,cf:download" image_size="medium"]
  • post_type tells Posts Table Pro to pull content from the custom post type that you created.
  • columns – determines what content to display and in which order to display it.
  • image_size – lets you control the size of the images in your front end media library.

If you need to display non-image files, you can also create something like this (read our document library post for the how-to):

WordPress document library

Posts Table Pro also includes a number of other shortcode options that let you control things like:

  • Pagination
  • Sorting/filtering
  • Search box
  • Lazy loading

Read this help article to learn more about Posts Table Pro’s shortcode options

Two ways to create a front end media library in WordPress

If you don’t care about adding extra information or getting more control over your front end media library, the first approach offers the absolute quickest and easiest way to create a front end media library in WordPress.

Just remember that it’s always going to be somewhat limited because of how WordPress stores information about attachments.

If you want the most flexibility, spending a little more time upfront to use the custom post type method in the second approach will give you a lot more flexibility for controlling how your front end media library functions.

Get Posts Table Pro

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!