Want to create a good-looking document gallery in WordPress?
A content-rich WordPress website is not only written in words but also showcases 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 unappealing 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 on any WordPress page or post gallery.
Table of contents
- Upload Document File Types to WordPress
- Create a Document List in WordPress
- Create a Document Gallery in Classic Editor
- Create a Document Gallery in Gutenberg Editor with FileBird
Upload 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 .prc, .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 unpermitted document file types
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.
Right after activation, you’ll see a list of file formats that are well categorized in different functionality and media types.
A 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 webp file types, I can easily locate them and tick the corresponding checkbox. Then all I have to do is to click Save changes and carry on uploading those files. Yayks!
Another good thing about 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 to the next step of adding those files in a document gallery.
Create a Document List in WordPress
If you manually add a document to a WordPress page or post, all it shows is the file name which is also linked to that file’s URL or download link.
A document file without its thumbnail makes it less appealing and fewer people will click it.
Here’s a document with its link.
In Gutenberg, you can make it look a bit better by using the File block. This is how it looks when I use File blocks to add documents one by one.
That’s all you can do within WordPress default.
Fortunately, there’s a plugin to help you enhance the document gallery with thumbnails for each file type and also provides multiple options to display them in a good-looking showcase.
Now think about which page/post editor you’re currently using because Gutenberg editor takes some different aspects from the classic editor. Following are the guidelines for these 2 different WordPress page/post editors.
Create a Document Gallery in 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 the WordPress repo.
1. Navigate in Document Gallery plugin
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 into it too much as this plugin actually allows convenient access right from the WordPress page/post editor.
2. Add Media to your document library
When editing any page or post, click Add Media > Create Document Gallery > select all necessary document files > Create a New Document Gallery.
3. Set up links, layouts, and thumbnails
Next, you’ll be seeing the setup part for this gallery.
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.
Create a Document Gallery in 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.
For those who are not familiar with FileBird, it is a WordPress media organizer that 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).
1. Organize document files in a folder
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.
2. Find the folder ID
In media library’s List mode, select that Document folder and look into its URL. You’ll see fbv=folderid. Refer to the screenshot above, fbv=308 meaning the folder ID is 308.
3. Paste the document display shortcode to your page/post
[dg id=-1 fbv=308]
To display this document folder in a page or post using Gutenberg editor, you add this shortcode along with the folder ID:
This shortcode pulls the document gallery settings and applies them to this FileBird folder to help those contained documents display on the Gutenberg front-end.
Just as simple as that, when published, your new WordPress document gallery looks like this.
There are many Gutenberg users who love Document gallery plugin yet the plugin seems to be abandoned and 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. 🎉
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!