Livereload WordPress PHP code during development

I got tired of reloading 2 browser windows (one incognito) during development. I saw one fellow developer using Livereload in his code so I gave it a try.

Boy was that a good/effective idea.

  1. Create package.json file with npm init
    in your project dir.
  2. Add line "livereload": "^0.6.2" to devDependencies and "dev": "livereload -d wp-content", to scripts
      "name": "",
      "version": "1.0.0",
      "description": "",
      "dependencies": {
      "devDependencies": {
        "livereload": "^0.6.2"
      "scripts": {
        "dev": "livereload -d wp-content",
        "test": "echo \"Error: no test specified\" && exit 1"
      "repository": {
        "type": "git",
        "url": "git+ssh://"
      "author": "Michal Zuber",
      "license": "MIT"
  3. Install livereload package npm install
  4. Next add LiveReload Chrome extension
  5. Run npm run dev or yarn dev
  6. Open project URL in browser and click LiveReload extension icon to connect with livereload. Example console output when handshake was successful
    yarn dev v0.28.4
    $ livereload -d wp-content
    LiveReload is waiting for browser to connect.
    Protocol version: 7
    Exclusions: /\.git\//,/\.svn\//,/\.hg\//
    Extensions: html,css,js,png,gif,jpg,php,php5,py,rb,erb,coffee
    Polling: false
    Starting LiveReload v0.6.2 for /srv/http/ on port 35729.
    Watching /srv/http/
    Browser connected.
    Client message: {"command":"hello","protocols":["",""],"ver":"2.2.2","ext":"Chrome","extver":"2.1.0"}
    Client requested handshake...
    Handshaking with client using protocol 7...
    Client message: {"command":"info","plugins":{"less":{"disable":false,"version":"1.0"}},"url":"http://localhost/"}