Easy guide to add a download button in WordPress (2 methods)

Add a Download Button in WordPress

Want to add a WordPress download button to your site? In this comprehensive tutorial, I'll show you two quick and easy ways to enable downloads on your WordPress website.

Adding a download button makes it easy for people to save files for easy access later.

In this article, I'll show you two easy methods to add download buttons and links to your WordPress website:

  • Method 1: With the 'File' block in the WordPress block editor.
  • Method 2: By using the Document Library Pro WordPress plugin to list multiple downloads in a searchable, filterable library.

The best part? Both methods are beginner-friendly. There's no need to edit your theme's php files and you can follow along even if you have zero HTML or CSS knowledge.

But first, let's address what download buttons/links are and why you might want to add them to your site.

What is a WordPress download button?

Download buttons/links enable website visitors to download files, such as documents, images, videos, audio, PDFs, or any other kind of downloadable content.

demo document library pro
Use Document Library Pro to create a searchable library with download buttons and file previews

Adding a download button to WordPress allows users to save and access specific files as needed — promoting a more user-friendly experience.

Popular use cases for WordPress download buttons

There are many reasons for adding download buttons to a WordPress site, including:

  1. Access to resources: People may need to download files to access valuable resources like PDF documents, guides, or tutorials. For instance, a school or college’s website can offer educational content in the form of downloadable PDFs of lecture notes or study guides. Another (somewhat meta) example, is the download button available on individual plugin pages on the WordPress.org directory.
  2. Document sharing and collaboration: Businesses and professionals may need to share documents for collaborative work. By allowing users to download files like Word documents or spreadsheets, teams can work on projects collaboratively, even when offline. This is particularly beneficial for organizations with remote or distributed teams.
  3. Media consumption: It’s very common for people to download audio and video files to enjoy offline. Podcasts, music tracks, or video tutorials can be downloaded for listening or viewing. This is perfect for those on the go or without a constant internet connection.
  4. E-commerce transactions: Customers who buy virtual products like e-books, digital art, WordPress and WooCommerce plugins, music tracks, or software licenses from WooCommerce sites will need to download them. Digital products are delivered virtually, and customers usually need to download them for instant access.
List LearnDash course materials in a tiled grid
The Document Library Pro plugin has a grid layout complete with download buttons or icons

Benefits of adding download buttons to WordPress

Katie Keith - CEO, Barn2 Plugins

WordPress sites that provide download buttons can expect to see the following benefits:

  • Improved site engagement: Offering download options increases user engagement. People are more likely to interact with your content when they know they can easily save and access it later. This can be particularly valuable for resources like e-books, guides, or media files that they may want to revisit.
  • Better user experience (UX): Download buttons enhance visitors' experience by providing a straightforward way to access specific content. For example, if you're a sports equipment manufacturer with hundreds of SKUs. New customers will require instructions on how to use your products. Instead of simply writing them down as blog posts, you can create product manuals in PDF format and make them available for download. This way, people can access the PDF files online and offline.
  • Higher conversion rates: You can customize the text on download buttons with clear calls to action (CTAs). Clearly spelling out the next action you want your site visitors to take is proven to lead to higher conversion rates.

How to add download buttons to WordPress

As I mentioned earlier, there are two methods to add download buttons and links to your WordPress website:

  1. Using the 'File' block within the Gutenberg editor.
  2. Using a file download manager plugin like Document Library Pro to create a searchable library with robust search, sort, and filter options, and download buttons.

Let's look at each method in detail.

Method 1: How to add a WordPress download button with the built-in File block

The 'File' block is part of the Gutenberg block editor which comes with WordPress itself. It makes embedding and managing downloadable files on your pages or posts easy.

It lets you upload a file (such as a PDF, document, or image) by uploading the file directly onto the WordPress post or page and creating a link to offer digital downloads. When visitors click the link, the file is downloaded directly or opened in a new tab, depending on the user's browser settings.

Note: This method embeds the file directly to the page or post with the download button underneath it. Here's a screenshot showing how it w'll look on the front end of your WordPress site:

WordPress-download-button-front-end

While the built-in WordPress File button block is a handy tool for adding download buttons to your website, it has certain limitations.

Limitations of using the 'File' lock to add a WordPress download button

  • Limited customization options: The customization options are pretty basic. For instance, you can update the link text and decide whether the link should open in a new tab. However, if you need more advanced styling or want to match the download button closely with your site's design, these built-in options may be somewhat restrictive.
  • Single file per block: Each 'File' block can only handle one file at a time. If you want to offer multiple files for download, showcasing them this way may not be user-friendly. In this case, it may be better to present and organize the downloadable content in a table format.
  • Basic link behavior: When users click on the download button created by the 'File' block, it generates a simple download link. How the link behaves ultimately depends on the user's browser settings. Some browsers may open the file in a new tab rather than initiating an automatic download, even if you didn't choose this setting. This can be confusing for people expecting the file to be downloaded immediately.
  • No advanced features: Each download button is completely standalone. You can't add a search box or allow users to filter downloads by topic or tag. The only option is to download each file to their computer and there's no handy "Preview" option either.
  • Only works if you're using Gutenberg: Since this is a Gutenberg block, you can only use it if you're actually using the block editor. It's not available when you use other page builders such as Elementor, Divi or Classic Editor.

However, if you're not bothered about these limitations then I'll tell you how to use this method next. Alternatively, skip to method 2 for a more fully-featured way of creating a searchable library of download buttons.

Instructions

1. Edit your page or post

Log into your WordPress admin dashboard. Navigate to the page or post where you wish to add the download button and click 'Edit'.

WordPress download button - file block 1

2. Add a new block

Click on the '+' button to add a new block. In the block search bar, type 'File' to locate and select the 'File' block.

WordPress download button - file block 3

3. Upload your file

Click on the block to see options to upload or select a file. Click 'Upload' to choose the file from your computer or 'Media Library' to add a file previously added to your site.

Once added to the post/page, the block will display the file name and an icon.

WordPress download button - file block 3

4. Configure block settings

On the right-hand side, the menu includes the core block settings. Here, you can choose the background and link colors, file dimensions, whether or not the file opens in a new tab and more.
Note: The exact settings depend on the type of file you upload.

WordPress download button - file block 4

5. Publish your file for download

Click 'Preview' to see how the download button will appear on your page. If you're satisfied, click 'Publish' to make your changes live. Your WordPress page or post will now feature a download button.

WordPress download button - file block 5

Adding the download button to your site with the 'File' block works well if you want to showcase a few files for download. However, if you have more than a couple of files, then you're better off organizing and presenting them in a searchable library with download buttons. I'll tell you how to do that next.

Method 2: How to create a searchable library with WordPress download buttons

WordPress document library plugin

Document Library Pro lets you list any type of file — PDF, PowerPoint, Word, Excel, digital assets, audio, images, video, etc — with download buttons on your website in an accessible, user-friendly manner.

Plus, it has many extra features to help you efficiently organize and manage your files.

Key features

Multiple styling options for the download button

There are tons of options to choose from for the download button, including download buttons/icons/text links and multi-select checkboxes. Feel free to customize the download button as desired. For example,

  • Button + Text
  • Button + Icon + Text
  • Button + Icon
  • Icon only
  • File type icon
  • Text link

Also, you can add custom text displayed in the link field when the download button or link is selected.

Multi-select checkboxes and bulk download

The multi-select checkbox option — only available on the table layout — adds checkboxes next to download buttons/links. (See the checkboxes next to the search icon on the far right of the table).

demo document library pro

People can select multiple checkboxes followed by the 'Download Selected Documents' button from the top or bottom of the table, saving all the selected files to their computer as a zip file. This provides a much better user experience for people who want to download multiple files at once.

Add preview options next to the download buttons

You can add an option next to the download button/link to enable users to preview files before downloading. When people select the preview option, the file will open in a popup lightbox.
Note: This setting is optional.

IGBC Online searchable document library

Download library with robust search, sort, and filter options

If you want to present many files for download, adding them on a single page isn't the best user experience. People may struggle to find the ones they want. Document Library Pro lets you present files in a table or grid form with built-in powerful search, sort, and filters to help people locate and download files within seconds.

Document grid

List unlimited files with WordPress download buttons

There's no limit to the number of files you can present for download. If you have hundreds or thousands of documents, you can enable the lazy load setting to show files one at a time — this doesn't slow down your site and gives users the optimal experience.

Showcase file downloads anywhere on your site

When you install Document Library Pro, it automatically creates a separate page to showcase files for download. Also, you can present files anywhere else on your site using a simple shortcode.

The Document Library Pro plugin is highly responsive and pairs well with all themes — meaning it'll look great on any website.

Steps to create a searchable library with WordPress download buttons

1. Install Document Library Pro on your website

Step 1 is to add the plugin to your WordPress site. It's a straightforward process:

  1. Purchase the Document Library Pro plugin and download it.
  2. Log into your WordPress admin area and go to Plugins Add New Upload Plugin within your dashboard.
  3. Upload the Document Library Pro plugin .zip file.
  4. Select Install Activate.
  5. Type the license key into the setup wizard or on the dedicated page at Documents Settings to activate it.

2. Configure the key settings

Here are the main settings to configure:

For the download form
  1. Layout: There are two layout options to choose from: Table and Grid. While both look equally great on the front end, I recommend the Table layout if you plan to present many files for download.
  2. Folders: Folders let you structure files hierarchically (think: main folders with nested sub-folders). They make it easier for people to navigate and locate files on your site.
  3. Columns: This option is where you select the columns to be displayed on the front end. You can choose from the plugin's default options or add custom ones.

For the download button/link

Navigate to Documents Settings, locate the 'Document links' section, and update the following options:

  1. Link to document: Tick this checkbox to add the download link for each file.
  2. Link style: The 'Link style' option controls how the download buttons are displayed on the front end. You can display download buttons as 'text link,' 'button with text,' 'button with icon and text,' 'icon only,' 'button with icon,' and 'File type icon.' Select the preferred setting from the dropdown list.
  3. Link text: Here, you can enter the text to be shown on the download button/link. Note: This is case-sensitive. So, it will be displayed in upper or lowercase, as entered.
  4. Link destination: This controls what happens when a site visitor clicks on the download link/button. You can choose whether the plugin allows them to download the file immediately or take them to separate pages for each file. The separate pages will include all the details about each file together with a download link. Choose the appropriate setting from the options on the dropdown list.
  5. Link target: Enable this to open the file link in a new tab.

How to enable file previews before download

Note: This is optional.

File previews are turned off by default and are only possible for the following types:

  • PDFs
  • Audio (mp3, mp4, aac, aacp, flac, mpeg, ogg)
  • Images (jpeg, png, gif, svg, webp)
  • Videos (mp4, ogg)
To add the preview option next to the download button/link
  1. Tick the 'Document preview' option to allow people to preview files in a lightbox.
  2. Select the appropriate styling option for the preview button from the 'Preview style' dropdown. The options are: button with text, button with icon, button with icon and text, text link, and icon only.
  3. Enter the text to be displayed on the preview button/link.

How to enable multi-downloads

If you expect people to download multiple files at a time, you can enable the multi-download option, which adds checkboxes beside each downloadable file.

Users can select multiple checkboxes and then download them at once as a .zip file.

Note: The multi-download option is only available on the table layout, not the grid layout. Also, the multi-select checkboxes will only appear next to downloadable files. People can't download files linked to URLs or web pages. Therefore, those files won't have the multi-select checkbox.

To add multi-select checkboxes next to the download button

Navigate to Documents Settings Document Tables and locate the 'Document links' section.

  1. The 'Accessing documents' option controls whether users can access files from the table as a link, checkbox, or both.
  2. Next, select whether you want to position the multi-download button at the top or bottom of the file library or in both places.
  3. You can change the text shown on the multi-download button in the 'Multi-download button text' field.
  4. Save your settings at the end of the page.

3. Upload files to your website

There are several different ways to add files to your website:

  1. Upload individual files.
  2. Drag-and-drop files.
  3. Add files from your WordPress Media Library.
  4. Upload a CSV file.

Let's explore each method.

1. Upload individual files

This method works best if you want to add a single file to your site at a time:

  1. Go to Documents Add New in your WordPress admin area.
    Add document to library
  2. Update the file name, description, featured image, slug, categories, tags, and the remaining details.
  3. Click File Upload Add File Upload Files Select Files.
  4. Select the file you want to upload to your site and click on 'Add File'.
2. Drag-and-drop files

The drag-and-drop method works great if you want to upload multiple files at once:

  1. Go to Documents Import within your WordPress admin area.
    Drag and drop files to document library
  2. Select the files you wish to add from your computer.
  3. Drag and drop the files in the Import page Drop files to upload section.
  4. Finally, go to the 'All Documents' section to update the file details (categories, tags, slug, etc.).
3. Add files from your site's Media Library

This method works well to showcase files previously uploaded to your site's Media Library:

  1. Navigate to the Media Library within your WordPress admin.
    Add Media Library files to document library
  2. Click 'List view' and select the files you want to make available for download.
  3. Click the 'Add to document library' option from the Bulk Actions menu, followed by 'Apply'.
  4. Finally, select the link at the top of the page to update the document name, description, slug, and other relevant file details.
4. Upload a CSV file

This method works great for uploading multiple files at once:

  1. Add file details (file URL, categories, tags, custom taxonomies, etc) to a new CSV file.
    Bulk upload files to document library
  2. Go to Document Library Import within your WordPress admin.
  3. Select 'Import CSV' from the 'CSV upload' section.
  4. Click on 'Choose File,' then select the CSV file you created and click on 'Continue.'
  5. Select 'Run the importer'. Once the files are uploaded, you'll see a 'Success' message with a link to edit them.
4. How to add the downloadable form to the front end

Once installed, Document Library Pro automatically adds a new page to your site's main menu. This presents the files in a searchable, sortable, and filterable form on the front end.

You can navigate to Pages All Pages Document Library page View within your WordPress admin to edit this page.

Alternatively, you can use shortcodes to add the download form elsewhere on your website.

That's how to add a WordPress download button to your site!

In this article, we've looked at two quick and easy ways to add download buttons to your WordPress website:

  1. With the 'File' block in the Gutenberg editor. This method works well if you want to make a handful of files available for download.
  2. With the best file management plugin, Document Library Pro. This method is perfect if you want to offer a lot of files for download and/or want additional customization with a better user experience (UX) for your site visitors.

With Document Library Pro, you can:

  • Customize the download buttons however you like by using download buttons/icons/text links and multi-select checkboxes.
  • Add preview buttons next to download buttons/links so users can preview files before saving them.
  • Use separate download buttons and multi-select checkboxes to enhance the download experience.
  • Create a download library in a table or grid layout with advanced search, sort, and filter options.
  • Present files for download on a single page or anywhere on your site using shortcodes.

Download Document Library Pro and add download buttons to your site today!

Please share your thoughts...

Your email address will not be published. Required fields are marked *