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 you will start learning how WordPress loads content depending on which page you’re at, and the hierarchy of theme template files. You will also learn what’s needed for a valid theme. And at the end we will finally create our theme and activate it.
- 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 of the WordPress theme tutorial for beginners we will learn about hooks in WordPress and add a few hooks in our theme that is required for a theme to work properly with WordPress and plugins. We will also start accessing dynamic content from WordPress in our header, such as automatically getting the current page title.
- WordPress Theme Tutorial for Beginners – Part 4: The Post Loop
In this lesson of the WordPress theme tutorial for beginners we will go into detail about the “post loop” in WordPress; what it is, how it looks like, why we use it and how to access posts. We will then go about implementing the loop in our theme.
- WordPress Theme Tutorial for Beginners – Part 5: Accessing Post Information
This lesson of the WordPress theme tutorial for beginners will be all about how we can access and output information such as its link, title, and more from each post when inside the post loop. We do this with template tags. In the process we will also add the single view templates to our theme.
- WordPress Theme Tutorial for Beginners – Part 6: A Theme’s Functions.php
Today we will learn where and how to add code outside the templates in our theme. We do this by adding the theme’s functions.php file. Along the way we’ll also learn how to add your 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 two core WordPress features to our theme; menus and widget areas. We learn how to register a location for a site main navigation menu and output the menu in our templates, as well as allowing adding widgets in our sidebar and footer area.
- WordPress Theme Tutorial for Beginners – Part 10: Adding More Templates
In this lesson of the WordPress theme tutorial for beginners we will dive more into templates. We’ll learn about template parts and implement it for reusability. And we’ll add more of WordPress’ default templates to our theme.
- WordPress Theme Tutorial for Beginners – Part 11: Custom Page Templates
In this lesson of WordPress theme tutorial for beginners we learn about page templates, what they are, how to create them and best practices. We’ll make a fullwidth template as an example. Along the way we also add a class to body by asking if the page is using a specific page template.
- WordPress Theme Tutorial for Beginners – Part 12: Custom Post Query
In this final lesson we learn how to write your own query of posts and loop through them without interrupting the parent loop in the template. We’ll make a template part for single posts that shows related posts in the same category.
- WordPress Theme Tutorial for Beginners – Conclusion and Next Steps
We conclude this WordPress theme tutorial for beginners by taking a quick recap of what we have learned. And look into what you can do next and how to improve yourself as a WordPress Theme developer.
