WordPress Theming from Scratch for Beginner

This post will help create your very first WordPress Theme from scratch if you have not yet. It’s going to be a clear and concise walk through and I assume that you already have your WordPress local installation setup on your preferred operating system. I’ll be using Windows 10 and I have installed and configured PHP 7.4.x, MySQL 8 and Apache-httpd 2.4 Web Server.

Video Walk through

  1. Install LAMP on Ubuntu
  2. Install XAMPP no Windows

If you need help installing WordPress locally, I have got videos for Windows and Ubuntu users on my YouTube channel.

Video Walk through

  1. Install WordPress on Windows 10
  2. Install WordPress on Ubuntu 18.04

Create WordPress Theme Directory

To create a WordPress theme from scratch, we need to create a theme folder/directory in WordPress Themes directory/folder.

You can create folder and files by clicking right mouse button or with the help of your text editor. I’ll be using bash in Windows 10 to create files and folders.

Bash in Windows CMD

I’ll be using bash in Windows 10 CMD to create files and folder. mkdir means create a folder with the given name and touch means create a file with given file name and extension. cd means change directory; this clearly means move from one to another folder.

To start using bash in Windows 10, enable Windows Subsystem and install a Linux distro like Ubuntu or Debian. Launch Windows CMD and type bash, hit enter and bash will be available in the current Windows directory.

mkdir theme_name

Create style.css and index.php in theme folder

Open your theme_name folder in your choice of text editor and create two files – style.css and index.php. These are two files that are the minimum required files to create WordPress theme.

Change the directory

cd theme_name

Create files

touch style.css index.php

Open style.css to Define your Theme

Open style.css with your favorite text editor and write the following code, that are self-explanatory. For more explanation you can have a look at this official page

/*
 Theme Name: Theme Name
 Theme URI: http://wordpress.org/themes/theme_name
 Author: Your Name
 Author URI: http://yoursite.com/
 Description: A simple custom blogging theme.
 Version: 1.0
*/

Now, save this style.css file and activate from wp-admin area.

WP Theme Name & Attributes

Theme Name: This lets you name your theme

Theme URI: If your WordPress passes theme testing parameters, your theme gets a unique WordPress theme repo URL and you can that URL here.

Author: You can put your name here as a WordPress theme author.

Author URI: Put your blog/site or social profile link here.

Description: You describe your theme features here, that helps optimize your theme for a specific keyword or phrase that might be targeting to rank for, in WordPress theme repository or on search engines.

Version: You can give your theme a version number, keep upgrading it whenever you add new features to your theme.

There are a few more theme description attributes that you can add to your WordPress custom themes. You can find all the theme attributes on this official page.


View Your WP Theme in the Browser

After activating your custom theme, now you can view your theme in the web browser but it will be completely blank, because our index.php is blank. To test the index.php, just write some php or html tags with content and refresh your browser and you should see that your theme is working.

Please bookmark this page for more, I’ll keep adding content to this page