@mill3-packages/wp-boilerplate v0.1.9

MILL3-packages : Wordpress Theme Boilerplate with Webpack

Our WP theme boilerplate using Timber/Twig templates

Requirements

• npm / yarn
• Timber WP plugin

How to install

Our boilerplate package is distributed with NPM, init a new project and install with it :

Note: make sure you run thoses commands inside a fresh empty WP theme directory. Not at the root of your Wordpress installation.

npm init
npm install @mill3-packages/wp-boilerplate

How to use for local development

Edit wp-config.php and add this constant :

define('THEME_DEV', true);

Make sure the name line in package.json matches your theme's directory name.

{
  "name": "mill3-wp-boilerplate",
  "version": "2.0.0"
}

Directory :

/wp-content/themes/mill3-wp-boilerplate/

Add bin command to your package.json file :

{
  "scripts": {
    "mill3-wp": "mill3-wp"
  }
}

Run the install script :

npm run mill3-wp install

Then start Webpack dev server

npm run mill3-wp dev

Local development with Docker

You can also use our Docker boilerplate for WordPress which will set the THEME_DEV constant for you on initial Docker up command. Check out the repository : https://github.com/Mill3/wordpress-docker-boilerplate

Production assets build

Simply run :

npm run mill3-wp build

In production mode, assets are loaded from dist/assets.json file, cache busting included !

Prettier/ESLint

You can ESLint your code with the following command :

First add in package's script :

{
  "scripts": {
    "lint": "eslint --fix ./src/js",
    "prettier": "prettier-eslint ./src/js/*/*.js ./src/scss/**/*.scss --write"
  }
}

npm run lint

And Prettier formatting :

npm run prettier

Please also note that there's a pre-commit hook using pretty-quick which can be added in package.json.

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}