Since my latest design refresh, many folks have been asking about the WordPress theme I’m using and how to get it. So, same as before, I’ve made my blog’s theme open source.
Meet Kanso, my best blogging theme yet.
Themes
Exploring the art, function, and future of WordPress themes in today’s web landscape.
-
-
I made 720 WordPress theme styles
Over the last week or so, I made 720 unique theme styles. But here’s the kicker—this is all in a single theme. Wild.
With Assembler, you have a whopping 45 color combinations and 16 font sets that can be mixed and matched to generate an incredible 720 unique vibes. And while not technically individual themes, each permutation could very well serve as a unique theme style on its own.
Typically, WordPress themes come with a handful of theme style variations at most. But by leveraging the new capabilities of theme style variations landing in WordPress 6.6, this theme shatters the norm.
Check out this highlight I made, featuring Assembler and a few patterns, expressed across just 7 of the 720 permutations.
-
Composing with patterns
It’s no secret that I’m a fan of WordPress patterns.
The ability to design a part of a site with a bunch of blocks and have it persist—whether synced or not—across my site, or shared across most others, is quite a powerful idea.
While they’re great, I feel there’s more potential to unlock with patterns, especially if we consider them as sections to compose pages with, not just groups of blocks.
Think of a site’s hierarchy: A site is made up of pages, which are composed of patterns, which consist of blocks—essentially, data objects. If patterns and blocks represent differing levels of hierarchy, why are they currently treated the same in the WordPress editing experience?
So let’s explore.
One idea is to treat patterns as a higher-order experience, where invoking a site’s pattern library zooms out the canvas to provide a bird’s-eye view, enabling you to compose with patterns, like this:
-
WordPress Theme Composition and Interoperability
I’ve shared quite a bit about the composition of WordPress themes and how they’ve evolved over the years. But one notion that has captured my attention lately is just how composable themes have become lately.
WordPress themes used to be so static; stuck in the time when it was first launched. Sure, you’ll get a few maintenance updates, but that’s really it.
Today’s themes—or rather, today’s block themes—inherit the newest additions to WordPress out-of-the-box, as blocks carry much of the “weight” themes were once required to do. And historically, many theme designers—including myself—relied on a framework that covered the basics of their theming approach; but now, WordPress is that framework.
Consequently, you can mix and match blocks from any page or template, and between any theme. It’s pretty cool, but there’s so much more to this.
-
Exploring color and typography presets
I recently worked with Ben Dwyer on an exploration to surface a WordPress block theme’s existing colors and typesets within the site editor. He made a video detailing the effort—give it a watch, it’s pretty cool.
What I like best is that any theme using variations inherit this capability right off. Folks can then choose any combination of color or typography among the variations.
What do you think?
-
Behind the scenes of Twenty Twenty-Four
I had the pleasure of working with so many great folks to bring the Twenty Twenty-Four default WordPress theme to fruition.
In this post shared on automattic.design, I chatted with designer Beatriz Fialho and code wrangler Maggie Cabrera on how Twenty Twenty-Four was designed and engineered to be the most best out-of-the-box WordPress experience to date.
-
Colorways
Consistency. That’s the name of the game when it comes to designing a website. And having a way to design, and apply, like-styling to whole sets of blocks is a huge step towards publishing pages with consistency and speed.
So I explored an idea I’m calling Colorways — a “simple mode” for stylizing page content. You design a few “mini themes” essentially, where background, heading, text, and button colors are established. This would happen within the custom theme.json object (for now), providing a group of CSS variables for applying styles to these groups of blocks.
-
WordPress as a design tool
Last week I challenged myself to take one pattern, from one theme, and morph it multiple times—only using the design controls block editor. It’s kind of like CSS Zen Garden, but without CSS—just out-of-the-box WordPress design tooling.
One theme. One pattern. Seven ways.
No additional blocks, nor custom CSS between scenes—just designing in the good ol’ WordPress block editor.
-
Fluid typography and block themes
Last year I shared a piece on fluid typography, in particular on adopting a fluid type scale within WordPress block themes, using the CSS clamp() function. The method I experimented with is interesting in that it uses a type scale, then calculates the fluid type values for each font size within the theme’s theme.json file.
-
Wei WordPress theme
Introducing Wei. Tell your story and share your thoughts with a minimal WordPress block theme, inspired by pure simplicity. Embracing clean type, beautifully bold color schemes, and color-matched featured images, Wei puts your words first — in a delightful and creative fashion.
Wei is a stripped down, minimalistic block theme with a single column layout. It gives a lot, and asks for little in return.
-
WordPress theme style variations
Style variations are a new feature of block themes, recently landing in WordPress 6.0. They’re just one part of the new era of WordPress theming that we’re looking at, with the introduction of Full Site Editing. These style variations are alternate design pre-sets for a theme, enabling you to quickly apply a new look and feel to your site—all within a single theme. Too good to be true? Actually, no.
-
A new era of WordPress themes
We all knew the landscape of WordPress themes was shifting with the introduction of Gutenberg. What we didn’t know, was by how much.
With the arrival of the anticipated Full Site Editing experience into WordPress 5.9, themes are starting to look very different.
This new class of block-based WordPress themes arguably introduces the biggest change to themes, since well… themes existed. These themes are built entirely with blocks. That is, the headers, footers, blogroll, and page templates — literally every aspect of the theme. If it’s on the page, it’s a block.
-
Introducing Wabi, a new theme
Share your authentic self with Wabi, a WordPress block theme designed to help you tell your story best. Wabi foregrounds the simplistic design language of storytelling through clean lines, beautiful typography and a dynamic accent color system — making it a brilliant theme for writers and publishers.
-
The pattern block
I’ve long been a huge fan of block patterns. So much that I see patterns becoming the primary method most of us lay out pages within the block editor. And with the recent release of Gutenberg, and upcoming release of WordPress 5.9, patterns are getting a lot of attention. There are a number of Pattern API improvements on the way, but one I am most interested in, is the addition of the Pattern block.
-
Using a fluid type scale in block themes
I’m a big fan of the CSS clamp() function and how it allows for behavior previously only possible with media queries. The clamp() function takes three parameters: a minimum value, a preferred value, and a maximum allowed value — resulting in a value between each of those.
And while clamp() may be used in a bunch of ways, my favorite use is certainly for fluid typography.
14 replies
