The post is written by our Creative Lead Alex Dimitrov.
I decided to challenge myself: am I going to be able to sit down, open my laptop and create a new WordPress.org-compliant theme in less than two hours, using our starter WordPress theme, while having a drink (and hookah) in the local shisha bar?
First of all being able to achieve this means that I need to prepare all of the required tools beforehand. Simply opening a text editor, creating a new file and writing some markup is not enough and won’t yield the desired results. Calling PHP functions and applying general CSS could be enough but that would introduce various bugs in the process. I should not waste time on boilerplate code instead of focusing on the actual goal I have.
Focus on what matters
I am a designer by heart; I don’t care about WordPress loops, writing escape functions everywhere or setting aria labels. To write this functions.php file thinking what hooks to use and what was that add background image support function was not in my plannings.
What I do care about is the styling of the theme. It should comply with all of the WordPress.org theme requirements and because of the nature of the challenge, I didn’t have a design prepared, nor an idea of what the theme should look like. I went for the first thing that came to mind – dark monochromatic “hacker”-style theme.
This is minimalistic and straightforward, therefore a good start. I wouldn’t have to bother too much with paddings and spacings as most coders don’t care about that (don’t hate me, you know it’s true).
It had five core requirements:
- Make it quickly — Develop and release in less than two hours
- Make it work — It has to be approved, that goes without saying
- Make it geeky — I wasn’t sure how many people would like it, so it was a legit experiment
- Make it customizable — Not directly “Install and run,” even if that would work too, I wanted to add some options.
- Don’t waste time — This is very close to the first point. See more about “Don’t go down the rabbit hole when on a deadline.”
Ok, so what were my tools?
First of all — our DX Starter theme (which you can grab from GitHub) is the theme we use here in DevriX for all of our projects — it provides the essential components you need to begin developing. We are using it in a range of projects varying from the most generic blogs like Micro to large multisite projects with multiple custom page templates, various components, and whatnot.
In short – this starter theme is build to be as simple as possible, giving you the structure and core functions/files on top of which you can turn your ideas into a real product. Our goal was to delete as little code as possible when beginning in contrast to some other “frameworks” –*cough* Genesis *cough*–
DX Starter is firmly based on underscores — maybe the most famous starter theme for WordPress. We are wrapping all main elements in a section, that will allow for an easier build of full-width items that will follow the same structure on all page templates.
The core structure of the starter theme
The root files — the main WordPress files required for the theme. Having all of them will remind you not to forget about something.
- assets — my home place — this is where all Sass, JS and image files are.
- inc — neat little functions to help you out with the developing
- template-parts — when building larger themes this is where repeatable components of the theme are included
- templates — all the custom page templates in use
- gulpfile.js — the Gulp scripts for building the CSS and JS files.
The structure of the Sass folder is also interesting, but I won’t get into details about it now, you can browse it on your own and see if it fits your needs. Of course, as a starter theme, it means you can use it for whatever you want (just like we do) and extend, modify and build on top of it.
It is not only for small web projects
The whole DevriX site is based on it, and it’s Sass files structure. We have 15+ page templates, and all of the template files of WordPress extend over the default structure. We are still growing and improving our site without any issues while scaling and maintaining.
Publishing the Micro theme
Thanks to all of this ready to use code I was focused on writing Sass only. After a simple npm install, I worked mainly on the *.scss files without even hitting refresh on the browser page thanks to the already defined live reload. In a little over an hour, I was ready with the theme and began testing here and there before submitting it.
There were a few issues with writing the license files that delayed approving the theme, but code-wise all of the requirements were covered.
You can try that too!
Grab the DX Starter theme now, code your WordPress theme in less than two hours and submit it! Post your results here; we would love to check it out and share some feedback!