12 WordPress Themes in 12 Months: Guidelines, Folder Structure and Stack

November 1, 2016| Mike Stott

Twelve themes in twelve months. That’s a bold statement. Whether this is one theme a month or a few clusters here and there is up to me. What I will do is blog throughout the process so that if you’re looking to do something similar you can hopefully learn from me going through this process.

The hardest thing is getting started

If you’re thinking of doing something similar. My advice would be just get on and do it. There’s a lot of reasons why you might not get started. Do any of these sound familiar:-

  • I’ve not written a theme from scratch before.
  • I don’t have the time.
  • I haven’t a clue what to develop. I have no ideas.

Yep. I’ve been there. I actually don’t have a clue about what any of the 12 themes will be as an end product. What I do know is that with each theme I want to build on the work done so far. What that means is getting the following up and running. This won’t change throughout the 12 themes.

  • Guidelines. The Theme must meet the required standards put in place by WordPress.org (check them out here).
  • Guidelines. I’ll also look to meet the recommended standards (where they make sense). There’s not many of these. Here’s the recommended standards.
  • Folder Structure. More on this below
  • Stack. More on this below

Folder Structure

The folder structure that I’ll be following is hopefully common sense. I’ll be adding an extra folder for development purposes. My folder structure is as follows:-


The ‘development’ part. I’ll be writing the themes using SCSS (rather than pure CSS), when the themes are ready to package up the SCSS folder will be removed (and the style.css) will be the output path of my style.scss (which is in the /scss/ folder).

The other folder which may look a bit different to the usual is the /template-parts/ folder. This will be where I store any ‘parts’ to the templates, such as content-none.php (for loading if no posts are found).

The Stack…

OK so onto the ‘Stack’. When you hear people say ‘what stack should I use’ generally they are talking about PHP, or node.js or something fancier. They’ll also be talking about whether it’s Linux or not.

What I’m talking about is probably more akin to ‘Resources’ but I think ‘Stack’ sounds cooler. Here’s what I plan to use in the theme projects:-

  • Twitter bootstrap framework. This will help with mobile-readiness of the themes. It’s also nice and easy to work with
  • Font-awesome. For the ‘web UI’ for anything that’s in need of an icon.

For this I’ll be adding a couple of extra folders to the above setup. Namely a /css/ folder for any CSS I include which isn’t my own (such as bootstrap.css) and a /fonts/ folder which will include the font awesome fonts.

Theme javascript I’ll be adding into the /js/ folder but where possible I’ll be using the majority of WordPress included scripts and libraries (as recommended). There’ll also be no hard coding of any scripts (an issue I see a lot which causes all sorts of conflicts with plugins).

For those who want to know what I’m developing with, I’m using MAMP and PHP 7.0 🙂

What’s next?

Next is to get started. To start populating the php files and getting a core structure up. What sort of theme will I start with? I think a blogging theme. This will keep it simple to start with before getting in too deep and killing it with features.

Categories: 12 in 12

Leave a Reply

Your email address will not be published. Required fields are marked *