Add a document gallery to WordPress post

How to Upload and Create a Document Gallery in WordPress

Want to create a good-looking document gallery in WordPress?

A content-rich WordPress website is not only written in words but they also showcase plenty of media, documents and graphics.

When you want to share those contents, you can’t upload them to the WordPress media library. Or when you managed to do it, it looks kind of austere and unfriendly to readers. They might think that is some issue or harmful file and hesitate to click on it.

This article will help you successfully upload those necessary file types. And display them nicely in any WordPress page or post gallery.

1. Upload Additional Document File Types to WordPress

What’s allowed to be uploaded and what’s not?

WordPress by default allows many document file types:

  • .pdf (Portable Document Format)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)
  • .psd (Adobe Photoshop Document)

Those are the most widely used file types. But if you need to upload a document file type that is not supported, you can easily get the know-how below.

In my personal experience, I often use these ebook formats including .epub, .mobi, .azw, .djvu, etc. Despite not being common, those file types have been existing for a very long time and actually got many advantages in terms of sharing among platforms and reading user experience on different devices.

Or when designers want to upload their graphic files such as .svg, .cad, .dwg, motion graphic files, etc. and Apple documents such as .numbers, .pages and so on?

Upload document file types using a WordPress plugin

To allow those file types to be uploaded, you got to install some WordPress pre-built code to implement it, and here I choose File Upload Types. This is a fast and direct solution.

A plugin to allow uploading more file types

Right after activation, you’ll see a list of file formats which are well categorized in different functionality and media types.

Quick tip: You can use Ctrl + F (or Cmd + F) to search for the file type/format you want.

So when I want to get jpeg/jpg file types, I can easily locate it and tick the corresponding checkbox. Then all I have to do is to click Save changes and carry on uploading those files. Yayks!

Categorized File Type list in Upload Plugin

Another good thing of this plugin is it allows you to add custom file types. It’s just as easy as shown in the screenshot above. Just fill those fields including the file description, MIME type, its extension, and then you’re good to go.

We won’t have to refresh or leave the page in order to complete those tasks. But of course, make sure you click Save Settings after making changes.

When you finish uploading all the necessary file types, we move on the next step of adding those files in a document gallery.

2. Create Document Gallery in WordPress

If you manually add a document into a WordPress page or post, all it shows is the file name which is also linked to that file’s URL. A document file without its thumbnail makes it less appealing and fewer people will click it.

Link to Document in WordPress post

Fortunately, there’s a plugin to help you do that. Document Gallery generates thumbnails for your document files and also provides multiple options to display them in a good-looking form.

Now think about which page/post editor you’re currently using because Gutenberg editor takes some different aspects from the classic editor.

2.1. For Classic Editor

Required plugins: Document Gallery

In order to add a well-aligned gallery of documents in WordPress classic editor, all you need is the plugin Document Gallery by Dan Rossiter. Just download and install it for free from WordPress repo.

Upon activation, you’ll see a new menu Document Gallery created under Settings menu. That is where you head over to when you need to adjust advanced settings.

In the scope of this tutorial, you don’t need to dive in it too much as this plugin actually allows convenient access right from the WordPress page/post editor.

When editing any page or post, click Add Media > Create Document Gallery > select all necessary document files > Create a New Document Gallery.

Next, you’ll be seeing the setup part for this gallery.

Edit document gallery settings

You would want to care about these settings:

  • Link To: choose Media File if you want the users one-click to download, or Attachment Page if you want to direct users to the file page.
  • Columns: how many columns you want your gallery to display in
  • Use auto-generated document thumbnails

Then you click Update to save all the changes. This is how your 3-column document gallery looks on the front-end.

Document gallery display in WordPress post

2.2. For Gutenberg Editor

Like it or not, Gutenberg is enforced and will likely replace the Classic editor in a few years. The fact that many clients really enjoy using Gutenberg blocks makes sense for us to keep it updated with the right Gutenberg-friendly plugins.

Below is the tutorial on how to use Document gallery for Gutenberg users.

Required plugins: Document Gallery & FileBird

For those who are not familiar with FileBird, it is a WordPress media library organizer which comes with a great Gutenberg image gallery block. Now FileBird v4.3.1 and its later releases also support document gallery block via dg shortcode (Document Gallery plugin supported shortcode).

After activating those two plugins, navigate to your Media library and upload your document files to a folder. If your files were already uploaded, just bulk select and drag n’ drop them to the destination folder.

Here I’ve renamed the folder as Document and place it on the top of the folder tree for easy view.

Document Folder ID in list mode

In List mode, select that Document folder and look into its URL. You’ll see its Folder ID at fbv=. Refer to the screenshot above, fbv=308 meaning the folder ID is 308.

[dg id=-1 fbv=308]

To display this document folder in a page or post using Gutenberg editor, you add the above shortcode including your source folder ID into the editing screen.

Shortcode to display document gallery in Gutenberg

This shortcode pulls the document gallery settings and applies to this FileBird folder to help those contained documents display in Gutenberg front-end.

Just as simple as that, when published, your embedded shortcode for a document gallery looks like this.

Document gallery in Gutenberg frontend

There are many Gutenberg users who love Document gallery plugin yet they cannot find a way to utilize it. They ask us to improve FileBird to support DG. And this dg shortcode is our little Christmas gift for them.

Final Thoughts

This article aims to demonstrate all the steps you have to take to upload unallowed file types and create a nice document gallery in WordPress with auto-generated thumbnails.

Should you have a better solution, don’t hesitate to leave your opinion in the comment box or chatbox below.

We hope you can get it done in no time. Can’t wait to see your document gallery published!