As a developer, the ability to live reload a page as I make changes is incredibly valuable. My dev time is cut down significantly, and my hand is happy to not be hitting CMD+R all the time. Let’s got through setting this up on a WordPress code base.

Tools and Setup

Grunt is the task runner we’ll use to watch for file changes, and kick off a page reload. WordPress is our site platform. Set these up first, I’ll wait…

Once you get the above installed, head to the root directory of your theme ({siteName}/wp-content/themes/{themeName}). This is where we’ll install the necessary NPM packages and setup the Gruntfile. First, let’s install the packages.

Bash

npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev

Now that we have our dependencies setup, let’s write our Gruntfile:

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({

    // Watches for changes and runs tasks
    // Livereload is setup for the 35729 port by default
    watch: {
      sass: {
        files: ['sass/**/*.sass'],
        tasks: ['sass:dev'],
        options: {
          livereload: 35729
        }
      },
      php: {
        files: ['**/*.php'],
        options: {
          livereload: 35729
        }
      }
    },

    // Sass object
    sass: {
      dev: {
        files: [
          {
            src: ['**/*.sass', '!**/_*.sass'],
            cwd: 'sass',
            dest: 'css',
            ext: '.css',
            expand: true
          }
        ],
        options: {
          style: 'expanded',
          compass: true
        }
      }
    }

  });

  // Default task
  grunt.registerTask('default', ['watch']);

  // Load up tasks
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

};

The main piece to check out here is the watch object. The grunt watch package comes with a handy livereload option. All we pass to it is the port we want to watch for live-reload, or true if we want to default it to 35729.

I am watching SASS/PHP files in the above example, but you can watch anything else you need to (JS, PY, etc.). Essentially you are telling Grunt to do is watch for changes in these file types, and reload at that port number when that occurs.

Queueing up the Livereload JS File

Our final step is to call the livereload js file in order to kick things off. This JS file comes with the watch package we installed earlier.

So we’ll head into our functions.php in WordPress (or wherever you queue up your js) and add the script.

functions.php

if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
  wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
  wp_enqueue_script('livereload');
}

What’s happening here is we are checking the server info to see if we are on localhost before we do anything. Why? Because we don’t want to load this JS file outside of our local environment. Next, we’ll register and queue up the script like we normally do in WordPress.

Make sure that the port you pass to the js file matches what you setup in your Gruntfile. It’s important to note that we are live-reloading through the JS file on that port now, so we technically don’t need to run our local build on that same port. If you are running something like MAMP on it’s default port (8888) that should work fine.

You can now run your grunt task and develop CMD+R free!