Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
This is the kind of post I love to write.
Some tutorials contain complicated steps, and sometimes I wonder if people will be happy with the end solution.
But today, you’re going to learn a really simple and versatile way to add download links to WordPress.
The best part about this method is that you can reuse it anywhere on your site. Using these same steps, you can add download links to your:
- Posts
- Pages
- Widgets
- Menu
That’s all four places you have content control on a WordPress site.
Now enough of the build-up, let’s dive into the steps to create these links.
How to make a download link
The same steps are covered in this video tutorial if you prefer to learn that way.
Subscribe to Compete Themes on Youtube
To add a download link (or button), the first thing you need is a URL pointing to the file that people will download.
Get the file URL
If you already have a file hosted somewhere online you can use that URL, but otherwise, you can upload the file to your Media Library.
You might think that the Media Library is only for images, but that’s not the case. You can upload zip files, MP3s, PDFs – any file type you want.
Visit the Media Library > Add New menu, and use the Select Files button or drag-and-drop your file into the screen to upload it.
Once you upload the file, you’ll see an Edit link on the right side of the screen.
Click that link and you’ll be taken to the Edit Media page.
Since you’ve uploaded your file to your site, it now has a publicly accessible address. In the Edit Media page, you can find that address in the File URL section pictured here:
While the whole URL may not be visible, you can triple-click to highlight the entire URL and then copy it to your clipboard.
Pro tip: double-clicking will select an entire word, but triple-clicking will select an entire field. You can use this trick on most websites and applications.
Now that you’ve got the URL pointing to your file, the next step is to link to it somewhere on your site.
You can repeat the following steps for any part of your site, but I’ll be using a post as my example.
Add a link to your post
I’m sure you’ve added tons of regular links in your posts and pages already. The process for creating a download link is only a little bit different.
Start by creating a new paragraph block and add some text to it like “Download now.” Then click the link icon to open up the URL input box.
Next, paste in the file URL and hit Enter.
At this point, you’ve got a regular link pointing to your download.
Now there are two different paths you an take.
First, you can leave the link like this and simply add a message below telling your visitors to right-click and choose the “Save Link as…” option to download the file.
This approach can be great for PDFs because it gives visitors the option to either click the link to view the PDF in-browser or right-click to download it.
Additionally, if you link to a zip file, in particular, it will download automatically when they click on it, so no further steps are needed.
If you’ve uploaded a PDF or another file type that doesn’t download automatically, here’s how you can make the file download when a visitor clicks the link.
How to make the file download automatically
WordPress doesn’t have an option for this next part, so we’ll need to make a small edit to the HTML on our own.
Start by selecting the paragraph block with your download link in it. Next, click on the More options icon (the three dots), and then select the Edit as HTML option.
This is going to expose the HTML for the block which will look something like this:
You can see the “p” tags wrapping everything because it’s a paragraph, and the “a” element is inside which is the link element.
Honestly, if it looks like a bunch of weird nonsense to you that’s fine because you only need to make one small edit.
You’re going to add a download attribute into the link element, like this:
Start by typing the exact same text into your link element. Make sure it shows up right after the “a” and has a space on both sides.
The word “image” inside the quotes is going to be the filename. So if you uploaded a PDF called “2020 Financial Report” then you would want to enter the text “2020-financial-report.” Then when someone clicks on this link, they’ll automatically download a PDF named 2020-financial-report.pdf.
When you’re done, click the More options icon again and choose the Edit visually option.
This will return the paragraph to its normal presentation in the editor.
Now when you visit your site, the download link will look identical, but if someone clicks on it, the file will download automatically no matter what kind of file it is.
You can use this technique to add as many download links to your post as you want. And now since you’ve seen how the HTML works, you can use plain HTML in the Custom HTML widget to add a download link to your sidebar or anywhere else your theme allows widgets.
As for your menu, you can’t edit the HTML directly, so if you want to add a download link there, use URL pointing to a zip file to enforce an automatic download.
This next part might blow your mind.
A button is just a link styled to look like a button.
Basically, you add a background color, some padding, and maybe some curved corners and voila, your link is now a button.
So it should come as no surprise then that the exact same steps shared here work for buttons too.
All you need to do is add a button block to your site and repeat the same steps. Buttons have a link field and the same Edit as HTML option.
While a normal link works fine, a button is clearer since people are used to clicking them to download files. Plus, it looks a lot nicer.
What next
As you’ve learned, adding download links to WordPress is pretty easy. In fact, if you are linking to zip files, the steps are the same as linking to a normal webpage.
With this knowledge, you can create download links in your posts and pages, and your widgets. This allows you to place downloads virtually everywhere on your site.
And if you want to get really fancy, you can replace your boring old link with a fresh looking button block. Now that WordPress supports multiple buttons in a single block, you can play around with different layouts and download options for your visitors.
If you’re on a roll, then read this post next to find some more awesome ways to customize your website:
31 Easy Ways to Customize Your WordPress Website
If this tutorial helped you add a download link to your WordPress website, please share it before you go.
