Modern Themes Frameworks
Think! As currently I’m not sure how to do future WP anymore!
Barebone Bolerplate Themes, Modern-Stack Theme Frameworks
Don’t forget that, at its core, responsive still isn’t resolved at the WP core level. Some blocks have responsive controls, but some don’t. Think of a way to systemize this. As a semi-solution, there’s a core “Preview” in the editor for Tablet/Mobile/Desktop preview, and I can adjust the blocks themselves if I use Tailwind CSS since it has responsive built in.
There is other research of mine on how Laravel can be integrated in WordPress
You’ll here find all the themes that use the most modern technologies for development, with all the tools like SASS, build tools and so on. They are a bit heavy-themes, but they allow me to get used to development and slowly move to the most modern tools.
Sage, Tailwind included
You can also find some add-on made by the same author here: jeffreyvr/tailwindcss-tailpress.
UnderscoreTw aka “_tw”
_tw: UnserscoreTw is Tailwind-optimized theme generator inspired by Underscores (_s), shoud serve as the quick-start, just download and install.
Utility classes will be available in editor ONLY for ones you know you need, in advance. There are a number of ways to do this:
- You can create a safelist within your Tailwind configuration file;
- you can include comments containing lists of classes alongside the code for custom blocks you’ll want to style in the block editor;
- you could even just create a file listing all of your editor-specific classes and tell Tailwind to include it as one of the source files it monitors for class names.
The need to commit to editor classes in advance is the most problematic aspect of the relationship between Tailwind and WordPress.
TailPress, pixeldevsio/tailpress is quite similar to “_tw” theme and that’s all I know
Gust is the Tailwind CSS theme/builder for WordPress, announced on BetaList. Although it’s officially packaged as a theme, this is kind of a builder, though not a great one as seen in this video. A free version can be downloaded as a demo from the main site but just like any other site builders, it completely excludes Gutenberg, and therefore it is to be avoided.
Installation is not quite 2 seconds, so go through it later by following this guide: digitoimistodude/air-light
Elementary by rtCamp
Theme Redone is a complete framework for developing custom Block themes with a modern-stack. It also comes with its own original solution for creating Blocks, and it suggests using Latte as the primary templating engine.
Nebula is a theme framework that focuses on enhancing development expirience. It heavily relies on ACF and is actively developed on chrisblakley/Nebula. You can combine it with the chrisblakley/Nebula-Companion plugin if you wish. It’s a very comprehensive ecosystem that covers all the bases.
Understrap combines Underscores and Bootstrap in Theme Framework aka Starter theme. To learn more about it, you can check out understrap/understrap. As I’m not particularly interested in Bootstrap for current or future projects, I’ll skip it now.
WebDevStudios/wd_s is a starter theme from WebDevStudios that also includes Tailwind CSS as well as integrated technologies such as Webpack, SASS and PostCSS. The official website boasts a “wd_s Generator”, but I haven’t had luck with it and that’s not reassuring, despite authors claim that theme is constantly improved.
WP Rig, focus on PWA
WP Rig is a modern WordPress starter theme and build process that is actively maintained on wprig/wprig. It focuses on Progressive Web content and optimization, making it very performant. Because it originated in 2017, it still uses Gulp as its build tool.
PWA was popular 5 years ago, and while it’s a bit less relevant now, it is still suggested. Learn more by reading Progressive Web Apps The Right Way.
Here is My short Introduction to PWA
Check out this Google introductory resource for an intro to PWAs, and here are the main takeaways what to expect:
- A single codebase that works on any device, as it’s a web app
- An app-like experience with access to higher levels of OS integration, so it has app-like user experience
- Make it installable, so it has icon on the home screen, app launcher, launchpad, or start menu
- Appears when you search for apps on the device
- Opens in a standalone window separate from a browser
- Offline functionality and service worker use
- Access to the file system
Progressive Web Apps is a very important topic, so there are lots of different plugins and solutions for WordPress. Just check out this search results for “pwa”. The following are the most popular and actively developed and maintained:
- Super Progressive Web Apps plugin to convert your website into PWA instantly, actively developed here SuperPWA/Super-Progressive-Web-Apps
- PWA is the official Google plugin, maintained here: GoogleChromeLabs/pwa-wp
- PWA for WP & AMP is with repo here: ahmedkaludi/pwa-for-wp
The Rest of the Bunch
You can find an excellent and up-to-date source of the best starter themes for FSE in this text: Best WordPress Starter Themes for Developers with Gutenberg Support in 2022. On that site you can also find reviews from 2021 and 2019.
Interesting discoveries from that article are:
luuptek/luuptek-wp-starter is a simple starter theme, ready for Gutenberg and ACF blocks, with JS and CSS building with Webpack. It looks like how I would build my own small theme. Either way, skip it, but you can steal ideas from it.