Mythic: Your new starting point for theme design

Screenshot of code from the Mythic starter theme for WordPress

When I began redesigning Theme Hybrid last year, I knew it was going to be a daunting task. The site itself has 10 years of history and many different pages that need their own, unique design elements.

I’m an old-school developer. I can code up a Web site with Notepad on Windows. I actually did this for many years. That’s how I learned Web development. Of course, I’ve advanced a little more than that over the years and technology has drastically changed since then.

One of the problems I had with the site redesign, and a problem I was having with theme design in general, was that my toolset was not keeping up with the modern Web. Thus, began my journey into a yearlong educational whirlwind.

After launching TH5 (the Theme Hybrid redesign), I started mulling over ideas. Today, nearly a year later, I’m sharing with you a beta version of what I, with the help of some awesome people (see special thanks at the end of this post), built.

This is a bit of a long read. If you just want to check out the new project, hop over to the Mythic page.

Introducing Mythic

Mythic is a starter theme.

I wanted something that used modern PHP, CSS, and JS practices while not feeling too foreign to the way we do things in the WordPress world. I also wanted something that would prepare theme authors for the upcoming editing experience in WordPress 5.0 (Gutenberg).

Our group looked over every aspect of theme development. And, when I say every aspect, I mean it. We had long, drawn out discussions over just the class names for common page elements. We discussed build tools for months. We tested PHP templating systems.

How can we build a starting point that gets theme authors on the right foot while offering customizability and not overcomplicating the process?

Theming in 2018 is much different than theming in 2008. Without the right tools, it can be overwhelming to simply get started building even the most basic theme.

Writing modern code

Supporting PHP 5.6+ was a decision I made earlier based on WordPress usage stats and feedback I’ve gotten from users on bumping the minimum versions on other projects. I’m strongly pushing PHP 7+, but the back-compat is there for just a handful of things that would require 7+.

Anything earlier than 5.6 means for clunky code that’s just a headache to maintain. WordPress, as a community, needs to be pushing people to update.

Early on, SCSS/SASS and newer CSS features were something I definitely wanted in. We ended up adding support for SASS, LESS, Stylus, and plain ol’ CSS. Theme authors can choose their preferred styling language for builds.

Of course, ES6+ was a given for JavaScript. As themes become more JS-heavy, it’s important to be able to write any code you need and have it transpiled and bundled to work across browsers.

Designing without headaches

What a lot of themes, particularly starter themes, don’t take into account is the markup and how easy it is to style. We decided to use the BEM (Block-Element-Modifier) system with utility classes for any markup that the theme can control.

BEM is a popular solution because it goes hand-in-hand with modern CSS pre-processors. It also allows you to keep your styles flat and not get lost in specificity hell. This means for smaller, faster stylesheets that are easier to override when you, a child theme author, or user need to do something custom.

This is even better when combined with the ITCSS (Inverted Triangle CSS) method, which is a method for structuring your stylesheet files in a logical and organized manner. Of course, you can roll your own solution as well.

The primary purpose of a theme is to style things. It stands to reason, that a starter theme would make that process easier.

Build tools

Building a theme in 2018 means using a build tool, task manager, or something of the sort.

Ultimately, we decided on Webpack.

If you’ve ever looked at Webpack, tried it, and trashed it, I’ve been there. I have several people who can attest to that. The Webpack config file is tough to understand for many people. And, for theme authors, it might seem like a bit much when you can get something like Gulp up and running in no time.

But, Webpack is a reality if you ever, for example, want to move over to plugin dev and build blocks for Gutenberg.

That’s why we’re using Laravel Mix. It’s an easy-to-use layer over the Webpack config. We’ve been testing it, using it on real-world projects, and love it. It perfectly compliments the theme development process and keeps things super simple. Most people can learn the basics in less than a half hour.

Mythic has everything you need set up and ready to go without all the fuss. You shouldn’t have to spend all your time worrying about getting your build process just right. The out-of-the-box configuration should suffice for the majority of theme projects.

New templating system

We looked at Twig, Blade, Plates, and other templating engines. Ultimately, I decided that we needed to do things the WordPress way…sort of.

There’s at least one good thing about WordPress’ native template handling: it’s easy for even novice developers to understand. You have some HTML and “template tags” thrown in the mix.

I wanted to retain that simplicity while offering a much more powerful View class that would allow theme authors to use any folder structure they wanted. I also wanted the ability to pass in custom data to templates. Neither of these features are directly supported by core WP’s native templating system.

Think of it like core’s get_template_part() on steroids.

The framework behind it all

One thing I haven’t mentioned yet is that this is all powered by version 5.0 of the Hybrid Core framework.

Mythic and HC5 were built alongside one another.

HC has always been a great tool for building themes. However, there’s never been a good starting point that introduces you to some of the concepts of the framework. With the rebuild of HC5, I wanted to more tightly integrate the experience of actually building a theme while learning about the framework’s features at the same time.

I rewrote nearly all of HC5 from scratch. As a result, it’s leaner, more organized, and more cohesive.

A special thanks

None of this would have been possible without a great group of developers behind the scenes sharing code and ideas. They’ve been my rock through this whole process. There were times when I wanted to call it quits and drop a feature out of frustration. They kept me on the path.

I usually don’t like to call out too many people by name for fear of leaving someone out. However, the following four people really put in a lot time and effort. They deserve recognition.

  • Brett Mason – You can personally thank him for pushing us toward Webpack.
  • Sami Keijonen – Always challenged me and helped with the project.
  • Marty Helmick – Built the theme renaming script we’re using.
  • Thiago Senna – Great help with PHP and Composer.

Most of these developers were with me every step of the way. They tested things. Submitted pull requests. Let me know when there was a better method.

I also want to thank everyone else who stepped in with some feedback or an idea.

Pricing

Most starter themes don’t come with a price tag attached. Many of them are based on volunteer-only work. Mythic is going to be a little different.

I’d love to see this project as a base for themes everywhere. Regardless if you’re building a free theme to release on WordPress.org, a commercial theme on ThemeForest, or even for a one-off client job, I want you to use Mythic.

I’ll be releasing Mythic as part of the Premium Membership plan here at Theme Hybrid, which is currently $59.95/year (unlimited number of sites and usage).

The real value in the theme is going to be as part of the community of other developers and their knowledge. We have a great #mythic channel in our Slack group where we pretty much just discuss lots of awesome ways to build themes.

There’s more details about this on the theme page.

Let’s get this party started!

Are you ready for actually testing this new starter theme out?

Great! Hop on over to the theme page or the GitHub repo and grab a copy.

This is the first beta. We still have a few things left to work through, but I wanted to start getting feedback from a wider audience. I’ve set a deadline of September 3rd to have the official version 1.0 released. If we can make it happen sooner, even better.

I look forward to hearing your feedback.

6 Comments


  1. ·Reply

    Great news!

    I’m happy that you use the modern stack! It’s time to push people toward new technologies.


    1. ·Reply

      It’s so much nicer just being able to use more modern coding techniques.

      I’ve been writing newer PHP for a couple of years, but I always have to remind myself to check PHP compatibility when releasing something to the public for WordPress.

      As a sidenote to this: I did build in a PHP and WP compatibility checker, so the theme will gracefully fail and let the user know to upgrade their PHP and/or WP version.

Leave a Reply

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