Creating a WordPress theme Part 1 – The setup

This series is about how to create and develop a WordPress blog theme in 2021 using the correct methods and techniques.

Part 1 is the installing and setup of WordPress and base theme.

For this guide you will need a local webserver with PHP and MySQL, I will be using XAMPP and HeidiSQL for this series.

Download and Install WordPress

Download the latest version (5.6) of WordPress here and unzip the contents into

C:\xampp\htdocs\firsttheme

You will need to create the folder “firsttheme” in your htdocs or web server root directory.

The setup

Navigate to http://127.0.0.1/firsttheme

The WordPress setup page will load.

Continuing through the steps you will come to a form asking for:

• Database name
• Username
• Password
• Database host
• Table prefix

For Database name put first_theme. Username is root and leave the password empty. This is the default XAMPP MySQL connection account.

The Database host is localhostand for the Table prefix put in several random characters followed by an underscore e.g vwPh_

Before Clicking submit open HeidiSQL or your other SQL client of choice and create the first_theme database;

CREATE DATABASE `first_theme`

You can now submit the web form.

Upon success, you will come to the information form for the WordPress website you are installing. This will ask for the site title, username, password and email. Fill these out as desired and submit.

You will now be directed to login with the details you just set. WordPress has been installed and is ready to use or in this case, develop a theme for.

Creating the theme folder & files

Create a new folder in wp-content\themes\ for what your theme will be called, mine is sampletheme.

In your theme folder (wp-content\themes\sampletheme) drop in index.html and style.css. This is a basic blog framework and styling using Bootstrap 4 (abstract from Clean Blog).

Rename the index.html to index.php. On line 23 of index.php turn

<link href="style.css" rel="stylesheet">

into

<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">

This will link to style.css correctly as get_bloginfo('template_directory'); returns the URL of the active theme’s directory.

To select this newly created base theme in your WordPress admin panel (http://127.0.0.1/firsttheme/wp-admin) go to Appearance/Themes

You will see your theme (named after the folder) without an image, amongst the few default WordPress themes

Hover over it and click activate. Now when you go to http://127.0.0.1/firsttheme you will be faced with the template theme:

This concludes part 1. Part 2 will contain dividing the theme to files and theme parameters.