Outlining the two files every WordPress theme needs

This post is first (and currently, only) part of our “Build a WordPress Theme from Scratch” series.

At this point in the series, you should have set up a fresh WordPress installation.

A fresh installation of WordPress will include the three most recent default themes. You can see them in the Appearance → Themes page in the admin area.

Looking at the /wp-content/themes/ folder in the filesystem, we can see each folder represents a separate theme. The “twentyseventeen” folder contains all the files that comprise the Twenty Seventeen theme, and so on.

If we trash the “twentyfifteen” folder, for example, and refresh the Appearance → Themes page, we’ll see that the Twenty Fifteen theme is no longer available.

Step 1: Place an empty directory inside of wp-content/themes/

If we want to start a new theme from scratch, logic tells us the first thing we need to do is place a new folder in this directory.

We’ll call it “scratch” and keep it all lowercase to match the style of the other theme folders.

If we refresh the Appearance → Themes page after placing this empty folder in the /wp-content/themes/ directory, no new theme is available for activation, but there is some new information on the page.

We see an error, telling us the “scratch” theme’s “stylesheet is missing.”

Step 2: Add a blank stylesheet

We’ve been told the stylesheet is missing. This error is referring to style.css, one of the two required files WordPress needs to recognize a theme.

Let’s go ahead and add a blank style.css to our currently “scratch” directory and see what happens.

Our theme is still not available for activation, but we see a new, more descriptive error message:

Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.

Circling back to the title of this post, we know now the two files every WordPress theme needs: index.php and style.css.

Although child themes are outside the scope of this series, we are hinted at the fact that configuration information is read from the style.css file, which we’ll tackle later in this lesson.

But first, our most immediate priority is meeting the bare minimum requirements to activate a WordPress theme.

Step 3: Add a blank index.php file

This is a quick one. Simply place a blank index.php file in the “scratch” directory.

At this point, we’ll see the “scratch” available for activation. We’ve effectively satiated all the previous errors by simply adding blank style.css and index.php files to the theme directory.

Activating the theme in its current state will lead to a completely blank WordPress front-end, but we’ll be building upon this as we proceed through future lessons.

Step 4: Bask in the glory

Congratulations, you are now a theme developer.

The only theme you’ve built is completely useles sso far, but not to worry, that’ll be changing as you progress through the series.

Next up, let’s learn about WordPress theme style file headers.