josias-r / wp-plugin-boilerplate

WordPress plugin development made easy with wpds-scripts.

WordPack Plugin Boilerplate

A webpack dev server to work with WordPress plugins.

Webpack dev server, Sass, Barba JS, GoLight JS, Prettier, WordPress Coding Standard

Conveniently develop WordPress plugins with ES6 and SCSS and watch your page update live.

You might also be interested in: wp-theme-boilerplate

Features

• SCSS: Modular CSS with variables and functions
• Modern JavaScript: Write Javascript using the latest syntax.
• Modular JavaScript: Split your JS files into multiple module files for better organization and import NPM libraries.
• HMR: Watch your changes live getting hot reloaded while developing
• Browser support: With the help of Babel and Browserslist everything will be compiled to support old Browsers
• Linters: Prettier, ESLint and stylelint will help you while developing. (Make sure you have the corresponding packages installed for your editor)
• WordPress PHP Coding Standard: The WordPress coding standard for phpcs is installed with composer and will guide you to code according to the rules set by WordPress.

  Note: You should install the corresponding packages for your Editor to make full use of this feature.

• Customizable: Most of the above features origin from wpds-scripts which allows you to pass custom settings for your environment. see configuration

Installation

1. Clone this repo (or create your own from it) into your WordPress plugin folder (you should rename the folder).
2. Inside the cloned folder run npm i and composer install to install all the packages (you might also want to update the packages).
3. Run find and replace (cmd/ctrl + shift + f in atom and vscode) and replace all boilerplate-slug and boilerplate_slug instances with your own slug.
4. Rename the wp-plugin-boilerplate.php file with your own slug and start coding!

Note: JS/SCSS/PHP Linters are preinstalled and will help you while developing, but ONLY if you have configured your editor correctly. Prettier and PHP_CodeSniffer (phpcs) can format you code aswell according to the linting rules.

Note: This Boilerplate comes with the JavaScript libraries Barba JS and GoLight JS preinstalled. Don't hesitate to remove them and write your own script.

Usage

To start the development server run npm start

To create a production build run npm run build

Configuration

Please refer to the wpds-scripts configuration.

Donate

You can buy me a cup of coffee, if you'd like ^^