WordPress: 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.
Since most of those tools are from the JavaScript ecosystem, NodeJS or some other JS runtime is a usually required, plus Composer as a package manager for PHP.
Sage, Tailwind included
Sage is a very famous hybrid but not fully block-based framework, with Laravel included, thanks to their Acorn library, and now it comes with out-of-the-box Tailwind CSS support.
Asset builds are handled by their high-performance build system bud.js. Beware, don’t mix that Bud with Bun.
It’s a radical approach that’s part of the broader Roots Stack, which you can find out more about here. It can be also deployed separately without Bedrock.
TailPress.io by Jeffrey van Rossum
TailPress is barebone starter theme ready for building with Tailwind CSS. It’s mature but actively maintained jeffreyvr/tailpress and has some nice video tutorials
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.
Other solution: _tw _tw and Shim module
The need to commit to editor classes in advance is the most problematic aspect of the relationship between Tailwind and WordPress.
TailPress Theme
TailPress, pixeldevsio/tailpress is quite similar to “_tw” theme and that’s all I know
Gust Builder
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.
Air-light
Air-light is highly praised and very modern WordPress starter theme. It’s a mature ACF theme digitoimistodude/air-light from Finland that is actively maintained, with all the latest technologies.
Installation is not quite 2 seconds, so go through it later by following this guide: digitoimistodude/air-light
Elementary by rtCamp
Elementary by rtCamp located at rtCamp/theme-elementary is a minimalist starting point for your theme development journey. Boasting only the essentials, such as modern build and test tools, it is the perfect launchpad for your customization adventures. However, the “node_modules” folder is quite substantial, weighing in at a whopping 400 MB, which may be a dealbreaker for some.
Theme Redone
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
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
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.
WDUnderscores
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:
-
Tonik was starter theme that strived to modernize theme development, but as of 2022, based on repo tonik/theme, is now unmaintained.
-
billerickson/EA-Starter is starter theme, but classic, more focused on ACF usage by very profilic author Bill Erickson.
-
Lumberjack | Rareloop/lumberjack is abandoned framework based on Bedrock
-
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.
Vrlo vrlo minimalan ali razmotri: Underpin-WP/underpin: A WordPress Framework that makes building scale-able plugins and themes easier.
Vite and Tailwind: PressWind Starter theme · Presswind, WordPress Starter Theme TailwindCSS and ViteJS at repo WP-Performance/press-wind: Starter theme WordPress with Tailwind CSS and Vite JS