If you’re just starting out with WordPress and wanted to create WordPress themes from scratch, read on, and learn from my experience. Creating WordPress themes from scratch is an ambition for people who just started out developing WordPress. Most of these beginners tend to choose a shortcut to creating their own custom themes for their WordPress sites, either by customizing a polished theme, or creating child-themes from a theme framework or what we usually call, Parent Themes. These are great methods when starting to create your own theme, but if you’re like me, who wanted to learn every piece of code on the run, be independent and in control of my themes, then I suggest creating your own theme from scratch. Well, not really start from scratch where you start with no files, but start from something that as minimal as possible.
Create WordPress themes from scratch – What benefits you:
- Add only what you need
- Less or no bloatwares
- You start small and light
- Easily familiarize the code structure
- Easily learned
As I was starting out to learn WordPress and decided to create WordPress themes, I immediately dug into theme frameworks, convincing my self that I could learn a lot from the framework itself. So, I chose the frameworks where I can quickly setup my theme. While exploring these themes and try to build themes from them, I found out how much files I need to handle and learn, a lot of doors to explore and more dots to connect. I then realized I was spending a lot of time learning each bit of section and each bit of code from the framework, where the majority of the codes are useless at the moment where I was just starting out, thus wasted a lot of my time. Some of these themes are also greatly styled, adding up more HTML tags and more CSS codes. These additional lines of codes and additional template files really slowed my progress down, the exposure to these codes, snippets and functions is so overwhelming for a person that is just starting out and has no idea how these extra lines of codes work.
Imagine that you have 60 files in your theme, only 4 of these files are familiar to you, and when you preview your site, there’s something showing up in every page where you can’t figure out where it came from. The solution for this, is to check every file and dive into a pool of codes and search for it, very frustrating.
You’ve got to learn to crawl before you can walk. Big changes start with small steps.
Starting small means you’re in control of everything around you. The benefits of starting small in creating your own theme is you easily get familiar with the codes and the files, you’ll easily put into memory each section of code and where it belongs, you add only what you really need, and you can easily change with less effort needed. You can’t learn all those codes in just a glance, each function and each unfamiliar term roots more deeply into a much more complicated process. My point is, start with the basics, learn how to write the alphabet, proceed to words, and construct your own sentence, instead of jumping right into writing essays, got my point?. These fully featured frameworks does the same thing, instead of learning how to create WordPress themes, they give you more to learn about things you don’t need at the moment (e.g. how to setup the plugin, how this plugin works), thus slowing your progress in learning what you really need.
Start from scratch – not really
As I’ve stated before, I’m not referring to starting from nothing at all, but instead, start from something that is as minimal, as bare-bones as possible, I’m referring to starter themes. These theme frameworks does not act as a parent theme, instead, create WordPress themes from it by editing the framework itself.
There are lots of starter themes out there, but I’m going to show you my four top picks and my thoughts for each of them.
“Modern WordPress Development” “a WordPress starter theme, helps you make better themes with HTML 5 Boilerplate, Bootstrap, and Grunt.”
Roots is over all, a great starter theme, it’s clean and organized, it’s written with best coding practices, built with LESS, and it’s bootstrap-ready (if you’re familiar with Twitter Bootstrap). With a little bit of setup to install the tools required, you can then start to create WordPress themes with the powerful starter theme.
“Sophisticated WordPress Development. An HTML 5, mobile-first starter theme for rapid WordPress Development.”
Bones is also a great starter theme, it has it’s own grid system and is minimally styled. The code is clean and is well documented, Bones used SASS, all you need is a third party program to compile SASS files and then you’re all set.
“Hi. I’m a starter theme called _s, orunderscores, if you like. I’m a theme meant for hacking so don’t use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.”
Underscores is bare bones WordPress starter theme, Underscores seem to look like it’s stripped down to an HTML page with no CSS at all. No grid framework, no default font styling, no obvious styled structuring, no fancy styling at all. But behind the hideous front-end, you’ll find a greatly coded HTML structure and WordPress functions that gives you a head start compared to other starter themes. It is written with the best coding practices and used modern WordPress coding techniques. The CSS is ultra minimal, like other starter themes, it implements Eric Meyer’s CSS reset, and obvious styling of elements.
“It is a WordPress theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that when starting a new theme, it is far easier to use this as a base then a theme that is already finished and styled.”
BLANK is a WordPress theme by Chris Coyier, like Underscores, BLANK has ultra minimal CSS and appeared like it has no styling at all, but implements CSS reset and other useful snippets. The difference between BLANK and Underscores is that BLANK is not heavily updated with modern WordPress coding practices, however, they announced a WordPress starter theme (HTML5 Reset) that is based on BLANK and is similar to it but is more up to date. BLANK is simple and clean, create WordPress themes with simplicity in mind, it introduces you to basic WordPress functions and snippets.
So, what’s my pick?
If I have to choose from the four starter themes I listed to create WordPress themes, no doubt, I would choose Underscores. Why? It’s because it is stripped down to only what every WordPress theme needs: a great foundation and backbone. Even though it has no styling and all, I can just add my own, or import other tools and frameworks, like I would usually import Twitter Bootstrap to it to get myself a WordPress Bootstrap framework. I love the fact that I can be flexible with the starter theme, I can add only I want, and ignore what I don’t need instead of removing them from the starter theme.
Roots, if you’ve got the hang of WordPress, if you have a basic knowledge with LESS, a fan of Twitter Bootstrap, NOT a beginner with starter themes – you may want to read why Roots should not be your first WordPress Theme – and want to rapidly create WordPress themes, then Roots is for you.
Bones, if you don’t need some third party frameworks built in, if you plan to create WordPress themes with your own styling and not start with a default one, if you have a basic knowledge with SASS, and if you think bare bones starter themes are too much of a hassle, then Bones is for you.
Underscores, if you feel the same way like I do.
BLANK, if you’re a beginner, and would love to create WordPress themes from ground zero, then this is for you. I started to create WordPress themes with this starter theme when I was just starting out my training as a WordPress theme developer. I would recommend to use HTML5 Reset though, as the developers of BLANK recommended it.
Although there are lots of options to create WordPress themes, starting from scratch is a great choice to be in control with your themes and being independent, thus helping you to become a greater WordPress theme developer.