This is a tutorial series covering the basics of developing a WordPress theme from scratch. It’s for you who have dabbled a bit in changing other themes, wishing you knew enough to create your own, or tried making your own theme from scratch, but had a hard time understanding the basics of what a theme needs. Through 12 lessons this tutorial aims to guide you through developing your very own WordPress theme, while learning common practices and the basics on how WordPress works. The goal of this tutorial is not to finish with an amazing-looking and ready-to-use or sell theme, but to give you the solid foundation necessary to build and extend on it.
I recommend that you write out everything yourself instead of copy+pasting the code. That’s the best way to learn (don’t worry, we’re not talking about thousands of lines here)! The lessons are set up so that you learn what each bit of code does, step by step, so that you can modify and add to it along the way, so you can get it to be just like you want it to be or look like. At the end of each lesson I will link to documentation pages for each method used, usually to WordPress Codex.
This tutorial will not cover any styling (CSS), however it does explain how you can add your stylesheets to your theme and goes through how to tell WordPress to dynamically add useful classes in your HTML. I encourage you to style your theme for yourself as you follow along.
Prerequisites
This tutorial is for you who:
- Know the basics of HTML and CSS
- Know a bit PHP. You don’t need to be an expert, but should know the basics
- Are familiar with using WordPress
- Want to learn!
What you will need to follow this tutorial is:
- A local development setup. You can develop by transferring over FTP to a domain, but it’s recommended to set one up locally. You would (obviously) also need to have WordPress installed in your development site. I explain shortly how to do this in Part 0.
- A good text editor. You can use any editor, such as Notepad and the like, but it’s recommended to use a software targeted for coding (it’s easier to read, find and write code). Personally I use Sublime Text 3.
Tutorial Table of Contents
Below there are direct links to all 12 lessons in this tutorial; however at the end of each lesson you’ll find nagivation links to the next or previous lesson, so you don’t need to come back here.
Without further ado, let’s begin! If you already have a local WordPress development setup, skip right ahead to Part 1: Introduction.
- WordPress Theme Tutorial for Beginners – Part 0.5: Setting up Local WordPress Development
Step 0.5 in WordPress theme tutorial for beginners covers how to set up a local development environment with WAMP or XAMPP and install WordPress.
- WordPress Theme Tutorial for Beginners – Part 1: Introduction
In this lesson we learn the basics of how a WordPress theme loads content, what’s needed for a valid theme – and we’ll create our first theme!
- WordPress Theme Tutorial for Beginners – Part 2: Templates
This lesson will teach you how to structure the main building templates in a WordPress theme. We will start creating the most important templates.
- WordPress Theme Tutorial for Beginners – Part 3: Dynamic Content
In this lesson you will learn about hooks in WordPress and how to access and output dynamic content from WordPress in the header.
- WordPress Theme Tutorial for Beginners – Part 4: The Post Loop
In this WordPress theme for beginners lesson we will go into detail about the post loop in WordPress; what it is, how it works and why we use it.
- WordPress Theme Tutorial for Beginners – Part 5: Accessing Post Information
This lesson will be all about how we can access and output information from each post when inside the WordPress loop using template tags.
- WordPress Theme Tutorial for Beginners – Part 6: A Theme’s Functions.php
In this lesson we’ll learn about and how to add the WordPress theme’s functions.php file and how to add a theme’s stylesheets and scripts the proper way.
- WordPress Theme Tutorial for Beginners – Part 7: Theme Setup and Featured Images
This lesson continues by adding the basic, required code for setting up a WordPress theme. We learn to add theme supports and filter the frontpage title.
- WordPress Theme Tutorial for Beginners – Part 8: Translation
We learn about how translation (or i18n) in WordPress works and how to make texts translatable. Also includes a guide in using PoEdit to generate “.po” files.
- WordPress Theme Tutorial for Beginners – Part 9: Menus and Widget Areas
This lesson covers how to add navigation menus by registering menu location, and also registering and placing widget areas in WordPress.
- WordPress Theme Tutorial for Beginners – Part 10: Adding More Templates
In this lesson we will learn about template parts and create more templates to our WordPress theme. We will also add comments template to single post view.
- WordPress Theme Tutorial for Beginners – Part 11: Custom Page Templates
In this theme lesson for beginners we learn about custom page templates in WordPress; what they are, how to create them and best practices.
- WordPress Theme Tutorial for Beginners – Part 12: Custom Post Query
In this WordPress theme lesson you learn how to write your own query of posts and loop through them without interrupting the parent loop in the template.
- WordPress Theme Tutorial for Beginners – Conclusion and Next Steps
We conclude the WordPress theme tutorial for beginners with a quick recap and look at the next steps to improve yourself as a WordPress theme developer.