Classic WordPress Theme

A classic PHP-based theme, with modern tooling and support for Gutenberg blocks.

Table of Contents

• Features
• Why?
• Setup
  • Requirements
  • Install
• Development
  • Asset Structure
  • Styling
  • JavaScript
  • Theme Files
  • theme.json
  • NPM Scripts
    • Live Reload
    • Going to Production
    • Linting

Features

• Webpack 5
• TailwindCSS
• theme.json
• LiveReload
• Github Actions
• WP CLI
• WordPress Coding Standards
• Whole lotta linting, Prettier, and PHPCBF support

Why?

This isn’t a block theme and does not support full-site editing on purpose.

There’s no doubt that block-based themes are the future of WordPress; however, PHP-based themes with deep integration with Gutenberg and modern tooling are still as relevant as ever.

I wanted to create a “classic” theme that gave developers world class support for tooling and the latest Gutenberg block features like theme.json. Plus, I love to tinker and being on the bleeding edge is fun!

Setup

Requirements

• Node 14
• NPM 7
• Composer 2
• LiveReload Browser Extension

Install

Clone this theme into wp-content/themes:

git clone git@github.com:gregrickaby/classic-wordpress-theme.git

Install dependencies:

composer install && npm i --legacy-peer-deps

Run a build to bundle all theme assets:

npm run build

Finally, activate the theme in the WordPress dashboard.

Development

Asset Structure

The src directory is where all theme assets should be placed. Webpack is configured to bundle them into the /build directory.

├── src
│   index.js
│   ├── css
│   │   ├── index.css
│   │   └── tailwind.css
│   ├── fonts
│   │   └── OpenSans-Regular.woff2
│   ├── images
│   │   └── placeholder.png
│   └── js
│       └── placeholder.js

Styling

This theme includes support for TailwindCSS. It uses the JIT compiler, so live reloads are ⚡️ fast.

To get started, open index.css and start adding your styles. To customize further, open tailwind.config.js or theme.json.

JavaScript

This theme uses Webpack 5 and Babel and is ready for anything esnext. Simply create your JS files and place them in /src/js/ then use ES6 imports in src/index.js.

Theme Files

It can frustrating to “tear down” a theme just to get started. I tried to keep the theme files and use of template tags to the bare minimum.

theme.json

WordPress 5.8 comes with a new mechanism to configure the editor that enables a finer-grained control and introduces the first step in managing styles for future WordPress releases: the theme.json file.

The theme.json kinda mimics the config workflow for tailwind.config.js:

// theme.json
{
  "version": 1,
  "settings": {
    "color": {},
    "layout": {}
  },
  "styles": {
    "color": {},
    "typography": {},
    "elements": {},
    "blocks": {}
  },
  "templateParts": {},
  "customTemplates": {}
}

You can learn more about theme.json in the Block Editor Handbook and check out the theme-experiments repo on Github.

NPM Scripts

Live Reload

Watch for changes and LiveReload:

npm run dev

Now open your browser and click the LiveReload extension.

Going to Production

Bundle assets for production:

npm run build

Linting

Format files:

npm run format

Lint files:

npm run lint