Boilerplate for Nearly Headless WordPress Themes
This is a plugin boilerplate built using Underpin ,Nicholas, and AlpineJS. It will allow you to build a Nearly Headless WordPress theme, that allows you to run a WordPress website like a headless app, but also allows you to render specific pages using PHP instead of Javascript.
Want to learn more about this method? Check out my course here
Setup
To set this plugin up, follow these steps:
- Install composer packages
composer install
- Install NPM packages
npm i
- Compile NPM scripts
npm run start
ornpm run build
Templates
Under the hood, this boilerplate uses Underpin's Template Loader for theme templating. Check out that library's readme file for documentation on how to create, and extend templates in this template.
Scripts
This boilerplate extends the Nicholas library to set up the interfaces needed to manage compatibility mode settings in the admin. Because of this, there are 3 scripts that get compiled. Check out that readme for more information on how to extend these scripts and customize them to suit your theme's needs.
- admin.js - Used to render the react app that displays the Nicholas settings screen located in Settings>> Nicholas Settings
- editor.js - Used to add the "compatibility mode" toggle to posts
- theme.js - The core functionality to handle the nearly headless approach.
Stylesheets
The default webpack config comes with Webpack's postCSS loader, and can handle SCSS and CSS files. You can override the default loader by adding a postcss file to this theme.