better-wordpress

Static Assets

Laravel Mix is a powerful and easily configurable module bundler.

Wordpress and your static assets

Out of the box, WordPress will reference your site’s theme files in various places. You’ve got some CSS files that are added to the <head>, some that go in the footer, others that are enqueued and could end up in either place. You’ve also got all those doc blocks that are necessary inside your site’s style.css file that you shouldn’t touch, which make it hard to minify.

We get annoyed at all these steps, which is why we’ve landed on using laravel mix to help us manage these assets.

Install

In the root of your theme, run the following command to install laravel-mix.

npm i laravel-mix

Configure

Next, still in the root of your theme, create a new file called webpack.mix.js and add the code below:

// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist').version();

This will tell laravel-mix to compile src/app.js and output it in the dist folder. The addition of .version() will generate a random hash to append to the filename, forcing browsers to update their cache. To add other types of files, check out these examples.

Compile

To compile once:

npx mix

To watch for changes:

npx mix watch

Including Scripts/Styles

better-wordpress will automatically look for Laravel Mix’s mix-manifest.json in the dist folder and register/enqueue any javascript or css it finds there.

The only requirement on your end is to include the wp_head() function in your theme’s <head> element. For example:

<!doctype html> <!-- header.php -->
<html <?php language_attributes(); ?>>

<head>
  ...
  <?php wp_head(); ?>
  ...
</head>

<body <?php body_class(); ?>>
← Initializing
Handlebars →