Quickstart

This guide will get you all set up and ready to use the WordPress Boilerplate by Code Resolution®. We'll cover how to get started with installation, initial configuration, and making your first deployment. We'll also look at where to go next to find all the information you need to take full advantage of our powerful features.

Prerequisites

Before you begin, ensure you have the following prerequisites:

  • Node.js (latest stable version)
  • PHP (latest stable version)
  • Composer (latest stable version)
  • Package manager (pnpm, npm, yarn or other)
  • Local WordPress environment (we recommend Local WP)

Installation

  1. Clone the Repository
git clone https://github.com/your-repo/wordpress-boilerplate.git
cd wordpress-boilerplate
  1. Add npm Token for GSAP Club Plugins

Create a /packages/.npmrc file and include the unique authentication token. Refer to the documentation at https://gsap.com/docs/v3/Installation/.

touch packages/.npmrc

Add the following content to .npmrc:

always-auth=true
//npm.greensock.com/:_authToken={token}
@gsap:registry=https://npm.greensock.com
strict-store-pkg-content-check=false
funding=false

Replace {token} with the actual GSAP token.

  1. Install Composer Dependencies

Make sure to have Composer installed. You can refer to the documentation at https://getcomposer.org.

composer install
  1. Install Node Modules

We suggest using pnpm, a speedy and space-efficient package manager. For documentation and download instructions, please visit https://pnpm.io.

pnpm install

Initial Configuration

  1. Update package.json

Before running any development or build commands, make sure to update the packages/package.json file with your project-specific settings:

"projectConfig": {
    "themeDirectory": "coderes",
    "localDomain": "boilerplate.local",
    "localPort": "3000",
    "maxAssetSize": 250000,
    "maxEntrypointSize": 250000
}
  1. Configure WordPress Settings

Update the inc/Settings.php to control styles, scripts, editor settings, ACF Extended, and more.

  1. Set Up Local Development Environment

Ensure your local development environment is set up correctly. Update your hosts file if necessary to point boilerplate.local to your local server.

Development

In a development environment, enable dev mode to utilise browser synchronization for rapid live reloading, source maps, and caching.

# Navigate to the packages directory
cd packages
pnpm dev

Build

Generate production-ready build files, which consist of compiled CSS, JavaScript bundles, assets, and an asset manifest.

# Navigate to the packages directory
cd packages
pnpm build

Linting

Identify issues and inconsistencies and maintain clean code with linting tools for CSS, JavaScript, and PHP.

# Navigate to the packages directory
cd packages

# CSS linting
pnpm lint:css

# JavaScript linting
pnpm lint:js

# PHP linting
pnpm lint:php