Skip to content

Latest commit

 

History

History
155 lines (78 loc) · 3.93 KB

README.md

File metadata and controls

155 lines (78 loc) · 3.93 KB

BasePlate

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.

Latest Version

Features

  • 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.

Installation

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

How do I use webpack?

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

Plugins

WordPress Packagist comes straight out of the box with BasePlate. It mirrors the WordPress plugin and theme directories as a Composer repository.

How do I use it?

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.

Example

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.

Helpers

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.

Post Types

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.

Custom Fields

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.

License

MIT © Erik van der Bas