Installation

better-wordpress is a suite of utilities that aim to simplify the WordPress theme development experience.

Create a new Theme
Add to an Existing Theme
1
From the root of your theme, use Composer to add better-wordpress as a dependency. > composer require open-function-computers-llc/better-wordpress
2
Next, copy the included config.example.php file into the root of your theme and rename it to config.php. # macOS, Linux
> cp vendor/open-function-computers-llc/better-wordpress/config.example.php config.php
# Windows
> copy vendor\open-function-computers-llc\better-wordpress\config.example.php config.php
3
After that, edit your functions.php file to include the following code:
functions.php
<?php

# Imports all Composer packages
require __DIR__ . '/vendor/autoload.php';

use ofc\Site;

# Declare a new Site object
$site = new Site();

# Allow the Site object to be accessed in other files
function site()
{
    global $site;
    return $site;
}
👉
Steps beyond this point are optional, but encouraged if you want to get the most out of better-wordpress.
4
To handle asset bundling we use laravel-mix, available via npm. > npm install laravel-mix
Mix can process JS, CSS, Sass, PostCSS, Vue, and more.
5
To configure Mix, create a new file named webpack.mix.js # macOS, Linux
> touch webpack.mix.js
# Windows
> copy nul "webpack.mix.js"
6
Inside webpack.mix.js you can define which files you want compiled. BW will automatically enqueue all scripts and stylesheets processed by Mix, so long as they are outputted to the dist folder.
webpack.mix.js
let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist').version();
Adding .version() ensures that the browser will always use the most up-to-date assets. See more examples on the Laravel Mix docs.
7
Finally, begin running Mix to automatically compile your assets as you work. > npx mix watch
🎉
And just like that, you're ready to go!