No-fuss websites in Kent and the south east, with applegreen
Skip navigation

Making Files available for Download

We are assuming some knowledge of how to open WordPress posts and pages, gained either from the reader's own experience of from our more basic instructions page.

Why bother with downloadable files?

Offering downloadable documents from a website has many applications. Whether it’s agendas or minutes of a meeting, application forms to print out or policies and pricings that need regular updating, there is a myriad of reasons for offering downloadable files in universal formats such as pdf.

Many organisations have two parts to their website: a public-facing part explaining who they are, and a large private section hidden behind a password-protected gateway. This can contain personal information for committee members only. Sharing documents here saves a lot of work and time.

Let's get started with adding files for download

Documents for download are stored in the Media Library. They can be uploaded either in advance or at the point of needing to insert them into a Page or Post. Uploading is as for images: drag and drop the files, or use the browse button to find the files on your computer.

To add the file to a Page or Post from within that Page or Post's editing area, you need to create a new block. Either press the return key on your keyboard or click the little + Plus sign at the top left of your screen. When browsing the choice of blocks, look for the section called Media, and click on the block called File.

The WordPress blocks choice button Wordpress file block

As the block is created, you are given a choice of uploading the file there and then, or going to the Media Library for a previously uploaded file. You can now see the pdfs (and also docx files, if using). We recommend that documents for download be available as universal pdf, not proprietary formats such as Word or Pages.

Wordpress file in media library

Select your desired file by clicking on it and clicking the Select button bottom right of the screen. The system inserts the link to the file into your Post or Page using the filename as link text (you can edit this afterwards) and next to it, a button with the text "Download".

At the front end, both the link text and the button will activate the download. The link text, in this case Privacy Document, is automatically set from the file's name (the words before the .pdf ending) but that can be edited.

Download button, plain

The result is functional but a bit boring. We can add some colour and make sure the look of the button reflects your theme:

Download button, styled to fit the theme

Has this changed since the Gutenberg block editor was introduced?

Definitely. Before the block editor, adding downloadable files was really simple. An “Add Media” button above the main content box took you to the Media Library where pdf documents could be selected (or uploaded if not already there). You could also access mp3s and other non-image files through this method.

The "Add Media" button has disappeared now that the content is made up of blocks and there is no longer a content box as such. Choosing an image block still takes you to the Media Library but then it hides all files that are not images (jpg, png or gif). Pdfs may be present in the Libary, but they don’t show up.

To link to a pdf file in the early days of Gutenberg you had to go to the Media Library, select the file and copy its url. Then you had to return to the Page or Post you were editing, highlight some link text and add the url in the link box, just as if you were linking to an outside website. This was laborious and not user-friendly, and not something we could recommend to any of our clients who would rather not deal with code.

But the Gutenberg block editor has evolved and now there is a special block for downloads, simply called File.

And now...

Want to know how to add tables in WordPress? Here are some instructions on adding a table. Browse Applegreen's collection of Wordpress designs.

Last updated July 2021