WordPress files, folders and templates tutorial

So you’ve been put in charge of a WordPress (self-hosted) website. You can log in as an administrator, create pages and install plugins with ease. Now you’re ready to go deeper and look under the hood. You may have already started with (tutorial #1) Beginner HTML and CSS or (tutorial #2) Beginner PHP and JavaScript.

Now’s the perfect time to peek at WordPress Files, Folders and Templates. You’ll be glad you did when you experience your first WordPress glitch, problem or perceived catastrophe. Sometimes, installed WordPress plugins don’t get along. Sometimes, WordPress sites act in strange, unpredictable ways. Sometimes, they slow down to a crawl. When it happens, you’ll want to have some troubleshooting strategies up your sleeve, so you don’t have to call complete strangers for help each time.

Let’s discuss files, folders and templates now, while your WordPress site is running smoothly. Don’t wait until the moment when sweat is beading up on your forehead and your boss is standing over your shoulder, asking what went wrong with the company website.

Ready? Let’s go.

In order to be able to troubleshoot your site, your first key step is to figure out how WordPress stores its files and folders. Not worth your time? Not worth your effort? Think again. This knowledge could help you solve some WordPress problems or perceived catastrophes on your own.

Step 1: Download WordPress

Download WordPress zip fileDownload WordPress to your computer in a ZIP file, then open it to see all the files close-up. Go ahead. Take a peek. It’ll just take a moment. I promise. It’s so much easier to see the actual WordPress files on your desktop than to try to visualize them in a tutorial.

You will notice a (1) wp-admin folder, (2) wp-includes folder and (3) wp-content folder. Nice work!

Now you can focus on the wp-content folder.

The other two folders are part of the WordPress CORE: files and folders that run your WordPress site. You can peek at the WordPress CORE folders, but you will NEVER alter them in any way when you troubleshoot.

So now you see the file and folder structure of a WordPress site.

The next step is to see your company website’s actual WordPress files and folders. There are several ways to do that, but learning how to access your company’s site via FTP is the most valuable. If you can access it via FTP, you’ll have access to the folders containing your WordPress theme, plugins and user uploads. You’ll see why this is so valuable in a moment.

Step 2: Learn How to FTP

To learn how to FTP to your site, see: The Ultimate Guide to Managing Your WordPress Website with FTP. To accomplish this will take a bit of your “time” and some “patience” too.

First, let me explain what FTP is and why you should care.

FTP stands for File Transfer Protocol. It is useful for downloading and uploading files between a personal computer and a web server’s computer.

  • You can use FTP to install WordPress on your website.
  • You can add, view and edit your WordPress files using FTP.
  • You can use FTP to solve problems.
  • You can use FTP as your safety net (during a perceived catastrophe).

computer white screen of deathYou may have already discovered that not all WordPress plugins are compatible. (Some may even contain malicious code.) When one causes problems, you can sometimes access it from the dashboard (admin section). If so, you can de-activate it, but not when it causes the ‘white screen of death.’

If you’re experiencing the ‘white screen of death,’ you will not be able to access your dashboard. You will have no way to access and disable the bad plugin. This is that pulse-pounding, sweaty-forehead moment we mentioned.

That’s why you want to figure out how to FTP your site now, while your site is running smoothly and you’re skimming through WordPress tutorials, not during that gut-wrenching moment when you feel like your job is on the line.

Let FTP be your safety net.

After you’ve logged in with FTP, you’ll be able to see every file on your web server. You can find the troublesome plugin and delete the whole folder. Deleting the folder and files will uninstall the plugin. Crisis averted! Having a basic knowledge of FTP will give you confidence. You’ll feel better knowing that if your site breaks, you’ll have some skills in your tool belt to deal with it.

Let’s get back to the “wp-content” folder. Take a look inside. Either (1) look at the WordPress folder that you unzipped on your desktop or (2) login through FTP to see your actual site.

Step 3: Explore the “wp-content” Folder

common WordPress folders

 

The “wp-content” folder is where WordPress keeps all your images, themes and plugins. Remember that name. It is the folder that makes your site unique.

The “wp-content” folder contains 3 sub-folders: themes, plugins and uploads (which includes your uploaded images). You’ve probably already added themes and plugins to your site. You’ve uploaded images too. Now you know where they belong. You’ve got the WordPress know-how to reach them now through FTP. Not impressed? That’s okay. It’s still early.

The “uploads” Folder

It’s good to know that all your images and uploads go into the uploads folder. You should always back this folder up because you can’t recreate it if you lose it.

The “plugins” Folder

The “plugins” folder is used to store all the plugins installed in your site. You can actually run a WordPress site without any plugins. They’re not required.

In WordPress under the Hood: Beginner HTML & CSS, we discussed publishing a WordPress POST/PAGE. Do you know where your WordPress POST/PAGE content goes after you publish it? It may surprise you that this content is NOT in any of the folders in a WordPress site. That content is in the database instead. That often confuses people until they look at WordPress files and folders. You won’t be able to find your post or page content there.  Now you know.

Template Hierarchy & the Loop

What are WordPress Template Files?

If the content in a WordPress POST/PAGE is in a database, how does it end up in a web page?

WordPress template files

This is part of the beauty of WordPress.

A WordPress web page is dynamic. It’s built from bits and pieces pulled from separate “template files” and from content pulled from your site’s database. It is created “on the fly” when the page is visited in a web browser. A single page is usually put together with several template files. You’re likely to find that the header, sidebar and footer are stored in separate PHP files (like puzzle pieces).  Look for header.php, sidebar.php and footer.php.

Some template files include (or “call”) other template files to assemble them into a single page (the puzzle). The main content is displayed using what’s called the Loop (a PHP query that retrieves the page content from your database).

The Loop

The WordPress LoopThe WordPress loop is written with PHP code. Without it, you can’t query the database and display your content. The code includes PHP for accessing the database and a mix of PHP and HTML for outputting the content.

It’s called “the loop”  because it… loops  (repeats itself until there’s nothing else to display). When someone views one of your archive pages, it’ll keep on outputting content until there’s nothing left to display from the database. You’ll find the WordPress Loop in every template file in your theme.

See: A BEGINNER’S GUIDE TO THE WORDPRESS LOOP.

By completing the three simple steps in this beginner tutorial, you’ve learned about WordPress files, folders and templates.

You can, hopefully, access your site through FTP now. You also have a better grasp of  “theme” folders with template files in them. Most importantly, you can reach the “plugins” folder with ease. So, in the future you’ll be able to find the plugin that is doing nasty things to your site. You’ll get to it through FTP, delete it and breathe a quick sigh of relief.  Your work day will remain ordinary and unremarkable and your co-workers will have no clue that anything bad happened to the company website. High five!