How to create a WordPress theme from scratch — A Definitive Guide

Note: This post hasn’t been updated for a while

Creating a WordPress theme is a very exciting project, especially when you are curious about how WordPress deals with themes. The current theme used on this site is the TwentySixteen theme from WordPress. I will be changing this theme to a custom based theme I have designed for my site. If you want to build a WordPress theme from scratch, you have come to the right place. In this tutorial series, I will show you how can build your own WordPress themes and understand how WordPress itself works on the presentation layer.

I will be using a CSS framework Bootstrap in my project. A CSS framework takes a great deal of load off the developer and you can literally save hundreds of hours by reusing the same components on different clients.
As the title mentions, we will be starting from base files index.php and style.css, because we need to understand some basic WordPress concepts before incorporating Bootstrap.

Here I have created a quick mockup on how my site will look after completion. The calculations are not precise.  There maybe small changes in the actual website but overall it will be the same.

The WordPress theme design

We have a standard WordPress blog with content on the left and sidebar on the right. But there are some neat tricks I will show you that will enhance user experience.The series will be broken into several parts. Each part will be explained along with the code.

This tutorial is intended for developers with basic knowledge of PHP, HTML5 and CSS. We won’t be using too much Javascript here, but I will show you some of its basics. Bootstrap incorporates responsive design as well.

Theme development requirements

• Local server. Recommended you use XAMPP from Apache friends.
• Copy of WordPress.
• A copy of Bootstrap files. (Current version: 3.3.6)
• Text editor like Atom, Sublime Text or anything you fancy.

So lets build a WordPress theme from scratch.

Next tutorial : Setting up of Local WordPress development environment.