How to create a classic WordPress theme: step-by-step guide

WordPress is a highly popular content management system (CMS) for creating blogs, e-commerce stores, and other websites. It stands out due to its flexibility, supporting thousands of free and paid themes across several platforms, which helps accelerate the website creation process.

However, the true power of WordPress lies in its customization options, as you can tweak your site’s appearance with various page builders and block themes to suit your taste. But what if these options still don’t meet your specific needs? The good news is that you can develop your theme from scratch.

This guide describes the creation of a classic WordPress theme. You learn how to build a theme step-by-step, giving you the foundation for building more advanced themes in the future.

Info

You may ask what a classic WordPress theme is, what makes it classic, and if there is another type of theme. If these questions pop into your mind, the direct answer is that a classic WordPress theme uses the traditional PHP template files and functions to build the site structure and layout.

This is different from the modern block themes introduced with the Gutenberg editor, which uses blocks and full site editing (FSE) to create and manage theme elements. Both types have their advantages, but this guide focuses on classic themes.

Prerequisites

Developing your theme from scratch is a technical process that involves writing code. You should be familiar with the following:

PHP — Essential for adding functionality and dynamic content to your theme. It is the backbone of WordPress.
HTML — Used for creating the structure of your theme’s templates.
CSS — Used to style your theme and ensure it looks good across different devices and browsers.

Additionally, setting up a development environment is crucial. You can create one with DevKinsta, a local development suite for WordPress sites, by following these steps:

Visit the DevKinsta website to download the application for your operating system.
Follow the installation instructions for your OS.
Open DevKinstaand click New WordPress site.
Next, select the New WordPress site option and fill in the Site name, WordPress admin username, and WordPress admin password fields.
Finally, click Create site and wait 30-60 seconds for the site to be created.

Once your site is created, you can preview it, access your WP dashboard, and even see the file path to the local WP installation on your computer, giving you access to all the code.

Site details in DevKinsta.

Info

Suppose you have a live site on MyKinsta. You can pull your site to DevKinsta to work on it locally or use your preferred SFTP Client, like FileZilla, along with the STFP details of your site to access your WordPress files

Understanding the WordPress theme structure

Before diving into the step-by-step process of creating your classic theme, it’s essential to understand the structure of a classic WordPress theme and the key files involved. This knowledge will provide a solid foundation for your theme development.

The WordPress themes directory

All WordPress themes are stored in your WordPress installation’s wp-content/themes directory. Each theme resides in its folder within this directory.

Key files in a WordPress theme

There are two primary files every classic WordPress theme must have:

index.php — This is the main template file that serves as the fallback for all other template files. It is the core file that WordPress uses to display content.
style.css — This file contains the theme’s metadata and custom CSS styles. It’s crucial for defining the theme’s appearance and providing essential information, such as its name, author, and version.

To structure your theme well and add functionality, you can use additional template files, such as the following, which are common to classic themes and used in the example theme created in this guide:

header.php: This file can contain the header section of your theme, including the site’s logo and navigation menu.
footer.php: This file should contain the footer section of your theme.
functions.php: This file can be used to add custom functions, features, and theme support options.
single.php: This template file is used to display individual blog posts.
page.php: The template file used to display static pages.

Now that you understand the essential files and their roles let’s move on to the step-by-step process of creating your classic WordPress theme.

How to create a classic WordPress theme

There’s a popular saying that the best way to learn is by doing. Let’s apply that principle by creating a classic blog theme that displays your WordPress posts on the homepage with custom CSS styling and additional features.

Classic WordPress blog theme.
Step 1: Create a new theme folder

Create a folder within the themes directory, such as myblogtheme.

Step 2: Add theme metadata information

Next, let’s set up the theme details in the style.css file. Here is an example of some metadata information you can include in style.css:

/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

In the code above:

Theme Name: The name of your theme displayed in the WordPress admin area under Appearance > Themes.
Author: Shows the name of the theme creator.
Author URI: Links to the author’s website or profile.
Description: Provides an overview of the theme’s purpose and features.
Version: Indicates the theme’s current version for updates.
License: Specifies the distribution terms.
License URI: Links to the full text of the license.

You can learn more about these fields in the WordPress Theme Handbook.

After adding this information to your style.css file, navigate to Appearance > Themes in your WordPress admin area. You will see the newly created theme listed. When you click to see the Theme Details, you will notice that all the information you added appears there.

Classic blog theme details.

Info

Add a screenshot.png file to your theme’s root folder, and it will appear as a preview image on the Themes page. This makes it easier to identify what a theme will look like.

Now that we have the style.css file set up let’s move on to creating the other essential theme files.

Step 3: Create the main template file for your theme

The index.php file serves as the main template file for your theme. Any code you add here is used to display the main content of your site.

For example, if you add some basic HTML code here, everything displays when you activate and preview the theme. However, you want to pull information from your WordPress CMS to display via your theme’s template file, and this is where you use PHP to add WordPress functions.

Here is what the basic structure of the index.php file can look like:

In the above structure, get_header() and get_footer() are used to pull the header and footer sections from their respective template files (header.php and footer.php).

We will populate the index.php file with the right code, but let’s first work on the theme’s header and footer sections.

Step 4: Create the header file

The header.php file displays your site’s header section, which typically includes elements like the site logo and navigation menu. It also includes stylesheets, scripts, and meta tags. Here is what our header.php file looks like: