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 [email protected]: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

---