By using our mini forum, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy

Q: How to auto reload browser while developing WordPress theme?

+5 votes

Hi, for my WordPress theme developing I am using PHPStorm IDE and it is great! :-)

However, I am trying to find a solution to auto reload (auto refresh) the browser (I am using Chrome) whenever I am changing the PHP files in my localhost enviorment (XAMPP).

If it is possible to recommend some extensions, add-ons for Chrome/Firefox (maybe also for CSS, JS and HTML).

I want to avoid the F5 and CTRL + F5 refreshing... :-)


asked in Web Development category by user icabe

3 Answers

+1 vote
Best answer

Here is another solution for live reloading ALL the inner WP pages (not only the main index.php) in Chrome (not sure whether it works with Firefox...):

1. Install LiveReload software from: HERE

2. Install the Chrome add-on from: HERE

3. Watch this video to connect the dots:

answered by user hues
edited by user golearnweb
+4 votes

For HTML + CSS + JS files the best auto-refresh (+debugging) solution is the original JetBrains IDE support Chrome add-on: CLICK HERE to view the extension.

Here is also a video.

These are my settings for using it with PHPStorm (screenshot below):

jetbrains support Chrome add-on PHPStorm settings

answered by user eiorgert
edited by user golearnweb
+3 votes

The best option for auto-reload Chrome browser which I found is: Live Reload:

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:

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

2. Install Live Reload

3. Click on your extension icon --> click "Create a new reload rule..."

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

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

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

7. Ignore source file URL's:



Note: This 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.

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.

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

10. Click "Save reload rule".

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

auto-reload Chrome add-on settings for WordPress development

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

html css js autorefresh Chrome extension settings

* or in the Host URL you can also type:



answered by user john7
edited by user golearnweb