Adding download links to WordPress is just as easy as adding regular links. The only difference is that you’ll point the link to a file instead of a webpage.
The video tutorial above takes you through all of the steps required to get a file URL and add a link pointing to it in your post or page. Plus, there are some tips to create one-click automatic downloads, and an easy method to create stylish download buttons.
Here’s the example HTML from the video:
<p><a download="filename" href="http://video.local/wp-content/uploads/2017/05/ipad.png">Download now</a></p>
The only part you really need is download=”filename”. Copy that into the HTML of your link and replace the word “filename” with whatever you want the file to be called.
Hey, this is Ben from WPAnswered.com. In this video, I'll teach you how to add a download link to WordPress. The goal is to add a link to your site that someone can click and when they click it, it will download a file. Now to do this, we need to add a link somewhere within the post using the post editor and we also need that link to lead to a file. So normally a link would point to a URL that is another webpage. In this case, that URL will not be a webpage. It will be a file. Now in order to get a URL leading to your download file, you could upload it to a cloud storage service like Google Drive or Dropbox. In this tutorial, we will be using the Media Library because I think it's nicer to keep all your files within your WordPress site and most of the time it's just a bit easier.
So before we worry about adding the link itself, let's get that URL that points to the download file. The first step is to hover over Media and then click Add New. And I am going to hold down the Command and Shift keys right now and when I click, and that will open it in a new tab without losing my other tab. So neat little trick you can use. Um, the next step is to upload the file. Now in my example, I've got this city.jpeg photo that I want people to download. So I'll upload that now and once it's done uploading, I'll click on this Edit link and this takes me into a new tab where I can, um, it's basically like the post view but for a media item and I can always reach the same page by going to Media and then clicking on the image.
And you might have the tile design by default on your site. You can still click on it and you'll see, um, a pop-up modal window version of that same screen. The only thing we need here is this section right here. This includes the URL that points to this image on our site. So I can triple-click and then Command+c to copy the URL to my clipboard. And if I paste it into the editor, you'll see it just takes me to that file hosted on my WordPress site. So now that I have the URL, I'll go back to my post and I'll add a new link for the anchor text of the link. That is the text that people see and read on your site. I'll just type "Download Now." I'll highlight this text and once it's highlighted I can click on this link icon to make the highlighted text linked and in this URL box, I'll press Command+v to paste in the link leading to the photo and press Enter. Now if I update and I view my here - you can see I'm using the Startup Blog WordPress theme -I've got this "Download now" link. The thing is, this link will work for some file types, but not all file types. So if I click it right now, it's going to load the image within the browser instead of downloading it.
In order to download, I need to alt-click or right-click and then choose the "Save Link as" option. And there is a way around this, which I will show you in just a moment, but if you just want to upload an image or an mp3, something like that, that might open in a new tab instead of downloading a simple solution is to tell people to right-click and save as, and you've probably seen this option a lot. It's nice to Italicize it and this works on all browsers and um, and it works fine. It's a good enough solution to use on your site. Just tell people to right-click and "save link as" that works just fine. I'll show you if I do that. Now I can just type in, um, you know, whatever text I want and it saves to my computer. If we want it to download with one-click without needing to do the right-click "save as" there are two solutions.
First, we can use the download attribute option. And to do this we'll need to get into the HTML itself. So I'll click on the link here and this paragraph block and I'll click on "More options" and "Edit as HTML." And now within this link element that is the "a" tag, I can type, download="". And in here I can name the file. So if I just name it "image," then it will download as image.jpeg. And now that I'm done, I can switch back to "Edit Visually." Now when I update and I refresh the page over here, if I click download now, it simply downloads the image. So that's another really cool solution you can use. It gets a little bit technical. I'll paste the code down below so you can take a look at that snippet and just copy it into your site.
Um, in case you're uncomfortable typing out the HTML yourself. One thing you should know about using the, um, the download attribute, which I added here, is that it has really good browser support, but it won't work on everyone's browser. For instance, um, any Chrome version released since September 15th, 2011 supports it, but none of the Internet Explorer browsers use this. And Internet Explorer Edge, which came out in 2015 also doesn't support it, in which case you might still, um, they'll still need to right-click and "save as" because it'll open a new tab for them. So mostly this is a good solution will work for most people, but it's not completely perfect. Another solution you can use that works 100% of the time is instead to create a zip file. So if I go to my finder and I open up my desktop file, I can see city.jpeg.
I can create a new folder. Just call it "city." I can put the jpeg file into the city folder, select it, right-click, and click "Compress" to create, um, a zip folder. Now if I visit my media again, I'll go to Select Files, I'll select city.zip, I'll upload it just as I uploaded that image, I'll click on Edit, and once again, I'll triple-click and click Command+c to copy the file URL. That's a mouthful lol. And now back here. Instead of um, using the download link attribute, I'll delete this and type it out to make sure we have some fresh HTML and I'll highlight it. And this time I'll link to the zip file. And the point of all this is that now when I view the post and I click on it without adding the download attribute, it downloads right away. So to summarize, if you want to link to a file like a jpeg photo or an MP3, it will, when a visitor clicks on it, it's just going to open up that file in a new browser tab.
They'll need to right-click it and choose "save link as" or whatever their browser says. Here it's helpful to include a little italicized line of text below to let them know they need to do that. Second, you can add a download attribute to the link and that allows them to left-click to download. Um, whatever file you've linked to. Or you can skip that and simply upload a zip file. And every browser on every platform simply downloads the zip file when you click on it without needing to add the download attribute or worry about browser support. So that's how you add a download link and before you go, if you're interested in seeing how to create a button instead of a link, I'll show you how to do that right now. It's pretty simple. In the Gutenberg editor added in WordPress 5.0, we have this new block editor and one of those blocks is for buttons.
So you can see the button in my Most Used section. It's also available I believe in layout. Yup. We have a button and you can always search for it like this. Once I click on the button option, it will add the button block here I can paste in the URL to the zip file and this placeholder text is kind of dark. It looks like I need the delete it, but if I click in here and just start typing, it gets replaced with the text that I type in. And if I update and refresh the post, you now see that instead of a link I have what is actually still just a link. These are the same, but this one is styled to look like a button. If I click on this, it downloads the zip file just the same way. I hope you really enjoyed this video. You learned how to add download links and download buttons to your site that can work for any file type. And if you liked this video, please click the Like button below. If you want more tutorials, don't forget to subscribe and if you still have any questions, go ahead and leave a comment in the comments section below. Thanks for watching.