The case for Mythic, a modern theme development toolkit

In Ben Gillbanks’ article Mythic WordPress Starter Theme, and Thinking About All Developers, he brought up some good points about the complexity of Mythic and starter themes in general. It’s a good read, and I encourage you to check it out.

The points he brought up made me realize that I need to define the audience for Mythic. First, let me run through some of the history of this project to put things into context.

How we got to this point

I encountered many stumbling blocks over the last couple of years that led me to eventually building this starter theme. Theme development had become much harder than it was 10 years ago. WordPress had grown from a simple blogging system to a full-fledged CMS that can run any type of site. Theming had gone from styling a few basic things to writing massive amounts of code to support all of WP’s features.

When you throw in supporting WooCommerce, bbPress, Easy Digital Downloads, or similarly large plugins with loads of front-end output, things can quickly spiral out of control.

Perhaps the straw that finally broke the camel’s back was during a theme build I was working on last year. The main stylesheet was 100+ kb (minified). This was for a relatively simple site, which shouldn’t need that much code. Things were out of hand. My CSS code was a mess and unmanageable.

I needed to learn some new techniques and to learn them fast.

I picked up Gulp (a task manager) and Sass (CSS with programming-type features) during TV commercial breaks one evening. Then, I learned about ITCSS (Inverted Triangle CSS) and BEM (Block Element Modifier). The awesome developer group in the Theme Hybrid Slack community helped me with a lot of this.

That project with a 100+ kb stylesheet suddenly had a 45 kb stylesheet.

The bigger improvement was with the organization of my codebase. Suddenly, I could find those few lines of CSS to tweak the archive header margin or to change the comment author text color without searching through 100s or 1,000s of lines of code.

I had more complex projects that could’ve certainly used the same treatment. It wasn’t until a little while later when I proposed to our Slack community an idea for a modern starter theme.

And, boy did we go on a journey.

Mythic doesn’t require you to know all the tools

In the article, Ben writes:

[Mythic] follows best practices for coding, and makes use of things like npm (or yarn), webpack, composer, and all sorts of other plugins that improve the code and make things ‘easier’. However this relies on the fact that you know how to use these things.

To a degree, that’s true. You should have a passing understanding of the basics or at least be willing to learn about some of these things.

What’s different about Mythic is that it wraps all of these things up into simple commands that doesn’t require you to understand the underlying technology. It does require being a little comfortable typing in your command-line utility.

When I began this project, I was a command-line noob (I still am in some respects). I wanted a build process where I didn’t need to be the world’s greatest hacker as shown in Hollywood movies. I wanted it to be simple enough for someone with almost no command-line knowledge like myself to do.

I also wanted all this set up so that I didn’t have to be fiddling with build tools all the time. I just wanted to set-it-and-forget-it. In many respects, the purpose of Mythic is about combining all of these complex build tools into a handful of simple commands.

After installation, you could work with and build a theme by only ever using 3 of the several commands from the command line.

You don’t need to know Webpack. We have a heavily-commented file for tweaking the build process if you choose to edit it. This is done with Laravel Mix, which is far simpler than setting up a Webpack config while allowing more advanced devs to work directly with Webpack.

You don’t need to write ES6+ code. You can use old-school JavaScript if you want. The theme will simply transpile ES6+ code to work across browsers if you choose to write it.

I won’t say that you’ll be able avoid all the new technology and techniques. However, I will say that we’ve simplified much of the complexity of modern tools to make them a bit easier to pick up and use.

Using modern code

Another great point from Ben’s article was about where most WP developers are in terms of JS knowledge.

[Zac Gordon] mentioned that WordPress developers are 10 years behind when it comes to javascript (I don’t remember the exact quote, hopefully this is close enough).

That’s certainly true for JavaScript. However, it’s also true for PHP.

PHP 5.3 was released on June 30, 2009. WordPress and most theme authors still write code that works on PHP 5.2.

The WP community is light years behind other projects in the greater PHP ecosystem. In large part, this is because WP hasn’t pushed developers to update or given them the tools to let users know they’re using a more modern PHP version (note that there are plans to integrate PHP version checking into core).

Mythic has a hard requirement of PHP 5.6+ but encourages PHP 7+. There’s no getting around that.

It also has a built-in mechanism for gracefully failing if your theme users aren’t on WordPress 4.9+ or PHP 5.6+. So, you don’t have to worry about handling that.

We, the WP developer community, all need to be upping our game in the JS and PHP department. We can’t continue using code that’s 10 years out of date forever.

Is Mythic right for you?

Mythic is a toolkit for building modern themes. It’s a set of build tools specifically catered to WP theme authors. It has an opinionated organizational structure for all your files. It follows a strict set of rules for markup and CSS classes. A lot of this is going to look different than your average theme copied/pasted from Twenty*.

That’s going to naturally leave some people out. I’m OK with that. I never intended for version 1.0 of this starter theme to be for everyone.

The intention is for Mythic to be a theme dev toolkit for the next 10 years.

It’s certainly not something I’d recommend for someone new to theme development. The best way of learning in that case is to pick out a theme you like (preferably one of the default Twenty* themes) and start breaking things. You need to learn the basics first.

If you’re at a point in your development career where you’re not ready for some of the more advanced things, Underscores is a great starting point and has done wonders for the overall theme development community.

When you’re ready to kick things up a notch and take your code to the next level, Mythic will be here waiting for you.

2 Comments


  1. This comes at a great time for me.

    I am just learning how to code, and I’m disappointed that the tooling I’m learning for front-end projects don’t feel well with what I’m learning about building WP themes.

    I know Webpack is considered advanced. But for me, as a learner, Webpack helps me to not drown in my own code, and keep things very organized.

Comments are closed.