Laravel Wordpress

 



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.

Laravel in WordPress Theme. Laravel is a web application framework with expressive, elegant syntax. It's one of the most popular PHP frameworks today. Laraish brings the Laravel Framework into WordPress, which allow us to have all the benefits of Laravel. So you can create themes with less effort, more enjoyment! Table of contents.

  1. Imagine powering the front end of your website in WordPress while managing content, payments, subscriptions, advanced tools, and custom dashboard in the powerful MVC framework Laravel (5.5+,6,7,8) Picture being able to deploy this robust development environment in just a few clicks — with the portability that you need to deploy across multiple servers.
  2. I am Senior Web developer and Laravel, Wordpress Expert. I have 5 years professional experience in Web development. Who love to fix the small as well as the complex issues/errors. I like PHP coding and working with algorithms, Ability to thoroughly test and deliver bug-free code.

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. Download bootcamp assistant.

Step 1. Create the package.json File

Laravel vs wordpress

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.

Laravel Wordpress

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: Os x el capitan.

Step 4. Create an app.js

Panasonic tv parts. 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.

Laravel Wordpress Package

Laravel Wordpress

Laravel Wordpress

That is all that is required. After this, you’ll just want to get comfortable with the Laravel Mix commands.

Wordpress

Laravel Mix Commands

Laravel Wordpress Corcel

Laravel Mix provides a few helpful commands while you are developing your theme. Here is an outline for the main ones you will need:

Laravel Wordpress Api

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.

Laravel Wordpress Rest Api

This keeps a watch on your files and if any change, then it runs the dev command automatically.

Wordpress Laravel Blade

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.

Laravel Wordpress Theme

I hope this helps you create your next WordPress theme.