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/"}

Author: Michal Zuber

Full stack developer, biker and rollerblader. Owner and developer at Co-founded Blog at

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s