What is FTP and How to Use it

Step-By-Step Tutorial

Summary: In this tutorial you will learn how to easily edit your website through an FTP client. Specifically you will learn:

  • What is FTP
  • How to Set Up a new FTP User for your website
  • Editing Files on the Server

What is FTP

FTP Stands for "File Transfer Protocol" and it allows you to edit files on your webhosting account where your website lives.

Benefits of using an FTP client to access your website.

  • Quick Access to all of your website files
  • Easily Edit Wordpress Templates
  • Upload / Download files to and from the server
  • Access all your websites from one place.

We use FileZilla to connect to our website over FTP. It's 100% free to use and has all the feature you need.

Free FTP Client (FileZilla)

Connect to website with FTP

FileZilla is a Free FTP Client, you can read more about it on Wikipedia.

To get FileZilla, go to filezilla-project.org and download the FREE FileZilla Client for Windows or Mac.

Create an FTP account on your WebHost

NOTE: The below picture may look different depending on your webhosting provider, however the idea is the same. Before you can log into your website through an FTP client you need to create a new username & password specifically for using FTP. Your regular username and password that you used to register for a webhosting account won't automatically work with an FTP client.

FTP Account

To create an FTP account for your website:

  • Log into cPanel. This is the main dashboard of your webhosting account. The login information should have been sent to you by your webhost when you signed up for a hosting. To get webhosting for your website, check out BlueHost. To learn how to make a website - read my tutorial here.
  • Navigate to the Files section, click FTP Accounts.
  • Type the name of the new FTP user in the Login Field. A new FTP user name will be created as Username@YourWebsite.com. That is the full user name to be used later on in this tutorial.
  • Enter the Password in the password field.
  • Set a quota for this particular FTP account. A quota is used to limit the amount of bandwidth (upload/download capacity) the new user will be allowed to use out of the total bandwidth your account has. Your total bandwidth was specified in your hosting package when you purchased webhosting for your website - usually it's multiple Gigabytes, so you have nothing to worry about. If you are creating this account for yourself as an Administrator you can leave the quote as Unlimited. If you are creating FTP accounts for other users of your website you may want to limit their total usage so they don't waste your bandwidth.
  • The Directory Field is the defualt directory that you will have access to on the server. Leave the default directory as is.
  • Click "Create" to Finish setting up the new user.

Open FileZilla

Open FileZilla after you have downloaded and installed it.

Click on the "Site Manager Icon" to see the list of all your sites. This will be empty the first time you open it.

Open FileZilla

Adding a New Website

Once you are in the site manager, you can add new websites that you want to work on.

To Add a New Site click on New Site, and give it a name.

Add a new website

General Setting

Now you will need to enter some General Setting to be able to connect to your site.
Host - Enter your website name prefixed with ftp. Like this: ftp.yourwebsite.com
Port - Leave as is. This field should be empty so the dafault port of 21 is used automatically.
Protocol - Leave as is. It should default to FTP - File Transfer Protocol
Encryption - Leave as is. It should default to "Use explicit FTP over TLS if available".
Logon Type - Normal
User - enter full username as username@yourwebsite.com Note: This is the username we've set up above using C-Panel.
Password - Enter the Password you created for the ftp user. This is also done through your webhosting account admin panel.
You can leave all the other settings alone.

General FTP Settings

Connect to your website

Click Connect to connect to your Website

You will get a Warning Message indicating that the connection is insecure. That is because all regular (non ecommerce) websites are unsecure by default. Don't worry about this. Security is only required for sensitive information like creditcards. If you want your website to be secure (encrypted) you need to buy an SSL certificate. We won't worry about that for now as that's a totally different topic.

Connect to your website with ftp

Successful Connection

Once you have successfully connected to your website you will see a list of all the files and directories of your Wordpress installation. If you are not using wordpress then you will see whatever files your website is using.

You can now simply drag and drop files from your computer to your website using the FTP client. This makes working on your website a breeze. You can simply start your FTP client, connect to your website and start editing your templates or uploading/deleting files.

Successful connection

Editing Files using a Code Editor

Before editing any of the website template files such as css, php, html, Javascript, it's a good idea to use a professional code editor. (You can use the default text editor on your computer, but it will be much easier to work with code using a professional code editor.) A good code editor makes it much more visually pleasing to work with code.

A really good Free code editor we recommend is Brackets from Adobe.

Download and Install it if you are not already using a different code editor that you like.

Editing files on FTP

How to Edit a Single File

Now that you have a code editor installed you can start editing your website files through an FTP.

Connect to your website and navigate to a file that you want to edit.

Right Click the file and click Edit.

The file should now open in Brackets. If it doesn't open in brackets automatically, check your computer settings to see which default program opens that particular file type. FileZilla defaults to your computer settings for opening files.

Editing a single file

Saving Files

There are 2 Steps to saving files after you have edited them.

First, save the file in the Brackets Editor by clicking on File -> Save.

Second, open up FileZilla and confirm that the file should be uploaded to the server. You will see a little pop up message asking if the file should be uploaded. Click Yes.

Saving Files

How to Make a Website

If you are ready to start making your website, please check out my free step-by-step tutorial on how to make a website.

To find premium templates/themes to style your website - check out ThemeForest.

For my other tutorials - check out the tutorials section. You can also join the community to ask for help if you are having trouble with your website. Good Luck!

how to make a website