How to Create WordPress PDF Gallery (For FREE + 2 Templates)

How to Create WordPress PDF Gallery (For FREE + 2 Templates)

You’re working with Gutenberg and you wanted to showcase a WordPress PDF gallery on your website? Well, this is where CatFolders gets in to help. This tutorial is about how to make a WordPress document gallery page in WordPress block editor without any premium plugins.

For this tutorial, we’ll be using CatFolders Document Gallery, a free add-on plugin for CatFolders – WP Media Folders.

Obviously, a document library is an essential source of information for online course students, event attendees, and other service listings.

Searchable and Sortable Frontend Document Gallery in WordPress

With a WordPress PDF document gallery, website visitors can be quickly redirected to the files they need. Hence, WordPress document gallery becomes a time-effective solution for both sides. It compiles the entire website resources in one place, or presented into topics.

Also, a document list has become an efficient SEO instrument. Here’s a document downloads sample page. When users search for your desired keywords in Google, the engine generates a file type label next to your site title or extension links. So if you have PDF document file types on your web pages, you’ll get more exposure on the search result pages.

Finally, here’s a quick instruction on how to create a document gallery using the CatFolders free plugin.

As shown in the screenshot below, these are the plugins that you need to have in place before you can start uploading files to your WordPress site and manage them effectively.

WordPress PDF gallery setup prerequisites

Upload documents to WordPress media library

By default, WordPress allows secure file types to be uploaded to the media library. In order to upload SVG, CSV, ZIP, or other executable files, you need to install the File Upload Types plugin to grant permissions for these files.

Here are the 4 steps to allow uploading CSV, SVG, ZIP, and other file types:

  1. Install and activate the File Upload Types plugin.
  2. Go to Settings > File Upload Types.
  3. In the Add File Upload Types section, check the boxes next to the file extensions that you want to allow.
  4. Click the Save Settings button.
Add file upload types SVG CSV to WordPress media library

Then you will be able to drag and drop to upload multiple document files to your WordPress media library.

Notes: With this plugin, you can also add custom file types as new MIME types as needed.

Create a document category

From this step, I will be using folders/categories created by CatFolders throughout this tutorial. This plugin is free and you can install it right from the WordPress > Plugins menu.

Install free PDF Document Gallery plugins from WordPress admin

Once activated, it creates a new sidebar in your media library, which contains the whole folder tree. Now you can begin by clicking New Folder to add a new one. Name it your way, and then you have a category in place to organize your documents.

New folder name for WordPress PDF gallery

Organize your PDF and other documents in folders

This “Documents” folder is meant to host my document library. For this quick tutorial, I’m using just one folder, but you can create as many as you need. It has many use cases for your online businesses providing subscriptions, membership model, online training, or educational downloadable files.

Now that my document folder is ready, I can just drag and drop files to place them here. Great, now I have 16 items categorized as documents.

PDF documents folder

Now let’s head over to the fun part.

Add a new Gutenberg block

This should be another simple step. Start off with creating a new page or post and edit it using Gutenberg. Look for the CatFolders Document Gallery block, and it is a pre-built block with well-designed elements.

CatFolders Document Gallery block

In the block options sidebar, you will see a select box where you can choose specific folders to output their files.

Select PDF document folder from your folder tree list

It’s also possible to choose multiple folders by pressing Shift/Ctrl/Command, just like how it works when you select multiple files on your computer.

With this CatFolders Document Gallery, you will be able to display the document gallery in grid or list style. There’s a variety of options built in to help you show the library layout the way you want.

Customizing is so much fun, and even better, you can customize it while having a preview right in the Gutenberg editor.

Customize WordPress PDF document gallery

When you’re done, all you need to do is to publish the page/post. And have a look! Now you can showcase the whole course materials gallery all by yourself!

Feel free to switch between the available layouts, try downloading, or sort the documents. It’s pretty cool, right?

Moreover, here are a couple of reasons why you should pick CatFolders Document Gallery:

  • It allows you to display unlimited document files.
  • Supports all file types as long as your WordPress site environment allows uploading.
  • Displays multiple file download lists/galleries on a single page/post.
  • It is 100% free, providing advanced functionalities like sort/search on the front-end, customizable view/preview/download options, etc.

How to enable lightbox PDF in WordPress?

Open document in pdf viewer popup

CatFolders Document Gallery supports WordPress PDF viewer in many browsers. When you set up the document link operations, simply choose between opening in popup window or preview file. On the front-end, the PDF viewer looks like this.

I can’t upload SVG to WordPress, will CatFolders help me do that?

By default, some file types like svg or zip are not allowed to be uploaded to WordPress. To lift this limitation, you need to install a plugin like File Upload Types or WP Extra File Types. Once activated, you will be able to select which extra file types you want to upload to WordPress media library.

How to search for document content in the PDF document list?

This document gallery comes with a search box to allow your visitors to search documents by title.

How can I optimize document galleries on mobile?

Mobile Responsiveness

CatFolders Document Gallery allows you to control display columns. Thanks to these built-in responsive options, you can optionally hide display fields. On smaller screen devices, when you click the (+) icon, the hidden columns appear underneath each document row.

Over to You

In this quick tutorial, I’ve shown you how to create a WordPress document gallery using CatFolders Document Gallery in Gutenberg. I hope this helpful file gallery block will help you efficiently combine your online documents and training materials into well-structured PDF file download lists.

Now I will leave you with the challenge of creating your own file gallery. When you finish, don’t forget to share your work with us!

Thuy Nguyen
Thuy Nguyen

Thuy Nguyen is a product growth hacker and professional blogger. When not producing content for marketing's sake, she can most often be found writing content for content's sake, reading Graphic Guides, or enjoying a good laugh with The Big Bang Theory.

Related Posts