Making files available for download

Published: 20 July, 2021 | Category: WordPress Help

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 First Steps 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:

Choosing a WP block
WordPress file block

As the block is inserted, 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.

Pdf document in the 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.

Plain file download button

The result is functional but a bit boring. Ask Applegreen Websites to add some colour and make sure the look of the button reflects your theme:

Styled file download buttons

Inline document presentation

Oops! Does your document look like this?

If you like seeing the whole document on your page, that’s good! But it takes a lot of space so you may prefer the button presentation as in the examples above. If so, click on the document block and from the options settings in the right sidebar, untick the button that says “show inline embed”:

Turning off inline embed

Don’t forget to save or update your work.

Has all this changed since the Gutenberg block editor was introduced?

You bet. 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?

There are plenty more tips for using WordPress, just look at the links below or see the list in the navigatifor


Category: WordPress Help

← Previous post: Adding a table to a WordPress Page or Post

→ Next post: SEO and Keyword Placement in WordPress