How to Build a WordPress Theme Part 1 – Theme Files

Building a WordPress theme can be an intimidating process for beginners. There are files to deal with and things to consider that probably meant nothing before.

That’s okay, though. The majority of those files can be grouped together as concepts and those concepts come together to form a simple, functional WordPress theme.

In this course, I’m going to teach you how to build a WordPress theme yourself using the Underscores (_s) Starter Theme by Automattic as an example.

Instead of building everything from scratch, I’m going to introduce you to the simple elements of a basic theme piece by piece. This makes things easier to understand because you can see the big picture as you learn.

Here are the two versions of the theme we are going to use as an example.

I will be using today’s version of Underscores. While there’s a chance your version of the theme will include minor changes from the one I use in my code examples, you should still have no issues following along.

Github Version – Customizable Version

The Github version of this starter theme is ready for use immediately. The theme is already named and all function names used in the theme have a set prefix.

The customizable version allows you to set the theme name, slug (folder name, function name prefix, etc.), author information, and theme description before downloading the same exact version (without said changes) found on Github.

In other words, both sources will provide you with a working starter theme. The customizable version will allow you to brand certain elements of your theme in an automated fashion, saving you plenty of time.

Choose a version to download and let’s go over the theme files.

Underscores Starter Theme File Structure

How you organize your theme files is something you will work on over time. With the exception of a file or two, your file configuration possibilities are limitless if you know a little PHP.

You’ll have to find a balance between your own organization methods, ease of use for your users (because they create child themes), and simple common sense.

For now, we’ll observe Underscores’ file structure and use it as a starting point, including its extra but unnecessary files.

Root Files

As you read through the article, open the files when we cover them. Look through the code.

Do not be intimidated by the number of files in the theme root. Many of them are self-explanatory based on the file names. Others can be grouped together because they behave similarly. Let’s observe those groupings.

The main HTML structure files handle the site header, footer, content column, and sidebar column.