Building your own WordPress theme - getting it running with a minimal setup (style.css and index.php)

Now that the development environment is ready, let’s make a theme right away. “Theme development” sounds like a big deal, but the minimal setup for a WordPress theme is just two files. Put style.css and index.php in a folder, and your theme appears under “Appearance” in the admin screen. First let’s take this shortest route all the way to “it works!”

The true form of a theme = a folder

Inside the wp-content/themes/ we saw in the previous lesson, a theme lives as one theme = one folder. In other words, make a folder and the theme’s container is complete.

wp-content/
└── themes/
    ├── twentytwentyfive/   ← the theme included from the start
    └── shimaenagado/       ← the theme you make today, yours

Open the themes folder in VSCode and create a folder named shimaenagado. This is the workshop for this course.

File 1: style.css — the theme’s “name tag”

A theme’s CSS file has one more important role. The comment at the top of the file becomes the theme’s self-introduction (its name tag). WordPress reads this comment and shows the name in the theme list.

/*
Theme Name: Shimaenagado
Author: Your name
Description: Original theme for the sundries shop Shimaenagado
Version: 1.0
*/

body {
  font-family: sans-serif;
  margin: 0;
  color: #333;
  line-height: 1.7;
}

Only the Theme Name: line is required. Below the comment, you can write ordinary CSS just as always.

File 2: index.php — the last line of defense template

index.php is the file that assembles the page’s HTML. Its extension is .php, but don’t be scared — most of the contents are familiar HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shimaenagado</title>
</head>
<body>
  <h1>Shimaenagado</h1>
  <p>The theme is working!</p>
</body>
</html>

Yes — at this point it’s just HTML. Nothing PHP-like is written, but this is already a proper theme. Do you see now what we meant by “if you can write HTML, you can get into theme development”?

Let’s activate it

Once you save the two files, the inside of the theme folder looks like this.

wp-content/
└── themes/
    └── shimaenagado/
        ├── index.php   ← made it
        └── style.css   ← made it

Once you’ve confirmed these two are in place, open “Appearance” → “Themes” in the admin screen. “Shimaenagado” is lined up in the list. A nameless folder is recognized as a theme thanks to the single name tag in style.css — it’s a slightly moving moment.

Press “Activate” and open the front side of the site, and the HTML written in index.php shows exactly as is.

Summary of this lesson

A theme’s minimal setup is the two files style.css and index.php — just put them in a folder and they line up in the Appearance list
The comment at the top of style.css (Theme Name:) is the theme’s name tag. WordPress reads it and shows it in the list
The contents of index.php are mostly HTML — it’s the “last line of defense,” used last when no template is in charge

Make a minimal theme and activate it