How to Add a Download Button in WordPress

You can add a download button in WordPress with the Buttons block, the File block or a small HTML snippet. Which one you pick decides whether the browser saves the file or just opens it.

We tested all three in Chrome 155 and a WebKit 26.5 test build on a WordPress 7.1.3 site in October 2026. Our test links pointed at a PDF, a PNG and a ZIP file, and we recorded what happened on every click.

Below you will find the test results, the steps for each method, and a snippet that forces the download. We also cover styling, labels, click tracking, and when a plain button is not enough.

What Is a Download Button in WordPress?

A download button in WordPress is a link to a file, styled to look like a button. Clicking it asks the browser to fetch that file, and the browser decides whether to save it or open it. The button itself does not move any data.

This guide is about the button. It works for any file type from a ZIP to an MP3. If your file is a PDF to embed or share from the Media Library, see our guide to adding a downloadable PDF to WordPress.

A WordPress download button also differs from a download link. A link is plain text with an underline, while a button gets padding, color and a hover state from your theme. Both point at the same file URL.

Which WordPress Download Button Method Should You Use?

Use the File block for one file with a ready button, and use the Buttons block for a ZIP or similar file. Use a Custom HTML block when you need a PDF or image to save under a name you choose. The table shows what each method did in our tests.

Link setup	Chrome 155	WebKit 26.5 test build
Buttons block link to a PDF	Opens in the browser	Downloaded
Buttons block link to a PNG	Opens in the browser	Opens in the browser
Buttons block link to a ZIP	Downloaded	Downloaded
HTML link with the download attribute for a PDF	Downloaded	Downloaded
HTML link with the download attribute for a PNG	Downloaded	Downloaded
download=”price-list-2026.pdf” on a PDF	Saved as price-list-2026.pdf	Saved as price-list-2026.pdf
download attribute on a file from another domain	Opened the file	Opened the file
File block Download button for a PDF	Downloaded	Downloaded

The Buttons block gave the least control. A PDF or an image opened in a tab in Chrome, which is not a download. The ZIP file downloaded in both browsers.

The WebKit result for the PDF differed from Chrome. The same link that opened in a Chrome tab downloaded in the WebKit test build. That gap fits what MDN says: browser handling of downloads varies by browser and user settings.

How to Add a Download Button in WordPress with the Buttons Block

To add a download button in WordPress with the Buttons block, upload the file to the Media Library and copy its File URL. Insert a Buttons block, type the button text, and paste the URL into the link field. The job needs no plugin.

1. Upload the file: In the WordPress dashboard, go to Media > Add Media File and upload your file.
2. Copy the file URL: Open the file in the Media Library and click Copy URL to clipboard. Use this File URL and skip the attachment page link.
   
3. Insert the Buttons block: Open the page or post, click the block inserter, and search for Buttons. Typing /buttons on a new line works too.
   
4. Type the button text: Click inside the button and write a label such as Download price list.
5. Paste the file URL: Select the button and press Cmd+K on a Mac or Ctrl+K on Windows. Paste the URL and press Enter.
   
6. Publish and click it: Preview the page in your own browser and click the button once to confirm what it does.

The WordPress documentation for the Buttons block lists an option to open the link in a new tab and a Link relation setting under Advanced. Neither one makes a PDF download. Keep reading if that is your goal.

A common slip is linking to the attachment page. That page is a normal WordPress URL that shows the file inside your theme. The visitor lands on a page and not on the file.

How to Make a WordPress Download Button Save the File

Add the HTML download attribute to the link, and use a Custom HTML block to do it. The attribute tells the browser to save the file instead of opening it. In our tests, it worked for a PDF and a PNG in Chrome 155 and WebKit 26.5.

The Buttons block has no field for this attribute. Its settings list a link, a target and a rel value, and nothing for downloads. We also tried adding the attribute in the code editor, and WordPress flagged the block as broken.

So use a Custom HTML block instead. The steps are short:

1. Add a Custom HTML block: On a new line, type /html and press Enter.
2. Open the editor: Click Edit HTML to open the code window.
3. Paste the snippet: Replace the example URL with your own File URL. The download attribute is the part we selected below.
   
4. Save the block: Click Update and then publish the page.

Here is the snippet we tested. The classes come from the Buttons block. The button then picks up your theme’s button style:

<div class="wp-block-buttons">
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button"
href="https://example.com/wp-content/uploads/2026/10/price-list.pdf"
download="price-list-2026.pdf">Download price list</a>
</div>
</div>

The value after the equals sign is optional. MDN says a value suggests the filename, and without a value the browser suggests one. In our test, Chrome saved the file as price-list-2026.pdf.

The result looked the same as the other two methods. This is our test page with a Buttons block, a Custom HTML button and a File block:

Why the Download Attribute Fails on Files from Another Domain

The download attribute only works when the file sits on your own domain. MDN says it works for same-origin URLs, same-origin blob URLs and data URLs. For any other address, the browser ignores the attribute and opens the link as usual.

We confirmed it. A link with the attribute that pointed at an image on a different address opened the image in both browsers. So a file stored on a CDN with another domain name will not download through this attribute alone.

The server can also override it. MDN adds that the filename parameter of a Content-Disposition header wins over the name in the attribute. If your host sets that header, the name you chose may not stick.

How to Add a Download Button with the File Block

Add a File block, pick the file from the Media Library, and leave Show download button on. The block adds a Download button next to the file name. In our tests, its button saved the PDF on the first click in both browsers.

The File block documentation says the block comes with a Download button that you can switch on and off. With the button off, the file name appears as a plain link. The block also lets you choose between linking to the media file and the attachment page.

When we added a PDF, WordPress turned on Show inline embed by default and showed the whole document in the editor. We switched it off to get a plain button. Leave Link to on Media file, or the click opens the attachment page.

The File block handles one file per block. A page with ten downloads needs ten blocks, or a plugin that lists files for you.

Which Files Can You Offer as a Download in WordPress?

You can offer any file type that WordPress lets you upload, within the size limit your host sets. The Add Media File screen states the maximum upload size for your site. Ours showed 2 GB, but shared hosts often set far lower limits. Read yours before you plan a large download.

WordPress blocks file types it does not allow. We tried to upload a file with an unknown extension and the uploader answered that we were not allowed to upload this file type. The File block documentation also says an unsupported upload shows an error in the bottom-left corner.

Large files raise a second question. Some owners store them on another service and link to them from the button. That works, but the download attribute is ignored for files on a different domain, as the earlier test showed.

The browser then decides what to do with the link, and a PDF may open in a tab. So when you need a controlled download, keep the file in your own Media Library, or use a plugin that serves it through your site.

How to Style a WordPress Download Button

Select the button and change its style in the editor sidebar, where the settings sit in grouped panels. The Buttons block documentation lists typography, color, dimensions and border settings. It also says you can give one button its own hover, focus and active look.

The block starts with Fill and Outline styles, and you can adjust both from the Styles area of the sidebar.

In WordPress 7.1, the sidebar has a state picker at the top of the block settings. In our editor it listed Default, Hover, Focus, Focus-visible and Active. Pick Hover, change the background color, and only that button changes, as the documentation describes.

The Custom HTML button needs no extra work. It carries the same classes as the Buttons block. It picks up the theme and any style you set globally. In our tests, all three buttons looked the same on the front end.

The documentation’s changelog also notes that width settings for individual buttons moved under Dimensions. If you cannot find a width field, look there first.

How to Add Several Download Buttons in a Row

The Buttons block holds more than one button. One block can carry a whole set of downloads. Click the plus button inside the block to add another button. It copies the style of the first. The block toolbar then lets you set the justification and the space between items.

That fits a set such as a price list, a spec sheet and a ZIP of images. Link each button to its own File URL, and give each a different label. A visitor should be able to tell the three apart without opening them.

The File block cannot do this, because it holds a single file. Use one File block per file, or switch to a plugin when the list grows past a handful.

How to Label a Download Button

Name the file in the button text and add the file type and size in brackets. Use a label such as Download price list (PDF, 399 B). A visitor then knows what they will get before they click, and a screen reader user hears the same detail.

The GOV.UK guide for its attachment component says to give the file type and size when a link downloads a file. The Media Library already shows both values for you, as the File size line in our earlier screenshot.

Avoid labels like Click here or Download. A page with several buttons then repeats the same words, and a reader cannot tell them apart. A short, specific label also makes your analytics report easier to read.

How to Test a WordPress Download Button Before You Publish

Click the button in a private window, check where the file goes, and repeat the click in a second browser. Our tests showed one link opening a PDF in Chrome and downloading it in WebKit. A two-browser check catches that gap before your visitors do.

• Private window: Open the live page while logged out. That way a cached copy or an admin-only view cannot hide a broken link.
• File name: Look at the name the browser proposes. With the attribute set, ours matched the value we typed.
• Second browser: Repeat the click on a phone or in another browser, because MDN says download behavior varies by browser and settings.
• File location: Confirm the file URL starts with your own domain. The attribute is ignored for any other address.
• After a move: If you change the site address or replace the file, copy the File URL again and update the button.

A button that works for you may still fail for a visitor on a different device. So treat the first week as part of the test. Ask one or two people on other devices to click it and tell you what happened.

How to Track Clicks on a WordPress Download Button

Google Analytics 4 records clicks on file links through enhanced measurement. The event is called file_download, and it fires when someone clicks a link to a file with a common extension. It needs no code on your site, because you switch it on in the data stream settings.

Google’s documentation lists the extensions that trigger it, including pdf, zip, docx, xlsx, mp3 and mp4. The event carries the file name, the link URL and the link text. So a button with a clear label also gives you a readable report.

That setup counts clicks on the button and nothing else. It does not tell you whether the download finished. We did not connect a live analytics property for this guide. Check the report on your own site after the first few clicks.

Do You Need a WordPress Download Plugin?

You need a WordPress download plugin when you manage many files, want a shortcode for each one, or need to limit who can download. A plain button covers one or two public files. We installed the free Download Monitor plugin to see how that route compares.

The plugin’s WordPress.org listing showed version 5.3.3 and more than 80,000 active installations when we installed it. After activation it adds a Downloads menu. You add a download, paste the File URL in the Downloadable Files/Versions box, and publish.

The plugin gave us a shortcode for the download, and we pasted it into a page. It printed a button with the same theme classes as the Buttons block.

Its link went through a /download/59/ address and carried a nofollow attribute. A click saved price-list.pdf in Chrome.

The free version listed Featured download, Members only, Redirect to file and Terms & Conditions Required as options. Email lock and several form locks carried a PAID label. We tested only the free version. Check the plugin’s own page for what the paid version adds.

When Is a Plain Download Button Not Enough?

A plain button is not enough when the file is paid, private or one of many. Anyone with the file URL can open a file in the Media Library. For paid files, WooCommerce downloadable products add download limits and expiry dates.

WooCommerce lets you mark a product as Downloadable and attach files to it. The product screen shows a Downloadable files table, a download limit and a download expiry field.

A paid font download also needs license choices, and you can sell fonts online with WordPress with one downloadable variation per license.

The WooCommerce documentation describes three file download methods. Force downloads delivers files through PHP and prevents direct linking.

The same page marks Redirect only as insecure, because anyone with the URL can access the file. If you plan to sell files, read our guide on how to sell ebooks online.

Some stores need a different button. To let readers save a post or page itself as a PDF, the WordPress Content to PDF plugin adds a Generate PDF button. Its product page says readers can edit the PDF before they print or download it. For other options, see our review of WordPress blog to PDF plugins.

Why Does My Download Button Open the File Instead of Saving It?

The most likely cause is the file type. Browsers display PDFs and images inside a tab unless the link carries a download attribute. A ZIP file saves on its own. A ZIP button therefore always looks like it works even when the markup is plain.

Check these causes in order:

• No download attribute: A Buttons block link to a PDF opened in Chrome in our test. Use the Custom HTML snippet or the File block.
• Another domain: The attribute is ignored for files that sit on a different origin. Host the file in your own Media Library.
• Attachment page link: The button opens a WordPress page and not the file. Copy the File URL from the Media Library.
• Browser settings: MDN says users may be prompted, or the file may open in an external app. You cannot override that.
• Old cached page: A caching plugin can serve the old button for a while. Clear the cache after you edit the page.

If a visitor wants to upload files to you, that is a different job. See our guide to creating a file upload form in WordPress.

Conclusion

To add a download button in WordPress, upload the file and copy its File URL. Then use the File block, the Buttons block or a Custom HTML block.

The Buttons block is the easiest, but it cannot force a PDF to download. A Custom HTML block with the download attribute can, as long as the file sits on your domain.

Test the button in your own browser before you publish, and keep the label specific. For another button that sits on a page, see how to add a click-to-call button in WordPress.

Frequently Asked Questions (FAQs)