My Wordpress Dev Setup/Using Laravel Tools to Improve Your Wordpress Development

Pete Hegman
Aug 27, 2017 · 6 min read

At my job I build custom Wordpress themes and plugins and in my free time I love building projects in Laravel and Vue.js. Laravel is an incredible framework that I personally love working with and it also has a bunch of tools that are flexible enough to use in other projects. I have integrated some of these tools into my Wordpress development and thought it could be helpful to others to share how I integrate these Laravel tools to speed up Wordpress development.

The Famous 5 Minute Install in 2 Minutes

With the help of Laravel Valet you can easily setup a fresh Wordpress install on your localhost in less than 2 minutes. Below are the steps to getting all of this setup.

Step 1: Install Laravel Valet

If you don’t already have Homebrew install it! Its as simple as opening up your terminal and running /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once Homebrew is installed we need to install PHP 7.1 by running brew install homebrew/php/php71

Next we can install Valet via Composer. If you don’t have Composer you can install it by running the following commands: https://getcomposer.org/download/
Once installed you will want to move the composer.phar file into your bin directory so it can be run globally. To do this run mv composer.phar /usr/local/bin/composer . You may need to run this with sudo depending on permissions. Finally in your terminal run export PATH=”$PATH:~/.composer/vendor/bin”

Once Composer is installed run composer global require laravel/valet and then valet install to install Valet. Great, Laravel Valet is installed!

Finally we need a MySQL server. Run brew install mysql

Lets get Valet and the MySQL server up and running. First make sure you don’t have any other local servers running (MAMP). Then run valet start to start Valet and brew services start mysql to start your MySQL server.

Step 2: WP CLI

I like to use the Wordpress Command Line Interface to quickly download a fresh copy of Wordpress. To install this run curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar to download the CLI and then run chmod +x wp-cli.phar` and `sudo mv wp-cli.phar /usr/local/bin/wp to update the permissions and allow it to be run globally.

Step 3: Folder Structure

The best way to use Valet is to have all of your sites in one central folder. I like to use the Sites folder in my root directory. Out of the box OSX doesn’t have this folder but it is as easy as running mkdir Sites in your terminal. Now all of your sites can live in this directory.

Step 4: Putting it all together

Lets combine all of these tools to see how easy it is to get a fresh Wordpress install up and running.

First lets “park” Valet. Open up your terminal and run cd Sites and then run valet park . Now every folder in your Sites directory has its own development url out of the box.

Create a new folder in your Sites directory by running mkdir my-cool-site and then cd into this by running cd my-cool-site

Run wp core download to download a fresh copy of Wordpress

Now we need to create a database. I like to use Sequel Pro for this step. Open up Sequel Pro and enter 127.0.0.1 for the host and root for the username, then click “Connect”. In the top left click “Choose Database” and then “Add Database”. Enter your database name, I like to keep it the same as the folder for consistency, and click “Add”

Now, in your browser, navigate to my-cool-site.dev (or the name of your folder followed by .dev) and you should see the start of the Wordpress install. Choose your language and then on the next page enter the name of the database we just made, `root` for the username and leave the password blank. Finish the install and thats it!

The real beauty of Valet is as you start to get more and more sites on your localhost they are incredibly easy to switch between. They are all available at your-folder-name.dev

Compiling Assets With Laravel Mix

If your building themes or plugins from scratch you are going to need some sort of build script to compile your Sass and JS. There are lots of tools out there including Gulp, Grunt, Webpack, CodeKit, etc. Before Laravel Mix (and Laravel Elixir) I had a Gulp or Grunt file that I would use between projects, but it was complicated and hard to understand and thats where Laravel Mix is awesome. Laravel Mix is built on top of Webpack and provides a fluent API for defining build tasks.

Using Laravel Mix in your theme or plugin

To get started using Mix in your theme or plugin your first need NPM or Yarn. I would suggest using Yarn as it is essentially a substitute for NPM that is much faster and more efficient. You can install Yarn via Homebrew by running brew install yarn

Then cd into your theme or plugin and if you don’t already have a package.json file run yarn init. Follow the prompts to create a package.json file.

We need to install two packages to get Mix up and running. Run yarn add laravel-mix and yarn add cross-env

Next we need to add some scripts to the package.json file. Open this up in your favorite text editor (I use Sublime) and add the following lines to the scripts section:

“dev”: “yarn run development”,
“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js — progress — hide-modules — config=node_modules/laravel-mix/setup/webpack.config.js”,
“watch”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js — watch — progress — hide-modules — config=node_modules/laravel-mix/setup/webpack.config.js”,
“watch-poll”: “yarn run watch — — watch-poll”,
“hot”: “cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js — inline — hot — config=node_modules/laravel-mix/setup/webpack.config.js”,
“prod”: “yarn run production”,
“production”: “cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js — progress — hide-modules — config=node_modules/laravel-mix/setup/webpack.config.js”

Next we need to create our configuration file. Create a file named webpack.mix.js in the root of your theme or plugin. In this file add the following:

let mix = require(‘laravel-mix’);/*
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
| Mix Asset Management
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js(‘src/js/app.js’, ‘public/js’)
.sass(‘src/sass/app.scss’, ‘public/css’)
.browserSync({
proxy: ‘your-cool-site.dev’
});

The above example will compile `app.js` and place it in the public/js directory. It will compile app.scss down and place it in the public/css directory, and it will use BrowserSync to live reload when running the watch command. Of course these paths can be changed and the full documentation for defining tasks can be found here: https://laravel.com/docs/5.4/mix

Compiling Assets

Once you have the above all setup you can run yarn run dev to compile assets down. Run yarn run prod to compile and minify assets, and run yarn run watch to watch Sass and JS files for changes and compile them down.

Using dd() in Wordpress Development

If you have used Laravel before you know about dd() . It is a simple yet very helpful function to dump an object or array in a readable format and then end the script execution. I found this function so helpful that I built a very simple plugin to allow you to use it when developing Wordpress themes or plugins. All you have to do is install https://wordpress.org/plugins/laravel-dd/, activate it and you can use dd() in any theme or plugin.

Since I only really need this plugin on my localhost during development and I use git for deployment I like to add wp-content/plugins/laravel-dd/ to my .gitignore

)

Pete Hegman

Written by

Developer, mountain biker, skier,— Sharing skills I have learned along the way — https://peterhegman.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade