Create your own WordPress theme

Part 3. Theme requirements and files

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

Creating a WordPress theme requires coding. It is a software project that needs a server environment to run the development site and a code editor to type the theme source code. And the knowledge to know what to write and where. The purpose of these tutorials is to help you do just that. Enjoy the journey.

Development environment

Before you can start, you need a local development environment. If you do not yet have one, please read my article about installing LocalWP and setting up WordPress. You can find the articles here.

Code editors

To write code, you need a code editor. There are many articles explaining which editor is the best and why you should use just that. Ignore them. 

Every editor does the same trick. Of course, there are differences, but all the editors are equal while doing WordPress development. 

Choose the one that you like the best. That’s all. For these tutorials, I can recommend some editors. So choose the one you like.

All the editors mentioned above are available for Windows, Mac, and Linux. They all are free but Sublime Text is free only for evaluation purposes. A license must be purchased for continued use. I use primarily Sublime Text (a licensed version). 

The type of theme we are creating

In this tutorial, I create a classic theme. A classic theme uses PHP templates for theme parts and content. The new block themes use HTML files, but I’m not going into these.

Theme folder, the location of theme files

WordPress themes are located in /wp-content/themes -folder. Each theme is in its folder. Name the folder with the name of your theme. In this tutorial, I created a theme named WPSmithy, so the theme folder’s name is wpsmithy.

Required theme files

Each theme needs to have some files. You’ll need many more, but you can start with the minimum files for our theme, which are:

  • style.css
  • functions.php
  • index.php
  • screenshot.png

The role of these files

WordPress reads all the information about your theme from style.css. We’ll write the information in a comment at the beginning of the file. So, style.css is not only the look and feel of your site but also the theme info. Functions.php is, as the name states, the functionality of the theme. Index.php is to show the page content. And finally, the screenshot.png. Screenshot.png is the theme image in WordPress Appearance – Themes. I will explain these files and their usage later.

This is the folder contents at the beginning of our project.

New theme folder contents.

Screenshot.png

The screenshot.png should present what your theme looks like. The file size is 1200px x 900px and file format should be .png. The screenshot file is not mandatory unless you want to get your theme listed in wordpress.org/themes directory. But a nice picture is always good and gives your theme a nice finishing touch.

Theme style.css file

Style.css is the main stylesheet for the theme. style.css in the theme root folder is mandatory, but you do not need to place all your site styling in this file. Styling can stay in other stylesheets, which are enqueued in the functions.php file.

The mandatory theme comment in style.css

The main style.css in the root folder of your theme is the file that describes your theme. This is the very file, you place all information about the file; the name, author, etc. All the info is in a comment at the beginning of the file. Below is an example stylesheet with a ready made comment.

				
					/*
Theme Name: WP Smithy
Theme URI: https://codebase.dev/themes/wpsmithy/
Author: Kari Selovuo
Author URI: https://codebase.dev
Description: This an example theme which is a result of codebase.dev WordPress theme development tutorials. This theme is also a code sample in the book that is based on the codebase.dev articles. This theme show and explain all the basic elements of a classic WordPress theme.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpsmithy
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
				
			

Theme comment keys

The comment has some predefined mandatory keywords that you need to define. This is a list of all the keywords. Keyword indicated with an asterisk (*) are mandatory for a theme in the WordPress Theme repository.

  • Theme Name: * (name of the theme)
  • Theme URI:
  • Author: * (name of the individual or organization who developed the theme)
  • Author URI:
  • Description: *
  • Tags:
  • Version: *
  • Requires at least: * (the oldest WordPress version the theme will work with)
  • Tested up to: * (the last version the theme is tested with)
  • Requires PHP: * (the oldest PHP version the theme supports)
  • License: *
  • License URI: * 
  • Tex Domain: * (string used for textdomain for translation)

If the theme is for your personal or your customer, only the name and text domain are needed but it is good to provide more information. 

You can read about style.css in WordPress documentation.

Functions.php

Functions.php is the file to add some unique features to your theme. In this tutorial, you will learn how to use functions.php as the backbone of your code and use it to “call” other code files as they are needed. I will show how to structure your code in smaller units (separate files) for cleaner code and to make it easier to maintain.

Index.php

This is the WordPress template hierarchy file responsible for creating content for the user. In WordPress, there are separate files for different kinds of content. We will have a template file for a page, a separate template for front-page and, a template for a single post, etc. If WordPress can’t find the specific template file, it uses index.php as a last resort. But this is what we will start with.

The contents for index.php we will create in a later tutorial.

Activate your new theme

Next, we will use our new, although empty, theme. Select DashboardAppearanceThemes and choose the theme you have just created.

Activate a new theme in WordPress.

Activate the theme and check what your site looks like. It should be like this – empty.

Empty browser window.

In the following tutorial, I explain the WordPress system, and we do some tests with our index.php and finally start implementing the static page design into the theme.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

Your email address will not be published. Required fields are marked *