Develop a WordPress Theme, 2021 -part 2, theme structure

  1. Part 1, setup and environment

This is part two of a course on modern WordPress theme development. It is not a stand alone tutorial.

Theme folder and structure

Log in to your project site back end and go to Appearance>themes, you should see the default themes from the last few years, in this case 2020 is active.

Open Visual Studio Code or your preferred text editor, then open the theme folder for you project usually C>Laragon>www>name of your project>wp-content>themes. You should see the pre-installed themes in the folder.

Below the index page for the 2020 theme is open in VS Code.

The core theme files

There are about ten core theme template files.

Add index.php and style.php

Create a new folder in the themes folder and name it portfoliotheme. There are several core files that a theme needs to work. The most importation is index.php followed by style.css. Create them now in the portfolio theme folder.

The first file that Word-press checks in a theme is stlye.css this contains information about the theme such as it’s name and author. To keep it simple paste the code below into your style.css file. There are many other items that can be added here.

Check out style.css in the theme developers handbook

/*
Theme Name: Portfolio
Author: Geoffrey Whittaker
*/

If you go to Appearance>Themes in the site back end you should see the theme listed.

To add an image to the theme listing, just place an image named screenshot.png in the folder for this theme. It has to be 1200px by 900px in size.

Add functions.php, page.php, single.php, archive.php and front-page.php

Functions.php is used to control active parts of the theme such as enquing files, add it to your theme now. Page.php is the default template file used by pages, also add this file.

Next add single.php, this is used by a single blog post. Now add archive.php, this is used to display a list of blog posts.

Now we get to some of the more specialised template files, add front-page.php. this file is used by the page that is set to be the home page, for the theme.

In part 1 the home page was set to a static page.

Type This is the home page into front-page.php and go to your theme in the browser. The text should be seen and nothing else as this is the only template file with content at the moment.

Your theme folder should now look as below.

Leave a Reply

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