BasePlate is a starter theme for WordPress that includes an up-to-date asset manager via WebPack. It comes with a custom Webpack 4 build for compiling css, js, importing jQuery, Bootstrap and manages assets such as fonts and images. Last but not least, it utilizes cache busting by randomizing filenames in production builds.
-
Twig as a templating engine
-
Scss for stylesheets
-
Modular JavaScript via import
-
Webpack 4 for compiling assets, moving & optimizing images, transpiling & minifying JS/CSS and cache busting.
-
Ready for lazyloading WordPress attachment images, theme images, theme background images & iframes
-
Gutenberg ready.
-
Browsersync for synchronized browser testing
-
Bootstrap 4, but import whatever you like.
To use BasePlate, you need to have PHP 7.0+ installed on your machine. You'll also need a recent version of Node.js installed.
Install WordPress locally on your AMP stack with a virtual hostname, create a new folder in wp-content/themes with the desired name of your template. Clone the latest version of BasePlate inside your new folder.
Next step is to set the proxy adress for BrowserSync with hot module reload in the resources/assets/config.json file.
To install required node modules:
yarn install
Run BrowserSync and check for changes and auto-compile on the go:
yarn run watch
Run development build once. Useful for debugging build errors.
yarn run development
Run prodocution to enable cache busting, optimizing images & minifying for production use:
yarn run production
WordPress Packagist comes straight out of the box with BasePlate. It mirrors the WordPress plugin and theme directories as a Composer repository.
Require the desired plugin or theme using wpackagist-plugin or wpackagist-theme as the vendor name or add your plugins by adding them to composer.json.
composer require wpackagist-plugin/polylang
run
composer install
to load desired plugins.
This is an example of how your composer.json file might look like.
"require": {
"wpackagist-plugin/polylang": "^2.1",
},
Please visit WordPress Packagist website for more information and examples.
You can import JS files into the app.js to have a more modular approach to your javascript.
//app.js
import exampleImport from './exampleImport';
...
exampleImport();
//exampleImport.js
export default function exampleImport( ) {
...
}
Asset helper:
get_asset('folder/file.ext'); // returns URL to asset
the_asset('folder/file.ext'); // echoes url to asset
lazyload_img($img_id, $size); // returns lazyloaded WordPress attachment
lazyload_bg_img($img_id, $size); // returns HTML to be injected into an HTML element to lazyload a background image.For custom post types we recommend generating them by using Generate WP. One generated place the file in lib/models/post-type-name.php. This way, the post-types are within sourcecontrol as well.
For custom fields we use Advanced Custom Fields - Powerful fields for WordPress developers. BasePlate comes out of the box with an acf-json folder to have field group definitions in source control as well.