Live.js and WordPress

I want to share a fantastic little tool that I’ve only recently come across; Live.js, written by Martin Kool.

This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them.

That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time.

A lot of text editors offer HTML previews and such, but they only work for plain .html pages. The great thing about Live.js is that it works on any webpage, including a working WordPress theme.

Live.js for WordPress Plugin

I have put together a (very!) simple plugin for WordPress to make things that little bit easier. You can download it here (Rename the folder to “pbd-livejs” once you unzip it), or view it on Github.

It automatically adds Live.js to your theme, but only when you are logged in and working locally. You should never use this script on a live site, and the plugin ensures you won’t.

It also keeps the script out of your theme code, which is good because it’s purely for development. There is no need for it to be present in the files on your server.

One final note is that although Live.js also supports sensing HTML changes, I have disabled this. With it enabled, your webpage essentially “flashes” as it loads every second or two.

Let me know if you try it out, or if you’ve used Live.js before already!

Enjoy this post? You should follow me on Twitter!