WordPress Theme development is a popular way of building WordPress sites for clients or for your own business if you’re into selling themes. But when starting out, it’s hard to choose how to approach it and what to read, learn or watch. In this guide, I’ll try to guide you into developing WordPress themes.
Before trying to do any developing with WordPress, you need to have a server and WordPress installed on it. I have tried several tools for local development that allow you have a working server (not public). If you are a beginner or just a developer who wants to immediately start developing without worrying about setting WordPress properly, you should try Local by Flywheel.
I have a video on that topic which you can watch here.
If you’re into WordPress theme development, you need to learn about some of the basic concepts in WordPress. Once you understand the basics, you can develop themes much easier. And also, you can then know what to look or search for in google 🙂
You can start a custom WordPress theme with only 2 files:
style.css. That’s all you need. And you probably already know about that. So what are some other files you should try out? Maybe some, but several should be used:
footer.php– templates to be used for header and footer of your page
single.php– Template for all single posts (or post types)
single-$post_type-$slug– Template that targets a specific post type (
$post_typeis the post type of the post and the
$slugis the post name of the post
page.php– Template for single pages (A page slug/id can be also added to it to target specific pages)
attachment.php– Template for attachments
404.php– Template to be used when there is no content found
home.php– Template used to display blog posts
front-page.php– Template used for the first page of the site
archive.php– Template for displaying an archive (can be also specified with a custom post type slug)
taxonomy-$type.php– Similar to
archive.phpbut for specific taxonomies
You can also have custom templates, and I would advise always to name them
template-something.php with the word template being always the first one. To learn more about template files, you should check the Theme Handbook.
Each file that is used to display a page or post or some other content, should also have the function
get_header() at the beginning and the function
get_footer() at the end of the file. If you want to have a specific header or footer, you can pass a string to those functions. For example, if you pass a string new and have a file
header-new.php, that file will be used for the header. If it doesn’t exist, WordPress will use the default
header.php. That’s what WordPress template hierarchy is.
WordPress always tries to load a template you want and default to
index.php as the last resort. So, if you’re on a single post, WordPress will try to find:
single-$id– ID of the single post
single-$posttype-$slug– Slug of the single post or post type
That’s the reason why
index.php is a file that must be included in your theme. To learn more on how that can help you in WordPress Theme development, you should check the Template Hierarchy.
Template Tags & The Loop
Template tags are actually functions which you can use in or even (some) outside of the loop. There are a lot of template tags and the complete list can be found here.
For example, the template tag to display the title of the current post inside the loop is
the_title(). This will immediately use the current post’s ID and display it on the page. If you don’t want to display it but just return it to a variable, you could use
The WordPress loop is a
while loop that goes over the main WordPress query which queries the database for posts based on criteria provided on the page. If the page is a single post, the loop will have only that one post. If it’s an archive and we are on page 2, the loop will show X number of posts (where X is the number set in the settings of WordPress) and it will also offset the posts so that the loop shows posts that are meant to be on the second page.
How does the Loop look like?
You can learn more about the WordPress loop here.
In WordPress Theme development, it is known that some themes will have some specific functionalities. The file that WordPress loads from a theme is
functions.php. This file will be used to include theme specific functions. You can always have a
inc folder to have more files and include those files inside the
Some of the stuff you should put there are:
- Theme Setup function
- Register Theme Sidebars
- Register Theme Menu Locations
- Define what does the theme support
- Include scripts & styles
Example: Theme Setup
To start a theme setup you need to have a custom function that you would hook into the action
By hooking our function inside that action, we are sure that everything will load correctly after the theme has been fully loaded. As you can see in the code example, after the theme has been fully loaded, we are then registering our menu locations.
You can learn more about the Theme Functions here.
Styles & Scripts
A standard way to include styles & scripts in the WordPress theme development, is to enqueue them. You should NOT add them directly to the header or footer of the theme.
So, how to enqueue them? We will use the hook
The main style file
style.css needs to have the Theme definition.
Sidebars are places we register in our theme and then we can add widgets to them. Sidebars are defined inside the
To register a sidebar, you will have to use the function
register_sidebar() and that function should be hook inside the action
When registering a sidebar, you need to define some parameters inside an array:
name– Name that will appear inside Appearance > Widgets
id– id of the sidebar that you’ll put as a parameter inside the function
description– provide more info about that sidebar
class– class to be added on the admin side if you want to style it a bit. Won’t be used on the front.
before_widget– HTML that will be used before the widget
after_widget– HTML that will be used after the widget
before_title– HTML that will be placed before the widget’s title
after_title– HTML that will be placed after the widget’s title
How to use the Sidebar?
When you want to use a sidebar, then you can use the function
get_sidebar(). By doing that, you will be able to call the sidebar in several places such as in files
page.php. To use it, we need to pass a string inside that function:
That function will now look for a file named
sidebar-main.php. To show our sidebar in that file, we need to place something like this:
This will look if our sidebar has any widgets and if it has, it will load them.
Beware of the Theme Lock-in Effect
With WordPress theme development, you have to be careful with dividing theme & functionality. The so-called Theme Lock-in effect is the scenario where you provide a lot of functionality which is then lost when your user activates another theme.
Let’s look at a simple scenario:
Your theme has a post type Events. The user of your theme inserts a lot of events. But then after some time, he/she decides to use another theme to help them with their events business. But as those events were defined inside the previous theme, all that data is not visible anymore.
The events, that were inserted into the database, are left there, but the new theme does not know about them and how they were registered, so they do not show up on that new theme.
To avoid that, those events should have been defined inside a separate plugin.
WordPress Starter Themes
WordPress theme development became a little easier with starter themes. Starter themes are basic themes that you can use to built your theme upon it. Many of such themes include basic style definitions, several files such as
archive.php or other and also provide several functions inside the
Here is a list of some of them:
- _s (Underscores) – a theme that I also use when building a theme. It has defined functions that you can use in your theme and a nice folder structure you could follow as you go along
- UnderStrap – a underscores theme based on Bootstrap 4 to immediately provide you with a responsive layout
- Sage – a more advanced theme which has other tools inside such as gulp and bower to help you speed up your workflow
If you’re just starting out, I can suggest you to start working with underscores.
Child Themes are something that can also help you with your WordPress theme development. Such themes are actually dependant on a parent theme. That means that if you’re going to build a child theme for Divi, your theme will need the Divi theme to be installed.
Also when doing that, your child theme will inherit everything from the parent theme. That is a nice way if you have to change a theme but still, want to be sure that an update won’t delete all your changes.
To make a child theme, you need to have a new definition inside the
style.css of the child theme and that is the
Template. The value is the slug of the parent theme.
Including the Parent Theme Stylesheet
Many of child themes are using the css
@import to get the stylesheet of the parent theme. If you are serious with WordPress theme development, I would not recommend that approach.
Why? Even if that is put inside a CSS file, it will load another file. Since in the WordPress theme development handbook, you can learn how to enqueue styles and scripts, I would use that. So instead of a CSS
import just use another
Here is an example on how you can enqueue the style from the parent theme:
get_template_directory_uri() is always using the parent theme URL. To get an URL to your child theme, you should use the function
get_stylesheet_directory_uri(). That function will always return the URL to yoru current active theme.
When you’re done with your theme, you need to test your theme. To make the WordPress theme development a bit easier, you already have a solution for that.
There are two ways to test your theme and I think you should always go through both.
The first one is to import the test data. You can download it from the Theme Testing Page. This will import a lot of pages & posts with images & galleries. You can then go through each and fix the styles that needs to be fixed.
You will probably have to fix some of the PHP code also.
The other way is to go through manual steps which can be found on the Codex.
WordPress Theme Development Tutorials
So, now you are equipped with some knowledge about WordPress Theme Development. But, when I started, I like to read a lot of tutorials (or watch them) on the same topic.
Here is a list of some:
- The ThemeShaper WordPress Theme Tutorial: 2nd Edition
- Theme Development Tutorials on TutsPlus
- Developing a WordPress Theme from Scratch
If you want some premium videos on building themes & plugins, you can check out my own WordPress Development course: Become a WordPress Developer.