Ever wanted to build a WordPress theme? I’m not talking about a child theme, or a theme built on a framework. I’m talking about a theme built from scratch.
I like to challenge myself every now and then and learn something new. This time around, I decided to build a theme from scratch. And found that it was much easier than I anticipated, thanks to a few free resources (which I’m happy to share with you).
So if you’ve ever wanted to build a theme from scratch, this article is for you.
I won’t be showing you the step-by-step process, but I’ll give you the tools, tips, and tutorials you’ll need to accomplish this.
Let’s jump in.
Where Do I Start?
Building a theme from scratch can seem like a pretty daunting task. It was for me. I am used to building child themes based upon frameworks. Building from scratch is a whole other ballpark.
Luckily, I have quite a few friends who build themes from scratch, and they recommended starting with something called underscores (also known as _s).
What Is Underscores?
If you haven’t heard of underscores, think of it as a template for building WordPress themes. As the underscores’ website says, it is not meant to be a parent theme that you can build a child theme upon. It is meant to be a theme in and of itself.
Konstantin Obenland of Automattic said the following in an interview with WP Tavern:
“Underscores comes from the combined experience of building themes for millions of users on WordPress.com, and creating default themes that ship with WordPress and have to work in all environments.”
Most of the team who has contributed to the underscores project are Automattic employees, the team behind WordPress.com and who have built many of the default themes that come with WordPress, including Twenty Fifteen (in fact, Twenty Fifteen was built using underscores).
So you know it was built with the highest quality code.
A “1000 Hour Head Start”
In the post announcing underscores, the title reads “A 1000 Hour Head Start: Introducing The _S Theme.”
Underscores really is a huge head start. You save so much time and start with a good foundation upon which you can build your theme.
From this head start, you can build a theme as simple or complex as you’d like. In fact, you can even start building a theme using underscores if you don’t know any PHP. You just need to be comfortable with CSS and HTML (if you aren’t, check out my article 5 Free Courses to Learn Web Development).
If you do know PHP, you can use underscores to lay the groundwork and build more functionality on top of it.
Getting Started With Underscores
So having decided to use Underscores, I visited the underscores.me website. I just entered the name I want to give my theme, entered some optional advanced info like author name and URL, and clicked generate. A zip file containing my newly created theme was downloaded to my computer and ready for me to develop.
So I loaded the theme onto my website, and this is what I saw:
Was not expecting such a barebones site. I’m used to working with Frameworks, which, when loaded onto a site, give some form of style that resembles a theme.
I realized that I needed a tutorial to walk me through this.
The Best Underscores Tutorials
I did some digging and one of the best tutorials I found for underscores actually comes from Automattic. You can find it on Theme Shaper, the blog of Automattic’s theme division.
Click Here to access it for free.
You’ll first notice that the tutorial was written in 2012 (the tutorial actually goes over the importance of being aware of when a tutorial was written). Some of the info is slightly out of date. But what’s important in this tutorial is that it goes in depth on how underscores is assembled so you have an idea of what all elements of the theme are doing. That is the best way to build your theme.
And I went through the tutorial and had no problem building out my theme.
If you prefer video tutorials, you can find one from Lynda.com called WordPress: Building Themes from Scratch Using Underscores and one from TutsPlus.com called WordPress Theme Creation with Underscores.
Please note that these two video courses are paid courses.
Tools That Made Theme Building Easier
Before you jump in and try building a theme yourself, I’d like to recommend a few tools that made it much easier for me.
First off, when building a theme, it is much easier to build it on a local development environment (aka, your computer). There’s no having to FTP files up to a server every time you make a change.
The tool that makes it incredibly simple to set up a local dev environment is DesktopServer from ServerPress.
You can also check out MAMP if you are on a Mac, or WAMP if you are on a PC. These are a bit more complex than DesktopServer, so if it is your first time setting up a dev environment, do check out DesktopServer first.
You should also install the Developer plugin from Automattic. It bundles a number of plugins which make theme and plugin development much easier.
Lastly, take a look at the Theme Unit Test page on the WordPress Codex. They provide a set of dummy text you can import into your site so you aren’t developing on a blank site. Also, once you have completed your theme, you can return to this site and run through the same checklist the WordPress theme review team uses before approving themes.
It’s Time To Develop Your Own Theme
It was actually quite fun learning how to develop my own theme from scratch. It not only gave me a new skillset, but deepened my understanding of WordPress.
If you’d like to give it a try, go through this article again. Download underscores. Choose one of the tutorials. Get the tools I mentioned. And get ready to start developing.
11 Comments