The first thing I had to learn about PHP was that I didn’t have to learn everything about PHP. I needed to be resourceful more than anything.
Understanding that it was okay to copy and paste code from other sources was hard for me to accept. I wanted to know everything up front that way I could do anything I wanted with the language.
That resulted in many years of not knowing PHP when I should have. Lame.
The same thing happened when I started tweaking WordPress themes and theme frameworks. There was more to the theme building process than I could wrap my head around so I avoided learning. Instead, I just kept tweaking other people’s themes.
It wasn’t until my freelance income was threatened by a major change in one of the tools I used that I realized I needed to learn more if I wanted to pay my bills.
Lucky for me, there was another tool just waiting to usher me into the next level of WordPress theme development and all I had to do was download it. Let’s talk about it.
Underscores (_s) Starter Theme for WordPress
First of all, it’s built by Automattic… you know, the folks responsible for WordPress.com, Jetpack, Akismet, and contributions to software like WordPress.org and bbPress. Not to mention Matt Mullenweg’s name is in the company name AutoMATTic.
I think it’s safe to say that the Underscores (_s) Starter Theme is a great foundation to start building a solid WordPress theme on.
In fact, it’s so solid that I decided to build my How to Build a WordPress Theme course based on it. If you’re completely unfamiliar with theme building at this point, go ahead and open the course up in another tab so you can start right after reading this article.
Moving forward, let me explain how Underscores takes you to the next level.
Just like I had to learn about PHP, building WordPress themes is not something you want to sit down and study before ever attempting to do.
Sure, there’s some information you may want to brush up on, like what a theme is responsible for and what should be left up to plugins. But for the most part, learning about WordPress theme building comes from building themes… period.
Underscores is such a great place to start because it puts you right in that sweet spot between just enough to show you the big picture and not enough for you to run with without learning.
It’s a fully functional theme with no visual styling. However, all of the basic theme components along with a few useful extras are waiting for you to use in your final product.
Using Underscores is equivalent to copying and pasting code from another source and tweaking it to your liking.
We all learn how to do that before we learn to code from scratch. So using Underscores as a starting point and tweaking it into something unique is not only the best way to get started theme building, it’s also exactly what the theme was made for.
Getting Started with Underscores
Underscores can be downloaded in two places, the second of which is a real time saver and very useful.
Underscores on Github
The main place to download Underscores is straight from Github. The code is fresh and you can see all the development and contributor action right in front of your eyes.
I like to get my copy of Underscores from their slick, branded website, though. This one-page website includes a form that serves two main purposes.
- It takes information that will be used to build your
style.csstop comment block.
- It brands your theme by accepting a “theme slug” and using that to name your functions, set your text domain, and many other things.
Even better, it still pulls Underscores straight from the Github source so you always get the most up-to-date version. This route just adds a few awesome benefits. Check it out.
The first thing you want to do is get familiar with how Underscores is set up. Again, if you don’t know much about WordPress themes at all, you’re better off following the How to Build a WordPress Theme course.
Go ahead and install the theme on your development server.
Look around the theme root to understand its simple file structure and how it uses get_template_part() to link template files together.
Also take a look at its
functions.php file to see how it use other files and resources throughout the theme’s few directories.
Go into the
layouts directory and copy some of its sample CSS to paste into your
style.css file so you can see a more visual representation of the theme’s HTML structure.
In other words, poke around the files and code so you can compare it to what you see on the front-end of the site and in the WordPress dashboard.
For a clear look at the overall HTML structure, open up the
index.php (which is similar to many other basic template files) files.
Most everything in the theme is self-explanatory. However, seeing it fully functional all in one place just may give you the edge you need to take things to the next level.