Building WordPress Theme From Scratch - Part One

Introduction

Hi all! I am writing a series of articles on how to create a theme in WordPress and add functionality, like show blog post and add widgets on the front page. I will create this series for absolute beginners who want to improve their skills in WordPress, hence in PHP. So here, you can learn to build your own theme with all the functionality that you want in your theme.

Let’s get started then.

Steps

To build a WordPress theme, you have to perform these tasks first.

1. Create a new folder in C:\xampp\htdocs\xyz\wp-content\themes folder and give it a name that you want to give to your theme.

2. These 3 are the essential files to show your theme in Appearance -> Theme menu and to activate also.
   
   
   1. PHP
   2. CSS
   3. PNG

index.php - This is the main file to add the complete code of your theme and after some time, we separate all that code in some other code files.

style.css - This is the stylesheet to give style to your theme.

ScreenShot.png - This gives your theme a face to make a difference with others. There is a must do thing that you need to add image with the name of screenshot and png extension.

3. Then, you must add this piece of code to style.css for creating your theme in WordPress.
   

   /*
   Theme Name: Bhavya
   Theme URI: https://www.bhavyagaur.com
   Author: Bhavya gaur
   Author URI: https://wordpress.org/
   Description: Bhavya gaur
   */

4. After you have done all above things, go to your WordPress dashboard and refresh it. Now, click on Appearance – Themes. You will get the following screen.
   
   
   
   
5. After clicking on "Themes", you will see your theme showing in the "Themes" dashboard of WordPress.
   
   
   
   
6. After hovering over your theme, you will see two buttons - Activate and Live Preview.
   
   
   
   Just click on "Activate".
   
   
   
   A message will appear stating that the new theme is activated.
   
   
7. After activating your theme, click on the "Visit Site" option or open your site in your web browser. You will find a blank screen.
   
   
   
   

We get a blank screen because so far, we have added nothing to our index file and nothing is there in the style.css file. But, we are viewing this page because our theme is activated.

 

That’s all for this tutorial. In the next part, I will start adding some functionality to our theme.

Conclusion

This is a series of six parts. In this part, I have created a blank theme. In the next parts, we will learn how to add functionality and design in our theme. Until then, keep learning how to code.

Good Luck!