SaberWP

Theme Foundation

Lesson 1 of 3

Welcome to the first lesson in this course on WordPress theme development. We’re going to start off with the theme foundation. Think for a moment about what a theme is, and it’s purpose in a WordPress site. The theme can be thought of as the rendering engine or the front-facing layer of the WordPress install. What might surprise you is how thin this layer can actually be. Let’s try a quick experiment to demonstrate this concept.

First you’ll need a blank WordPress site. We won’t cover how to install WordPress here, as this is a topic covered widely in the ecosystem. We will recommend that given the choice between doing your development locally or on a web server, working locally has a lot of advantages. You might consider trying Local (by Flywheel) as a local development environment.

Open your WordPress site in a file explorer and navigate into /wp-content/themes. What you’ll see there usually will be a list of native WordPress core themes such as twentytwentythree, twentytwentytwo, etc. Any 3rd-party themes or child themes you install would normally go into this directory as well. What we’re going to do now is simply add a custom theme folder to this directory with a couple of starter files inside it. For this course we’re going to call our custom base theme “slate”. The structure should look like this:

  • /wp-content/themes/slate/
  • /wp-content/themes/slate/index.php
  • /wp-content/themes/slate/style.css

The 2 files you’re creating can both be left blank initially. You probably think without any configuration at all this theme won’t install or if it does, it won’t work. Right? Wrong! Remember this if anybody ever tells you that they find WordPress bloated or they find it difficult to navigate WP code. The starting point for a custom base theme can be entirely blank files, a “clean slate”.

Now login to your site admin and navigate to Appearance > Themes. You should see “slate theme” on your list of installed themes, click to activate it. Slate is now installed. Visit the front-end to preview how it looks.

Mark Lesson Complete

Marking this lesson complete will update your overall course progress. You will still be able to visit and read the lesson again.

NEXT LESSON

LESSON LIST

  • Theme Foundation
  • Vitamin A Quiz
  • Custom Template Parts

COURSE DASHBOARD

Visit Course Dashboard