- Sunday, August 14, 2016

How to Create a Download Link on Wordpress and Blogger

I keep wanting to give out free downloads, but I have struggled finding a way to provide downloads on a blog. Looking for an easy button like a plug-in has proven to be the hard way. Don't let a tutorial scare you, this is the easy button.

I've tried several plug ins for Wordpress, but every time Wordpress updates, they stop working. Not good. I also tried downloading from Google Drive, but they changed that so all my old links no longer work. That's the problem with depending on other places. They change things. Stuff stops working when they do.

How to Create a Download Link on Wordpress and Blogger ♥ Blogging As I Learn It ♥ Adding Files for Download ♥ Direct Download Links How To

People provide free downloads for many reasons, but the popular reason is to bribe people with a free thing for their email address. It's not as bad as it sounds. A lot of places just demand your email address without giving anything for it. But this is an ideal idea for those who advertise on Facebook because Facebook hates salesy spammy shit. They want normal content, so ads promising a free thing usually do better than ads that are just cold sales request.

Downloads you can provide include

  • PDF's
  • Music
  • Video
  • Photoshop Elements
  • Fonts
  • Word Document Templates

ANY COMPUTER FILE you find in your folders.

STEP 1: Get your File on the Internet and Get its Address

Name your file

MAKE SURE you name your file in your hard drive something that is internet friendly.
  • Use underscores instead of spaces
  • Avoid any characters besides text and numbers
  • Use all lower case
  • And for purposes of SEO, you probably want a keyword in the name. 
You can get away with using symbols and upper case, but it's harder to remember, and depending on which method you go with, there's a chance you'll need to remember the exact file name. 

Move Your File to the Internet

Most files that end with JPG, GIF, and PNG, you can upload as a media file in your blog's gallery. Wordpress also allows PDFs to be uploaded right into the media gallery.

Whatever file you want to provide for download, you upload the file to a server. Basically your computer has a storage space, but the internet can't access your computer's storage unless you somehow let them, but you don't want that. So you have to move it to a storage space that the internet can access, and since most of us are not hosting companies, the best thing is to find a place that's on the internet to store your stuff.

But the end result, your primary goal with this step is to obtain a web address that starts with html:// and ends with a file like .jpg or .mp3 or .docx.


This method is the easiest, but the files won't be stored on your server if you self-host, but it's easier than moving files to your server if you aren't familiar with the process.

A: Find an online drive. 

I have found Google Drive and Microsoft's OneDrive to be difficult to obtain the address of the file. My best place I've found is Open Drive and DropBox.

B: Upload your File

Follow the instructions on the site to upload the file.

Note: Choose folders and organization methods that you are very content with as changing this in the future could affect your link's address and break your download buttons.

C: Get the Address

Again, you want to find the address of the file where it starts with http: or https: and ends with the file name like .jpg or .doc...

In OpenDrive, scroll over the file, and in the hover options that appear, click on the 3 horizontal lines. Click the Links option on the list, and a pop up should occur. Choose the Direct Link option for download.

In DropBox, click share, and create a link if necessary, and then copy the link. 


Definitely make sure here that the file you wish to upload is named something internet friendly with no spaces. It's best to keep it to lowercase letters, numbers, and underscores. 

A: Install Filezilla 

For Self-Hosted Wordpress blogs, the best way to handle a means to upload and edit your website's direct files is through an FTP so that the file is stored on your server or hosting service. I use Filezilla

B: Connect Filezilla

Once you've installed Filezilla, you may have to call your hosting to find out how to obtain the information you need to connect Filezilla from your computer to the files in your site, but most hosting providers show this on the website under your account somewhere. 

The Filezilla program wants to know a few things (right under the toolbars before the status box)
  • Host
  • Username
  • Password
  • Port
In GoDaddy, I had to go to Gateway, From there, I click on my wordpress site's settings, from there, I click the tab SSH & SFTP, and there it lists those things. You have to click the toggle button to turn your password from stars/dots to an actual password before copying and pasting. Then just copy and paste the information to the right places.

In most sites, it's listed under anything that has the letters FTP, like on Go Daddy, it was SFTP. Some hosting providers lock your FTP, and you can request to unlock it for a certain amount of time. If you can't figure it out, you're probably going to have to contact customer service with your hosting provider, and it's a HOSTING thing, not a domain thing.

Once you have the information in place to connect filezilla, click the QuickConnect button.

You should then get four window boxes underneath the status box. The two on the left is your hard drive on your computer, and the two on the right is the drive on your web site. This kind of works like file explorer on your computer. The top windows are file folders while the bottom windows give actual files.

In navigating through Filezilla, double clicking on the folder with three dots/periods will take you back a folder. You can also single click the folder on the top box to open the contents in the bottom box.

C: Back Up your Files

Before you engage in playing with your directories, it's wise to back up files in case you make a mistake.

In the top box on the right, click on html and drag it over to the folder you'd like to put it in your hard drive on the top left box. This may take several minutes (more like 30) depending on the size of your site.

If you want to back up the important stuff faster, you can just move over the folder that says "wp-content." With that, your hosting server can fix just about everything else that you are about to touch. The other important item is your database, but you won't be near it to hurt it; however, if you want to take a minute to go ahead and back that up as well to back up the most important things of your website, you're more than welcome to it. You'll probably have to call your hosting provider to learn how to do that (I can't even remember where to start with mine). Most hosting services already back up your information to where a system restore can fix almost anything you do, but you want to make sure that is covered in your plan.

D: Upload File

I'm not sure if it really matters where the folder is, but I like it here... Double click the folder for html, then double click the folder for wp-content, and then double click the folder for uploads. (If those exist like that). If not, create a folder under wp-content for your uploads and name it anything you want.

The first time you do this, you probably want to create a Downloads folder that you can use in the future. Right click anywhere in the bottom right box, and choose "Create a New Directory." Name your file (maybe "downloads" all lower case, think html address). You do not have to create a new directory for each file you want to upload. This is just for the first time. After this, you can upload the file to this folder. If you plan on providing a lot of downloaded material, you may decide to make additional directories to organize your files, such as a directory for music and one for documents.

But you want to make sure you are organizing this just the way you want it because if you move these files, you will break your download buttons on your site. Of course, you can update the links on your site, but in my experience, it's a pain in the ass.

The next step is basically to drag the file into the folder. Open your destination folder on the right side. Find your file you want to upload in the bottom box on the left. Drag and drop that file from the left (your hard drive) to the right (your site).

E: Get File Address

I can't find an easy way to copy and paste your file address completely from filezilla, but here's how to obtain the file address.

You basically have to manually type out the address.

  1. The address will start out with http://www.yoursite.com
  2. Then forward slash all the file folders (AKA Directories) to your document/file.

Tip: Under where it says remote site in the top right hand of the boxes, you can highlight wp-content and all the information after that and paste it. BUT this is only good for the second half of the address. So you will have to type out the info with 1. and then paste the info for 2. Then forward slash and type in the name of the file.

So it would look something like this: http://www.mysite.com/wp-content/uploads/downloads/file.jpg

STEP 2: Create Code for Download

Wherever you want the download to appear, go the html or text of the post or page.

Manually type out <a href="paste location of the file.jpg">TEXT YOU WANT LINKED FOR DOWNLOAD</a> or copy and paste this snippet for editing...

If that doesn't fully work, you may need to add the word Download to it after the file as W3Schools suggested, but I haven't had to do that with any of my files yet.

Manually type out <a href="paste location of the file.jpg" download>TEXT YOU WANT LINKED FOR DOWNLOAD</a> or copy and paste this snippet for editing...

Here's an example of a music file.


Do you want it to have a pretty Download Button? 

Create a Download Button

Draw a picture of a download button or find one on the web that you are allowed to use. Upload it to your pictures in your media gallery or insert picture on blogger. I'm going to use this picture from wikimedia commons....

That one shouldn't download anything.

To get the address of the image file... 

You can get that on Blogger by uploading the image, and then insert it into your post, and then right click and choose copy image address, and then delete the image from your compose area.

In wordpress, you can upload the image to your gallery and if you look at the details on the right, find the address after URL.

Code for Image and Download

Manually type in this code...

<a href="https://MyFileForDownload.mp3"><img src="MyImageURL.jpg"></a>

Or copy and paste and then edit this snippet

It should look like and behave like this...