Where does one start when developing a WordPress theme in 2022? Since I wrote last, WordPress has rolled out theme.json in 5.8 and Block Themes and Full-Site Editing (FSE) in 5.9. Automattic has made some minor updates to Underscores, its original “Classic Theme” boilerplate, but none of them are focused around adding support for all the new post 5.0 features like the Block Editor or theme.json.
Hybrid Themes and General Resources
FSE and Block-Based themes look very promising, but in my own dev workflow I am still not quite ready. If you are interested in building a Block Theme, check out WordPress’s own Create Block Theme plugin and Rich Tabor’s talk from WordCamp USA 2022, A New Era of WordPress Themes: Block Themes. The official tooling for these types of themes has leapfrogged Hybrid Themes, which marry the heavy use of PHP from “Classic Themes” with new Block Editor-enhanced theme features like theme.json.
Block Themes and FSE are the future of WordPress, but I am still heavily invested in the Hybrid Theme space. Some useful resources can be found in WordPress’s own git repository devoted to theme experiments, including a bare bones block theme generator script. Additionally, @wordpress/scripts is “a collection of reusable scripts tailored for WordPress development” useful for theme and plugin development. It can be used for building resources using block.json, which as of Advanced Custom Fields 6.0 is now the preferred method for making custom ACF blocks.
For the purposes of my still Hybrid Theme-centric list, I’m using the following criteria for judging theme frameworks/starter themes:
- Public GitHub repositories
- Updated in the past two years
- Free and preferably open source
- Acknowledge the existence of Gutenberg / the Block Editor through CSS or
add_theme_support, with bonus points fortheme.jsonscaffolding (indicated by *)
The Ten Best Gutenberg-Ready Starter Themes for 2022
- Air-light – Air-light (or simply Air) is designed to be minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects.
- Astra* – Fastest, lightweight, and highly customizable WordPress theme.
- EA Starter – [A] fork of underscores … updated to include hooks from Theme Hooks Alliance.
- Lumberjack – [A] powerful MVC framework for the modern WordPress developer. Write better, more expressive and easier to maintain code.
- Nebula – Nebula is a WordPress theme framework that focuses on enhancing development. The core features of Nebula make it a powerful tool for designing, developing, and analyzing WordPress websites consistently.
- Sage* – [A]n advanced WordPress starter theme with a modern development workflow.
- Theme Redone – The framework for developing custom WordPress themes with its own Gutenberg Blocks creation solution.
- UnderStrap – UnderStrap combines the Underscores starter theme (by Automattic) and the mobile-first, responsive grid framework Bootstrap 4 (by Twitter) into a perfect open source foundation for your next WordPress theme project.
- WP Emerge – A modern, MVC-powered WordPress as a CMS workflow.
- WP Rig – WP Rig is a modern WordPress starter theme and build process bundled into one convenient package. It helps you create beautiful, lightning-fast WordPress themes with exciting user experiences that meet the latest web standards.
What other great resources, starter themes, or frameworks have I missed? Let me know in the comments or on Twitter at @tophrrrr!
*Includes boilerplate theme.json.
Hi, Stumbled into these via Twitter. Nice list of themes, some of already known.
I’m working in small Finnish digital company and we are continuously developing own starter theme.
https://github.com/luuptek/luuptek-wp-starter
Some features:
– Gutenberg ready, possibility to add any core Gutenberg blocks into your default page template with three different width options (default, wide, full wide)
– ACF blocks ready, two custom blocks (latest posts, page lifts) added by default
– Hero image element possibility to add to top of your default page template
– Title, description (optional), button (optional) and background image to be defined
– Theme options with default post image, head/footer scripts and contact channels ready to be inserted
– Automatic JS / CSS building with Webpack
– SCSS and ES6 javascript implementation
– Lots of helper-functions available in Utils-class ==> example Utils()->get_social_media_links() would output social media icons with links
– Translation strings to be used with Polylang if needed
Since some core/gutenberg functionality has been moved into [private repo](https://github.com/luuptek/luuptek-mu-plugins), please don’t promote your theme too much publicly, since it’s not actually public. Or maybe I’m misunderstanding something. Thanks in advance 😉