Learn how to build a complete WordPress theme from scratch with our simple, beginner-friendly tutorial. Whether you want to create a custom blog or a dynamic business website, this WordPress theme development tutorial will guide you step-by-step — from a basic HTML template to a fully installable WordPress theme.
Why Learn WordPress Theme Development?
WordPress is the world’s most popular CMS for blogs and websites. With WordPress theme development skills, you can create highly customizable websites for clients, your own business, or personal projects.
Step-by-Step WordPress Theme Development Guide
Step 1: Install WordPress
The first step is to install WordPress on your local server or web hosting.
How to install WordPress:
Download the latest WordPress version from wordpress.org.
Turn on your local server and MySQL (if you are using XAMPP, MAMP, WAMP) or login to your cPanel if you are working on a live server.
Create a database (Database Name, Username, Password, and Hostname).
Place the unzipped WordPress folder into your hosting folder (htdocs for XAMPP, www for WAMP, or public_html for live server).
Open your browser, navigate to your localhost/project-folder, and follow the WordPress installation wizard.
👉 Read full WordPress Installation Tutorial
Step 2: Prepare and Split Your HTML Template
To build a WordPress theme, you need an HTML template first.
Steps to split HTML files:
Copy your HTML, CSS, JS, and images into a new folder inside
wp-content/themes/your-theme-name
.Open the home page in a code editor.
Identify and separate the common parts:
Header Section → Create
header.php
Footer Section → Create
footer.php
Sidebar Section → Create
sidebar.php
Main Content → Create
index.php
Replace header, footer, and sidebar portions in the respective files.
Use WordPress template functions:
👉 Learn how to split HTML for WordPress
Step 3: Create a style.css
to Define Your Theme
WordPress requires a style.css
file to recognize a theme.
Steps:
Create a new
style.css
file in your theme folder.Add the following information at the top:
👉 Learn more about WordPress Theme Styles
Step 4: Create functions.php
The functions.php
file is used to add custom functions to your theme.
Steps:
Create a
functions.php
file inside your theme folder.This file will handle theme features like:
Enqueue scripts and styles
Register menus
Register widget areas
Add theme supports
👉 Understand WordPress Theme Functions
Step 5: Add a screenshot.png
To show a thumbnail preview of your theme in the WordPress dashboard:
Take a screenshot of your theme’s homepage.
Save it as
screenshot.png
.Place it directly inside your theme folder.
Step 6: Create a Simple Theme Options Page
You can create a basic Theme Options Panel using functions.php
.
Example: