- Sunday, August 14, 2016

How to Provide Downloads on Your Blog

I keep wanting to give out free downloads, but I have struggled finding a way to provide downloads on a blog. 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.

Downloads I want to provide include photoshop elements, fonts, word documents, pdfs, music, video, etc. This is for any of these things where it actually downloads as a file into someone's computer.

Note: for Wordpress, you can upload a PDF into your media library and use the link in its URL to send people to a pdf as a web page from where they can save to their computer. You can link to text or link an image the way you would any link.

So, I'm finding a new way to provide downloaded content. It requires coding, but it's not too complicated, and it's basic html. Don't be too intimidated by this post because I'm providing some more complicated means of doing this as well as the easy way.

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, and use all lower case.


Follow the steps for Open Drive, and then enter the code provided at the end.

STEP 1: Get your File on the Internet

This step is to move the file to your computer directly to the internet. Whatever file you want to provide for download, whether it's a word document, a pdf, or mp3, you upload the file to a server.

You want a web address that starts with html:// and ends with a file like .jpg or .mp3 or .docx. There are two ways to do this.


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.

B: Upload your File

Follow the instructions on the site to upload the file.

In OpenDrive, you can choose the folder you want the file by clicking on the options on the left. Then click the upload button (the line with the arrow pointing up) to upload. You can also move this to different folders, but pick something you're happy with because changing the folder later may interfere with your link.

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. 


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. 

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.

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.

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.

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.

The address will start out with http://www.yoursite.com

Then forward slash all the file folders (AKA Directories) to your document/file.

Under where it says remote site in the top right hand of the boxes, highlight wp-content and all the information after that in order to get all the folders to your destination file.

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...