Home » Getting Started

Getting Started

Requirements

  • WordPress theme environment
  • Node.js 22+
  • npm

Install Dependencies

Install the Node dependencies from the theme root.

npm install
File: package.json

Production Build

Use the production build when creating optimized theme assets for deployment.

npm run build
Current command: cross-env BP_INSTALL=true vite build --mode production

Development Build

Use the development build when debugging compiled assets and sourcemaps.

npm run build:dev
Current command: cross-env BP_INSTALL=true BP_SOURCEMAP=true vite build --mode development

Compile Only

Use compile commands when rebuilding code assets without copying install/font assets.

npm run compile
npm run compile:dev

Use this for: faster rebuilds during development when font/install assets do not need to be recopied.

Watch Mode

Use watch mode during active theme development.

npm run watch

Current command: cross-env BP_INSTALL=false BP_SOURCEMAP=true vite build --mode development --watch
Status: add/restore the size script before documenting this as an active command.

Compiled Output

Compiled assets are written to stable WordPress theme paths under dist/.

  • dist/js/theme.js – compiled front-end JavaScript
  • dist/css/theme.css – compiled front-end theme CSS
  • dist/css/admin.css – compiled WordPress admin CSS
  • dist/css/editor.css – compiled block editor CSS
  • dist/font/bootstrap_icons/ – copied Bootstrap Icons fonts
  • dist/font/open_sans/ – copied Open Sans fonts

Activate the Parent Theme

Install Boilerplate in the WordPress themes directory and activate it from the WordPress admin.

wp-content/themes/boilerplate/
Theme file: style.css

Activate a Child Theme

Use a child theme for project-specific customization. The parent theme should remain the stable baseline; the child theme should own project branding, overrides, templates, and configuration changes.

wp-content/themes/boilerplate/
wp-content/themes/your-child-theme/

Use this for: client/project customization without editing the parent theme directly.

Basic Workflow

  1. Install dependencies with npm install.
  2. Run npm run build to generate production assets.
  3. Activate Boilerplate or a Boilerplate child theme in WordPress.
  4. Use npm run watch while actively developing theme assets.
  5. Use npm run build again before committing or deploying.

Rule of Thumb

Use build for production assets, build:dev for debugging, compile when install assets do not need to be copied, and watch during active development. Keep project-specific work in a child theme whenever possible.

© 2026 Boilerplate