Are you keen to start modifying your website but feel completely lost at step one?
WordPress tutorials are often simple, but start with phrases like “open your theme’s functions.php file,” which can instantly throw a beginner off track. Where is this file? Open it in what? Where is my theme?
There’s absolutely no shame in not knowing any of these things. It would be a funny, old world if we were all the same and knew the same amount about the same things!
In this article I’ll introduce you to some concepts related to WordPress theme files, where to find them, and how to make changes:
There is only one pre-requisite if you want to follow this article – owning a website. The gist of what is said will be easier to understand, but to follow along you’ll also need to have a domain name and a hosting account. If you don’t have one yet, consider signing up for one.
How Websites are Modified
On a very basic level websites are nothing more than files stored on a computer somewhere. Your browser receives the content generated with these files and displays it to you. To modify a website all you need to do is access the correct file and edit it. This requires the knowledge of three things:
- Where the files are
- How to edit them
- Which file to edit
When you are in possession of this information you generally do the following: You connect to the server where your website is stored, you navigate to the file you need and download it to your computer, you open it on your computer and modify the content, and you upload the file to its original location, overwriting the old version.
Connecting to a Server
In order to upload and download files to a web host’s server, we use FTP – or File Transfer Protocol. There are a number of FTP tools you can use. A great, free one is called Filezilla. If you don’t already have this software, go ahead and download it now.
When you open the application you should see a bar at the top where you can enter a host, a username, a password and a port number.
To fill out these forms you’ll need to look up your FTP access details. Most hosts allow you to log in to a control panel, which has a dedicated section displaying your login credentials. Some hosts allow you to create your own username/password combinations for FTP accounts. If you are unsure you can always get in touch with your host’s support team.
Finding Your Files
Once you enter your details and click “Connect” you will see a list of files and folders. A server (the computer containing your website) may have a lot more files than just the ones for running your site. We know that the files we are looking for are somewhere here in theory, but which ones!
This may be a difficult question. You may need to refer to your control panel or your host’s customer support. In the image above you can see the “FTP path to HTML directory” section. This means that I’ll need to go into the domains folder, then the danielpataki.com folder, then finally the html folder. If in doubt, ask your host where the files for your website are and they’ll be able to help you out.
Once you know the credentials to access your files and where they are you can make your life easier by creating a connection preset. Instead of having to type all your info you can save it and navigate to the required directory automatically each time you connect to your site via FTP.
Managing Sites
Use the top-left icon to open the site manager in FileZilla. This window allows you to save your pre-configured settings. Once you create a new site you can fill out the details.
Make sure to switch to the advanced tab to fill out the default remote directory. This determines the directory the FTP app switches to right after connecting.
Editing a File
Let’s say you’re following a tutorial which calls for the editing of a specific file. Once you’ve found this on the server you can double click it or drag it from the right-hand pane to the left hand one. This will download the file to your computer. You can now open this file with any text editor (more on this later).
When you’re happy with your changes you should save the file, then go back to FileZilla and drag the modified file from the left-hand pane to the right. The application will ask if you want to overwrite the file. If you choose to do so the file will be transferred to the server, overwriting the original version.
Using Text Editors
A text editor is an application that can open, edit and save text documents. Ideally the editor shouldn’t add any extra information to our document. When you create a Word document a huge amount of information is contained within the file that has nothing to do with the content. File sizes, colors, positioning, and so on.
A text editor is similar to Notepad on Windows or TextEdit on Mac. Most programmers use more versatile tools but if you only have the basic ones installed, they will do just fine.
A few great text editors include Notepad++, Sublime, Coda and Atom.io.
Editors with Built-in FTP
Some editors have built-in support for FTP. Note that the flow I described previously makes you switch between your text editor and FTP application constantly. Editors like Notepad++ that have built-in FTP provide a self-contained system – no more switching between apps.
Working With FTP
Hopefully you now understand the mechanics of working with files. I want to make it clear that this is something that needs to be practiced. FTP is second nature to a developer but I remember how alien it was when I started out. Just because you see other people handle these concepts naturally doesn’t mean they are easy – it just means that developers have a lot of practice.
The truth is that when I started I opened the wrong files many, many times. I didn’t understand what I was transferring where or why my changes didn’t show up. Mistakes likes these are all perfectly normal and with practice you’ll get the hang of it!
Common WordPress Files and Locations
We’ve taken a look at file locations twice and you should now know how to locate your website’s root directory – the folder that contains all your website’s files. However, many tutorials won’t give you the exact details of all the files. They’ll say things like “open your theme’s stylesheet.” If you don’t know where the theme is stored and what a stylesheet is, you’re in trouble!
Below is a list of some of the common terms used and how to find them. These all assume that you are using a WordPress site of course! Keep in mind while reading the list that all of my descriptions are relative to your website’s root directory (unless otherwise stated).
Themes Directory
The themes directory is located within wp-content and is named themes. This is the directory that contains all the themes available on your website. Each individual folder in here is a separate theme.
Current Theme Directory
This can also be referred to as the theme directory (singular) and is a folder located in the previously discussed themes directory. The directories are all named so you should be able to find the one you need easily. The current theme you are using is displayed in the “Appearance” section in the WordPress backend.
Plugins Directory
This one is found within wp-content and is called plugins. This folder contains all the plugins available to your website. Some plugins (rarely) may only be composed of a single file in which case they will be stored directly in this directory. Most plugins are stored within their own directory.
Theme Stylesheet
This refers to the stylesheet of your current theme. This file governs how your website looks: how big boxes are, what color the text is, which side your sidebar is on, and so on. It is the style.css file within your current theme directory.
Theme Functions File
This file governs various features within your theme, like how comments are displayed, the image sizes supported by your theme, and maybe even custom post types and taxonomies. This file is the functions.php file in the current theme directory.
Theme Index File
This file is used to display the front page of your website if it shows your latest blog posts. It is the index.php file within your current theme directory.
Theme Template Files
There are a number template files within the current theme directory. The index file is a template file which displays the front page. The single.php file is responsible for single posts for example, page.php is responsible for static single pages. A pretty good list of all template files can be found on the Template Hierarchy Codex page
Main Plugin File
The main plugin file is the initial file loaded when your plugin is active. It usually bears the same name as the folder it is in. The plugin folder can be found in the plugins directory. If the folder’s name is my-plugin, the main plugin file is within this folder and is probably named my-plugin.php.
Following Includes
PHP is a server-side language and allows you to include the contents of one file into another. This can be done using the PHP functions include(), require(), include_once() and require_once() or with the WordPress function get_template_part().
If you see any of the first four you can follow the path given within these functions to find the file. If get_template_part() is used it may look something like this:
get_template_part( 'post', 'simple' )
What this means is that the file being included is post-simple.php. So why is this important?
To improve readability, coders tend to separate functionality into different files. A full page on your site contains code for the header, the footer, the sidebar, the posts shown, and so on. These may be included, instead of all the code being put in one place, just to make things easier to modify.
Overview
Hopefully you now have a rudimentary understanding of working with WordPress files. There are more complex and more useful ways of coding, but this is not something you need to be concerned with at the moment. The best course of action is to get proficient with FTP and then moving on when you’ve had plenty of practice.
Are there any other beginner gripes you have? Some fundamental steps that tutorials always skip over that you would love to know how to do? Let us know in the comments below and we’ll try to tackle some of the most common ones.
Tags:
