Laravel Mix is a fluent wrapper around the webpack module bundler, and it provides common tools that help you compile CSS and JavaScript. It’s easy to work with, and although it comes baked into the Laravel framework, you can use it anywhere.
This site is using WordPress, and when I created the theme I used Mix to handle the asset compiling; it was simple to setup. Here is a quick overview of how I did it in four steps. Please note, you will need to have a recent version of Node and npm installed on your machine before continuing.
About Laravel and WordPress. Here is the most interesting part of the article, Laravel, and WordPress hybrid. If you are Laravel fan, can't imagine yourself coding in other frameworks. You want to use the WordPress CMS admin interface only for editing and adding content, not rendering it. You want to add a blog or news section to a Laravel application where it would be a minor element of the wider application. Advantages of using headless WordPress with Laravel: Complete control over how and where content appears.
Wordpress laravel api. Improve this question. Follow edited May 22 '20 at 9:35. Asked May 20 '20 at 7:34. Golden Boy Golden Boy.
Step 1. Create the package.json File
The package.json file is required to get all the Node modules you’ll need. Create this package.json file in your theme’s directory and add the following to it:
I pulled these from the Laravel repo and removed all the devDependencies except for laravel-mix.
From your terminal, run npm install and all the dependencies will be pulled down automatically.
For my theme, I decided to utilize Bootstrap, so I required it via the command line:
Bootstrap also requires jQuery so pull it in:
Now it has all the dependencies, and we are ready to setup the webpack file.
Step 2. Webpack Mix
Next up, create a file webpack.mix.js in the same directory as your package.json and add the following:
What this is doing is first loading the laravel-mix Node module, then setting up the compile steps. One for the JavaScript and another for Sass.
The important part here is the paths in the second param. For example, WordPress expects a style.css file in the root of your theme and by specifying the path as ./, it’s telling Mix to save the compiled file to the correct location.
Step 3. Create Your style.scss File
The final step is to create your style.scss file and based on the paths above this will need to go here sass/style.scss. Create this file and add the following:
Please note the heading section has a special comment. By opening the multiline comment with /*! this tells the Sass compiler the comment should be kept in the source even after compiling. WordPress uses this in your wp-admin themes section.
Finally, we import the Bootstrap styles from the node_modules directory, and everything should be set and ready to go. If you run npm run dev this should output a style.css with Bootstrap included.
Of course, you are free to add any additional Sass files you need for your theme, here are mine:
Step 4. Create an app.js
Now, to compile your Bootstrap JavaScript create a new file js/app.js and import Bootstrap:
Save this, and run npm run dev again. Now you should have a compiled app.js file in your theme root with all the Bootstrap JavaScript.
That is all that is required. After this, you’ll just want to get comfortable with the Laravel Mix commands.
Laravel Mix Commands
Laravel Mix provides a few helpful commands while you are developing your theme. Here is an outline for the main ones you will need:
Run dev compiles the assets but does not minify. Useful for seeing the full source.
Run production compiles and minifies, ready for you to push to production.
This keeps a watch on your files and if any change, then it runs the dev command automatically.
Check the Laravel Mix documentation for a complete list of everything it can do. Pretty much everything is supported when you are using it outside of Laravel, except for the versioning which relies on an internal Laravel helper function.
Corcel Laravel Wordpress
I hope this helps you create your next WordPress theme.
Comments are closed.