Yiannis Christodoulou

15+ years experience in web development, mostly with Joomla! & WordPress

Back to blog

How to auto reload browser while developing a WordPress theme or plugin

The best option for auto-reload Chrome browser which I found is: Live Reload: https://chrome.google.com/webstore/detail/live-reload/jcejoncdonagmfohjcdgohnmecaipidc

It works like a charm! So simple to set up. Hard to believe it took installing/uninstalling several extensions to get to this PERFECTLY working extension.

This is particularly useful for WordPress developers!

My 2-minute setup as a WordPress developer:

Step 1. Run localhost (XAMPP) for a live server.

Step 2. Install Live Reload

Step 3. Click on your extension icon –> click “Create a new reload rule…

Step 4. Add Title of rule (can be your website name)

Step 5. Host URL: http://localhost/ (don’t forget the forward slash at the end)

Step 6. Source file URL’s: http://localhost/* Note: you cannot technically monitor changes in local folders/files (on your comp). Instead, you refer to the root folder by using your source URL followed by a forward slash (/) and asterisk (*) to monitor ALL files

Step 7. Ignore source file URL’s:

http://localhost/wp-admin

http://localhost/wp-admin/customize.php

NoteThis allows your website to use Live Reload without reloading WordPress admin areas. There may be other admin areas to ignore, but this setup works for me.

Step 8. Decide how many seconds the extension should wait before checking for updated source files. I set mine to 1s so the updates are immediate.

Step 9. Choose to enable/disable two reload options based on preference.

Step 10. Click “Save reload rule“.

Here are my settings for my WordPress dev environment (with PHP files):

Here are my settings for HTML/CSS/JavaScript project:

* or in the Host URL you can also type:

Cheers

An answer by john7 on tutorials7.com

Leave a comment