Justin Tadlock
I would like to ask, what is the best way to learn to create WordPress themes from scratch? I would like to learn, but there seems to be no comprehensive resource for this.
Thanks for any help.
Mark
I have been around the WordPress community long enough to remember the days when there were sparse resources available. Those who were just starting out with theme development 15 or more years ago usually resorted to hacking away at an existing WordPress theme. Budding theme authors were building upon the shoulders of those few giants who had already taken the first steps. It was the magic of open-source at work — development learned through the act of forking.
Maybe it is the way I learned. Perhaps it is part nostalgia for those early days of going down an unknown path and arriving at the other side with a creation of all my own. But, I still believe the best way to learn any type of development cannot be found in documentation or books (says the co-author of a development book).
It is learned through trial and error.
It is learned through hours of mangling a project and not stopping until you fix it.
It is learned through sheer force of will, fueled by some innate passion within you that wants to see a project through. It is frustrating, but you keep going because you are having fun.
The best developers I have had the privilege to work with were not always the most knowledgeable. They were seemingly natural problem solvers. However, they did not awake one day with this ability. They earned it through years of tackling real problems.
First and foremost, the best resource for learning to build themes is an existing WordPress theme. Any of the default Twenty* themes are great starting points. Choose one, start making changes via your code editor, refresh your browser, and see what happens. Read the code. Look for patterns across various files.
You will not learn theme development overnight. It will probably take a few months before you are building basic themes from scratch. It will probably be a year before you are actually good at it. However, everyone is different. The amount of time you put into it is a factor. Your preexisting development knowledge and skills can change that. Sometimes, your innate gifts and ability to learn play into it. But, you will get there with a bit of effort.
I will be honest. The old-timers here in the community, those of us who started out early in WordPress’s history, had some help. Tung Do, known as Small Potato at the time, wrote one of the most comprehensive tutorial series on theme development the community has ever had on his now-defunct web design blog. It was an invaluable resource for several years. It was the answer to the missing documentation that everyone was asking for.
Theme development was also far simpler during that time. With a handful of files and templates, you could build something special.
Today, the landscape is much different. If you want to be competitive as a theme shop owner or build custom solutions for clients, you need a broader skillset. Even as a hobbyist, you need to pick up a few more things than you would have a decade and a half ago.
There is good news: the community is teeming with useful resources.
The theme development market is nearing an inflection point. WordPress will be introducing more and more tools for Full Site Editing in 2021, and this trend will continue in the years beyond. Traditional theme development will be around for a while — likely a few more years. However, block-based themes are the long-term bet. While there is some crossover between the two, they are entirely different systems.
Realistically, you will need to learn both methods, especially if you have financial motives for going down this journey.
However, you should learn traditional theme development first. This will make it easier to transition down the road. There are far more resources available too.
Another issue with learning block-based theme development as a starting point is that you may not know whether you are at fault if something is broken. The features that make up Full Site Editing are in a rough beta stage. The experience is still a partially broken one. Beginner theme authors should not pile onto what can sometimes be a frustrating experience.
It is time to start reading about Full Site Editing and testing block-based themes like Q and Block-Based Bosco. Then, wait for others as they become available in the theme directory.
Many people will point you to starter themes, command-line scripts, and other automated tools for kick-starting your theme development journey. However, there is no substitute for building a solid foundation.
I will assume you have some basic or intermediate HTML and CSS knowledge under your belt. If not, you should learn to build simple web pages first. Again, there is no substitute for building that foundation. It will carry you through as you get into more advanced topics. Knowing some basic PHP helps too. However, you can hack your way through your first WordPress theme with just WordPress “template tags,” which are technically PHP functions that sound less scary.
Your go-to resource should be the official theme developer handbook.
The breadth of knowledge available there was unavailable for those starting in the early days. You can build a WordPress theme from scratch by simply following along each page in the handbook.
While it was written in 2012, ThemeShaper has a 17-part tutorial series on developing themes from start to finish. With a few exceptions, most of the information in the tutorials is accurate. The underpinning of traditional theme development has not changed much over the years. This includes basic concepts like templates, The Loop, and similar elements.
ThemeShaper’s Theme Development category is a resource any theme author should be subscribed to. The team continues to post up-to-date tutorials on building themes. Recently, they have focused on block-based theme development. I am sure more tutorials are forthcoming as new features related to Full Site Editing unfold.
Of course, search engines are your friends. Run into a problem? I guarantee you are not the first with that specific problem. The solution is documented somewhere across the web.
If you want to begin block-based theme development, you will need to install the Gutenberg plugin for testing. Your resources will be limited. You will need to be a pioneer, mowing a path for others to follow. It will be a rough trek, but it also offers adventures that others have not taken.
WordPress’s block editor handbook has a guide on creating block-based themes. It makes some assumptions about your knowledge level in terms of theme development. Carolina Nymark, one of the Themes Team representatives, has a site called Full Site Editing. It includes an extensive course that is worth taking. There is also the Theme Experiments repository for testing what some people are currently building.
My strongest recommendation is to learn through trial and error while using documentation as a backup when you get stuck. Start playing around with Twenty Twenty or Twenty Twenty-One, the two most recent default WordPress themes. Make changes. Get yourself in trouble and break things. Learn by getting yourself out of whatever hole you have dug. Every failure is part of your path toward success. Most of all, enjoy it.
Now, I will throw this question out to our readers, many of whom are theme authors themselves. Will you share you tips, tricks, and resources for someone who is just starting to build themes?
Another great online resource for people interested in building themes for the new editor is the live Q&A hosted by Birgit Pauli-Haack, last year. It can be reached at https://gutenbergtimes.com/live-q-a-block-based-themes-for-full-site-editing-feature-in-wordpress/.
By the way, the Gutenberg Times website, as well as the newsletter and videos, are very valuable for anyone interested in following the evolution of the block editor more closely. Highly recommended.
Thank you, Marcio for the shout-out!
We will also have another Live Q & A – “Update on Site Editor and Full-Site Editing” with Carolina Nymark, Ari Stathopoulos and Anne McCarthy on January 29, 2021 at 11am ET / 16:00 UTC http://nptp.us/lqa0129
I started out using Thesis, but quickly realized I was learning to code Thesis stuff, not WP. I then switched to the Underscores (_s) theme. Building from _s made me dig into WP best practices and coding styles and gave me a sparse, working theme. I continued with _s until my retirement.
Thanks for this Justin. An excellent article. I did leave something out of my question which was how to make the jump from basic theme development to creating premium themes? Are there any resources like this? For instance, control panels, meta boxes, adding page buiders etc. I have found plenty of basic resources but it is a bit of a patch work that you have to combine to create the outcomes you are seeking. I do get that it is a bit of a trial and error proposition.
I don’t know if there is a one-stop solution for more advanced topics. There are really infinite things you can do, so nothing will ever be perfect in that regard.
If you want to build theme options, you’ll need the Customize API. It can be limiting, and to do more complex things, you’ll need to build custom controls from scratch or use something like the Kirby Framework. And, there are really some advanced things that are simply not documented.
For meta boxes, there is the meta box docs. But, there is no real form fields API behind it. So, you’d be custom coding all of that. Of course, there are frameworks/libraries like Advanced Custom Fields and Meta Box too that have a lot of pre-built things.
But, you are right about the more advanced stuff being a bit more patchwork. Over the years, WordPress has continued to add new APIs, particularly for forms, so developers end up having to learn completely different systems to do something as basic as an
<input> field. The block system is slowly changing that, bringing together different pieces. However, it’ll be a while before we have a holistic system.Starting with a boilerplate or starter theme is good. Using a theme dev framework like WP Rig is even better.
This is 100% true:
It is learned through sheer force of will, fueled by some innate passion within you that wants to see a project through. It is frustrating, but you keep going because you are having fun.
I actually started a YouTube channel several months ago, and I created several videos about theme development. (but all in Indonesian)
first part:
Great article Justin (and you have the t-shirt on this one, of course).
One other thing to consider is why you’re building this theme and where it is to be deployed. The theme on my current site is a mish-mash of Automattic themes; but as the theme is only for my site I pulled out all the code to do with the Customiser and anything else I didn’t need such as some styles and Page templates.
On the other hand, I’m just revising by sister’s home baking business site, which uses a child theme of a theme by Anders Noren. Here I’ve left the parent theme intact in case she asks for something it can deliver. Like all the other themes on wordpress.org and .com Anders’s theme are customisable by the end user, so you’ll need to include that functionality of you’re thinking of selling or submitting it.
Excellent post! Most advice I see on theme development is absolutely horrendous.
My advice to newcomers is to focus on the basics. Most new folk don’t learn the fundamentals of HTML and CSS and run into really weird problems because of it.
The only thing I disagreed with while reading your post was “Theme development was also far simpler during that time. With a handful of files and templates, you could build something special”. IMHO, you can still create something special with a few files and templates :)
I always wondered why there isn’t a site like Laracasts for WordPress. Laracasts helped me a great deal with learning PHP, OOP and Laravel.
But I can’t say I ever found material that concise for WordPresss Theme developement.
My start with developing themes was around 2015 with a post by Tania Rascia. It was about integrating a Bootstrap template into a WordPress theme and helped me greatly!
Great question, especially in 2021 as WordPress is changing. I began with static HTML/CSS sites, and it took me a while to convert them into dynamic WP sites because, as stated, there really wasn’t a comprehensive approach to this outside the very dense official documentation.
What really helped me was this post by a self-taught developer: https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/
Nowadays I build my sites as HTML/CSS/JS pages and and import them into Pinegrow Theme Converter. PTC displays the page and allows you to tag divs to include WP functions, so I can assign the H1 element as Post Title, some content Div as an ACF field, and so forth. The best part is that it handles enqueuing of stylesheets and scripts automatically, based on the folder structure of your HTML site. I’ve always disliked editing the raw functions.php file.
I’ve been working through the code in the 2021 theme. I’ve been able to break it in unimaginable ways! I’ve bookmarked and downloaded the resources in this post and comments – thanks, all – so hopefully I can start making changes I can keep. Thanks, Justin, for sharing your hard-earned knowledge.
Such excellent advice! But I had a chuckle at “The old-timers here in the community, those of us who started out early in WordPress’s history …”; 15 years, old-timers! The basic advice has been true throughout the 50+ years I’ve been programming (and I’m still enjoying it).
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
source
