Wholesome Boilerplate is a WordPress plugin boilerplate that supports best practices and a modern workflow.
Created by Matt Watson (@mattwatsoncodes) - Wholesome Code (@wholesomecode).
Inspired by the CodeinWP article Making a “Plugin Options Page” With Gutenberg Components by Hardeep Asrani the boilerplate contains an example settings page built with WordPress Editor (Gutenberg) blocks.
The boilerplate contains an example custom sidebar plugin named Example Sidebar
, this contains some quick start configuration, and inline documentation.
The boilerplate contains an example block named Example
, this block contains some quick start configuration, and inline documentation.
The boilerplate is not shy about telling you how something is done, or where the inspiration for the approach came from. Every file in this plugin is crammed with inline documentation to help you quickly find your feet.
- Extends the @wordpress/create-block npm script.
- A custom webpack configuration that has the following features:
- Extend wp-scripts to compile build and transpile JS.
- JS linting and fixing, configured via the
/.stylelintrc
file. - JS minification.
- Prevent incorrect file creation.
- SCSS linting and fixing, configured via the
/.eslintrc
file. - SCSS compile and build.
- CSS autoprefix and polyfills.
- CSS minification.
- Friendly Webpack errors.
- Multiple JS and CSS endpoints to support multiple enqueue types, more on this in a moment.
- SCSS and JS linting advice appears directly in the terminal while your code is compiling with
npm start
. - PHP coding standards autofix and linting by using the
npm run wpcs
command (dependent on the correct installation and", configuration of phpcs and the WordPress coding standards).
The /inc/namespace.php
file enqueues several file types. Just remove the parts you don't need from this and webpack.
block-styles.scss
: styles for the front end and the block editor.block-editor.js
: scripts for the block editor, with localization for custom settings, and auto enquing of WordPress block editor (Gutenberg) dependencies (thanks to@wordpress/create-block
under the hood).block-editor.scss
: styles for the block editor only.scripts.js
: scripts for the front end of the site.styles.scss
: styles for the front end of the site.admin.js
: scripts for WordPress Admin area, with localization for custom settings, and auto enquing of WordPress block editor (Gutenberg) dependencies (thanks to@wordpress/create-block
under the hood).admin.scss
: styles for the WordPress Admin area.customizer.js
: scripts for the Customizer screen.customizer.scss
: styles for the Customizer screen.classic-editor.scss
: styles for the classic editor TinyMCE textarea.
The readme.txt
file in the root of the template is the default generated by @wordpress/create-block
with a few added tweaks.
This file is used for the displaying the plugin on the WordPress.org plugin repository.
Note that the /assets/
folder contains files specific to the WordPress.org plugin repository. These are:
banner-1544x500.png
: High definition version of the WordPress.org plugin repository banner image.banner-772x250.png
: Standard definition version of the WordPress.org plugin repository banner image.icon-128x128.png
: Standard definition version of the WordPress.org plugin repository icon image.icon-256x256.png
: High definition version of the WordPress.org plugin repository icon image.screenshot-1.png
: A plugin screenshot, supports png, jpg, jpeg, gif.screenshot-2.png
: A second plugin screenshot, supports png, jpg, jpeg, gif.
Inspired by the Human Made Engineering Handbook on Namespaced File Naming, the structure of this boilerplate uses the namespace based architecture.
- Download or clone Wholesome Boilerplate from GitHub (https://github.com/wholesomecode/wholesome-boilerplate) into your WordPress plugins folder.
- Using the terminal cd into the
plugins/wholesome-boilerplate
folder and runnpm start
- In the WordPress admin dashboard activate the Wholesome Boilerplate plugin.
- In the WordPress admin dashboard navigate into the settings menu option and view the example settings page.
- Edit a post or page in WordPress and note the 'Example' block.
- Edit a post or page in WordPress and note the 'Example' custom sidebar.
- Edit and add to the Wholesome Boilerplate to be your next best WordPress plugin.
Planned progress can be found on the project kanban board: https://github.com/wholesomecode/wholesome-boilerplate/projects/1
Just create a GitHub issue in the repository: https://github.com/wholesomecode/wholesome-boilerplate/issues