Introducing Tove

Tove, my first WordPress theme built entirely around Full Site Editing, is live on the Theme Directory.

The upcoming December release of WordPress 5.9 will introduce Full Site Editing (FSE) and the new Site Editor to WordPress. The Site Editor will allow WordPress users to change not just the layout of every part of their site, but also its colors and typography. If you’re running a theme built to support those features, that is. Tove is my first.

I started tinkering with Tove in early 2021, but I put it back in the drawer when summer came around and I started to divide my time between work and hiking. You can see some very early screenshots of it in my ”A New Era For WordPress Themes” post from April, where you can also read more about what Full Site Editing will bring to the table for WordPress themes. I picked Tove back up when I came back from the Kungsleden trail in late August, and last Friday, I finally got around to submitting it to the Theme Directory. Four days later, it’s live. The theme directory review waiting time used to be over 6 months. Kudos to the Themes team.

Tove is a fun, colorful, and slightly quirky theme. It was designed with cafes and restaurants in mind, but thanks to the flexibility of the Site Editor and Global Styles, it can be used for any type of website. It includes over 40 block patterns to get you started, including six different header designs and seven different footer designs, and a couple of custom block styles for extra personality. And… that’s it, really.

Block themes (as opposed to classic, non-FSE themes) are light by design. Tove contains a theme.json file that specifies supported settings and styles, HTML template files and template parts used by the Site Editor, a couple of stylesheets, placeholder image assets, a folder with block patterns, and a functions.php file to enqueue assets and register block patterns and styles. That’s Tove. Not a single line of JavaScript, and other than the functions.php file and a empty index.php file, no PHP either.

Compare that to Eksell, my latest (and probably last?) free classic theme. Eksell has 1 700 lines of PHP in its functions.php and template-tags.php files, five PHP classes in five files, and over 1 000 lines of JavaScript (not counting the CSS variables ponyfill). And Eksell is still pretty compact compared to most themes. Even though Full Site Editing is still in an experimental stage with frequent breaking changes, Tove was a lot easier to build than Eksell. Thanks to the Site Editor, it’s also so much more flexible. There’s really no comparison on that point.

Documentation for developing Full Site Editing themes is still pretty sparse, but the best resource by far is by Carolina Nymark. It’s been invaluable. I was also helped by the TT1 Blocks theme, which served as the foundation for Tove. Other themes that I looked to for inspiration were Blockbase by the Automattic Theme Team, Aino by Elma Studio, and Clove by Anariel Design. I also followed the lead of Rich Tabor when it comes to naming schemes for colors and font sizes in Tove. Theme.json trailblazers all.

WordPress 5.9 is still a couple of months away, so if you want to use Tove today, you need to have the Gutenberg plugin active on your site. Those frequent breaking changes I mentioned mean that you shouldn’t use Tove on a production environment, unless you’re willing to put up with a lot of website jank this fall. If you do decide to give Tove a try, on a production site or otherwise, I’d love to hear what you think.