4

Adobe Brackets has a live preview feature which lets me view a HTML webpage whilst I'm working on the .css and .html files.

I'm now starting work on a WordPress website which involves .html, .css, .js and .php files. How can I live preview a WordPress website using Brackets?

henrywright
  • 195

3 Answers3

3

I think I figured out a solution to this!

You can set a Live Preview Base URL in your project settings. When Brackets tries to preview the page, it will load the file name and path in your project of the current file, appended to the end of that base URL.

The issue with WordPress is that the path and filename of the php file you are working on in your project is rarely in any way related to the URL you will be accessing to execute that code and view your template page.

So, what do we do if we want our server to serve up a different page than what the browser requested? URL rewriting!

I set my Base URL in brackets to http://server.dev/theme/ and then created an .htaccess file for Apache on my development server. Here's an example:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule theme/archive.php "/?m=201510"
    RewriteRule theme/ "/"
    RewriteRule theme/header.php "/"
    RewriteRule theme/footer.php "/"
    RewriteRule theme/page.php "/?page_id=16080"
    RewriteRule theme/search.php "/?s=asdf"
    RewriteRule theme/sidebar.php "/"
    RewriteRule theme/single.php "/?p=16247"
</IfModule>

As you can see, you need to choose some arbitrary page requests for some of the files you'll be editing.

To be sure, there are many other issues with workflow and refreshing, at least in testing on Brackets 1.5, but this solves one big problem of using Brackets' Live Preview for WordPress.

NReilingh
  • 5,883
2

You can use Live Preview with your own backend (such as a WordPress server), but it comes with certain caveats:

  • You need a server running locally, pointing at the same folder you have open for editing in Brackets
  • Live HTML updating is disabled -- though you still get live CSS updating (and selector highlighting). Brackets falls back to simple "live reload" when you edit HTML, PHP, or other files.

The documentation has more detailed info: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

peterflynn
  • 417
0

I wish you could, however Brackets' Live preview feature seems to be built around a static workflow. There's no support whatsoever for previewing any dynamic languages and, as far as I know, there's no plans to add it either.

It's a shame too because it renders the app completely useless to me. :-/

Joey the Squid
  • 1