Create WordPress Themes From Scratch

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

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

Bloatwares everywhere

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.

Start Small

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.

 

Roots starter theme

Roots

“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.

 

Bones starter theme

Bones

“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.

 

Underscores starter theme

Underscores

“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.

 

BLANK starter theme

BLANK

“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.

My Recommendations

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.

Conclusion

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.

  • fbgbfgf

    so whats this article is all about ?

  • While there are (intentionally) some dependencies, this one gives any of those mentioned a run for their money. In fact, I’d go so far as to call it a next generate theme architecture (that addresses many of the friction points common to traditional WP theme dev):

    https://github.com/WPezBoilerStrap

    Its made me more productive and adventurous. That said, I wrote it 🙂

    • Hello Mark, thanks for the feedback, I saw your work, and it’s really interesting! 🙂 I haven’t heard of the WPezClasses before, I didn’t know this existed. I enjoyed object oriented programming more than the traditional web coding, but I love WordPress, which is why I’m pretty interested with the Architecture and your project as well 🙂

      • Hey Rol John – It’s a work in progress. In fact I’ve pushed 3 new classes since my original comment here. One is for CMB2, the other two are related and aim to provide an ez standized way to do page, post and CPT validation. For example, checking the number of characters in the title before allowing the post to be published. Cool stuff like that.

        Please feel free to fork / submit pull requests. Or the way it’s set up, do your own classes in your own library and then submit them in full.

  • Pingback: Tweet Parade (no.47 nov 2014) - Best Articles of Last Week | gonzoblog()

  • Amica Catherine

    My Pick WordPress theme generator “TemplateToaster”.