This scaffold is the starting point for all 10up WordPress projects.
It contains a bare bones theme and must use plugin for you to base your development off of. Asset bundling is handled entirely by 10up Toolkit.
- Node >= 16
- NPM >= 7
The best way to use the scaffold is to simply run npx 10up-toolkit project init in your terminal.
You can also use the scaffold manually by doing the following:
- Download a zip of the repository into your project. At 10up, by default we version control the
wp-contentdirectory (ignoring obvious things likeuploads). This enables us to have plugins, theme, etc. all in one repository. Having separate repositories for each plugin and theme only happens in rare circumstances that are outside of our control. - Take what you need. If your project doesn't have a theme, remove the theme. If your project doesn't need any plugin functionality, remove the MU plugin. If your plugin doesn't need CSS/JS, remove it. If your plugin doesn't need to be translated, remove all the translation functionality.
- Compiling, minifying, bundling, etc. of JavaScript and CSS is all done by 10up Toolkit. 10up Toolkit is included as a dev dependency in both the plugin and theme. If you want to develop on the theme (and vice-versa the plugin), you would navigate to the theme directory in your console and run
npm run start(after runningnpm installfirst of course). Insidepackage.jsonedit10up-toolkit.devURLto your local development URL for if you're not using a.test.10up-toolkit.entryare the paths to CSS/JS files that need to be bundled. Edit these as needed. - Make sure to add
define( 'SCRIPT_DEBUG', true )towp-config.phpto enable Hot Module Reload and React Fast Refresh. - npm workspaces is used to manage npm dependencies. The main benefit of using npm workspaces is that we can hoist all dependencies to the root folder and avoid installing duplicate dependencies, saving time and space. By default the
workspacesconfig are setup so thatmu-plugins/10up-pluginand all themes are treated as "packages", if you are building a new plugin/theme make sure to updateworkspacesinpackage.jsonSee the example below:
"workspaces": [
"themes/*",
"mu-plugins/10up-plugin",
"mu-plugins/my-other-awesome-10up-plugin",
],- To build plugins/themes simply run
npm installat the root andnpm run [build|start|watch]and npm will automatically build all themes and plugins. If a WordPress critical error is received runcomposer installin all locations that have an existingcomposer.lockfile; example locations:root,/mu-plugins/10up-plugin,/themes/10up-theme. Upon build completion set the10up-themeas active within WordPress admin by runningwp theme activate 10up-theme. npm workspacesdo not have the ability to run scripts from multiple packages in parallel. Because of that we use thenpm-run-allpackage and we define specific scripts inpackage.jsonso you will need to update thewatch:*scripts inpackage.jsonand replacetenup-themeandtenup-pluginwith the actual package names.
"watch:theme": "npm run watch -w=tenup-theme",
"watch:plugin": "npm run watch -w=tenup-plugin",
"watch": "run-s watch:theme watch:plugin",- To add npm dependencies to your theme and/or plugins add the
-w=package-nameflag to thenpm installcommand. E.g:npm install --save prop-types -w=tenup-pluginDO NOT RUNnpm installinside an individual workspace/package. Always run the from the root folder. - If you're building Gutenberg blocks and importing
@wordpress/*packages, you do not need to manually install them as10up-toolkitwill handle these packages properly.
Much of the functionality in the scaffold is intended to be optional depending on the needs of your project e.g. i18n functionality. However, there are a few important principles that you must follow:
- 10up Toolkit must be used for asset bundling. Over the years we've found differences in how assets are built across projects to be very confusing for engineers. As such, we are standardizing on 10up Toolkit (which you can extend as needed). 10up Toolkit contains in depth docs on how it works.
- Functionality should be built into the 10up must-use functionality as much as possible. Presentation should be kept in the theme. Separating these two makes long term development, maintenance, and extensibility much easier.
- Blocks should be built into the theme and follow the example block provided.
- When creating new themes or plugins make sure to follow the
scriptsconvention:
"scripts": {
"start": "npm run watch",
"watch": "10up-toolkit watch --hot",
"build": "10up-toolkit build",
"format-js": "10up-toolkit format-js",
"lint-js": "10up-toolkit lint-js",
"lint-style": "10up-toolkit lint-style",
"test": "10up-toolkit test-unit-jest",
"clean-dist": "rm -rf ./dist"
},Husky and Lint-Staged are both set up to run on the pre-commit hook. The lint-staged configuration file is available to edit in .lintstagedrc.json.
By default it will run the following:
eslinton JS and JSX files.stylelinton CSS files.phpcson PHP files.