Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josias-r/wp-plugin-boilerplate
WordPress plugin development made easy with wpds-scripts.
https://github.com/josias-r/wp-plugin-boilerplate
hot-module-replacement node-js webpack webpack-dev-server wordpress wordpress-plugin wpds-scripts
Last synced: 24 days ago
JSON representation
WordPress plugin development made easy with wpds-scripts.
- Host: GitHub
- URL: https://github.com/josias-r/wp-plugin-boilerplate
- Owner: josias-r
- License: mit
- Created: 2019-09-21T07:54:24.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:10:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T07:12:38.622Z (about 1 month ago)
- Topics: hot-module-replacement, node-js, webpack, webpack-dev-server, wordpress, wordpress-plugin, wpds-scripts
- Language: JavaScript
- Homepage:
- Size: 2.03 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](https://github.com/josias-r/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](https://prettier.io/), [ESLint](https://eslint.org/) and [stylelint](https://stylelint.io/) 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](https://github.com/josias-r/wpds-scripts#config-file-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](https://github.com/josias-r/wpds-scripts/blob/master/README.md#cli-configuration) configuration.
## Donate
You can buy me a cup of coffee, if you'd like ^^
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AXJFXBX8XLYXQ&source=url)