How To Edit Your Website Files

Posted October 25, 2016 by Kayla in Coding, Wordpress / 0 Comments

Tags: , ,



So you found a piece of code you want to add to your site, or you’ve decided to edit your site’s CSS. How do you actually get to that file and make the changes?

It’s really pretty straight-forward. In short, here’s what you’ll need in order to edit your website’s files.

Option 1

This option is the easiest however, it’s also the option that doesn’t allow you to fix a huge boo-boo.

  1. Admin access to your WordPress Admin Dashboard.
  2. Text Editor

Option 2

This option requires that you have access to your hosting account to get the SFTP or FTP username and password. The method of obtaining these will differ based on your hosting provider, but you are free to contact them or use their knowledge database to find out how to obtain your username and password.

  1. SFTP/FTP username and password.
  2. FTP Client
  3. Text Editor

What is a Text Editor?

This is a plain text editor, not Word or another Rich-Text editor. You will need something basic like Notepad. However I recommend using something a little more advanced like Notepad++ or Atom. Why? Notepad++ and Atom highlight different types of codes, offer auto-completion of closing tags, previously used functions and selectors. Both of these text editors offer plugins but there are a few things I like with Atom over Notepad++.

I like that Atom has plugins for WordPress functions and that it comes standard with a black screen which is easier on the eyes. This is especially useful when you spend a long time looking at your screen. It also allows you to open a folder /directory. This is particularly good when I am editing several files in one folder. I can see a list of the files in a side-bar. Both text editors offer tabs and saving across multiple files. Both are also free and open source.

What is an FTP Client?

In short, this is a file transfer tool that let’s you copy files between your computer and website. It let’s you view a list of folders and files on your computer and on your website. I use FileZilla which is free. To use it, you open the folders you want to work with on each side. You will need to have a local copy of the file you want to edit so you can just drag over the file you want to edit. Then you open it on your computer and then drag it back over to save it to your website. Easy, right?

Let’s quickly go over option 1.

You can edit your files via Appearance > Editor in your WordPress Dashboard. When you open this view it normally opens to your style.css file of the current theme or child theme being used. If you want to edit another file, just click on it from the list of files on the right-hand side of your screen.

You can just edit the file in this view and click save but here are the steps I recommend.

  1. Click in the editor area, press CTRL+A to select all and CTRL+C to copy the selection.
  2. Open your text editor, paste your data. Save it.
  3. Make a copy in case your screw this up.
  4. Edit the file either in the browser or the computer.
  5. If you made changes on the computer, select all and copy and paste it into the browser’s editor. I prefer this option because it’s easier for me to visually see what I’m doing in my preferred text editor. Especially if I’m editing a lot.
  6. Click Save in browser.
  7. Load your site to see changes.

Back to Option 2

Your FTP username is normally provided by your hosting company although you may have the option to create your own. Your hosting company should provide your with access [based on the type of service your purchase]. You need the host and port number as well. All of this information will be available together.

Some hosting providers will allow you to download a file that contains all the information, except the password, which allows you to sign into the FTP client faster.

  1. Open your FTP Client.
  2. Sign in via FTP credentials.
  3. On the computer side [usually left], navigate to where you want to save your file.
  4. On the website side [usually right], navigate to the folder containing the file you want to edit.
  5. Drag the file you want to edit over to the computer’s side.
  6. You can then make a copy in case you have any screw ups.
  7. Edit the file on your computer.
  8. In the client, drag the file from your computer to the website.
  9. View your site to see changes.

That’s it. Pretty simple.

What if you screw up your site?

Now, this is why I recommend having FTP access. If you edited a php file with a bad function, you will lose access to your WordPress Admin screen. Everything will be white [known as the white screen of death] and will display an error message to help you determine where the code went wrong.

If this happens, you will still have access to the FTP.

You can then restore the file with the error using the back-up copy you made.

You will need to ensure that the back-up is named the same as the website copy and that it is saved to the same folder on the website [replacing the broken file]. Then magically [not really] it will revert back to working.

Do you want posts like this directly in your inbox? Join my mailing list.

Leave a Reply