Create a Space theme for WordPress – 2021 – Part 2, Structure

Introduction

Part 1.

In Create a Space theme for WordPress part 2 we set up the core files, after importing some test data. We also install the Visual Studio Code text editor.

Import test Data

To make it easier to test the new theme you can import some test pages, posts, images, and users using a plugin named Site demo content. Install the plugin now and import the data.

Your site will look like a horrible mess but the imported data will save a lot of time later.

Change the home page

Go to Settings>Reading and change the home page to the page, Page image alignment.

You should see the imported menu items at the top and the Page image alignment page heading on your home page.

Install Visual Studio Code.

VS Code is a popular text editor with many features and extensions. Download and install it now.

Import the WordPress folder.

Open VS Code and click on Add folder to workspace. navigate to C>Laragon>www>spacetheme and click on add.

You should see the spacetheme folder, click on the arrow to expand the content. Portfolio is another project in the workspace not relevant to this series.

Create a Space theme for WordPress – Setup a new theme

expand the wp-content>themes folder and delete the existing themes. Go back to your home page and you will see a message that says The theme directory “twentytwenty” does not exist. Now we can begin to create a new theme.

In the themes, folder create a folder named spacetheme. In that folder create a file named style.css.

Add the code below. The style.css file tells WordPress the name of the theme it can also contain lots of other data that will not be applied now.

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

WordPress themes, the core files

There is one more essential file in a WordPress theme, that is index.php. This is the first file that is looked for and acts as the default home page. Add it now and leave it empty. Go to the back end and click on Appearance>themes, activate the Spacetheme theme. If you go to the front end now it will be blank, Next, we create the core theme files.

Create functions.php and the header and footer files.

In the spacetheme folder create three files named, functions.php, header.php, and footer.php.

The functions.php file contains all of the active code for your theme. It controls what is loaded and when, including any CSS or Javascript files used by the theme.

In the next tutorial we enque the CSS and javascript files and add Bootstrap.