Wordpress: edit page contents in IDE

If you have ever used WordPress and you had an opportunity to tweak page content using HTML maybe you have found it a bit annoying to always edit page content, press Preview and so on.

So was I until yesterday when I discovered a way to edit page content in my favourite IDE and automatically refresh page with a new content after I save the file. It is a dirty way but it works for me and maybe it will be useful for somebody else.

For these to work you will need:
- your favourite file watcher (I am using my own wrapper over the watchdog tool);
- browser reload tool (I am using simple apple script for that — see it below)
- mysql client installed
- it is good to have something like MySqlWorkbench installed

Step 1. Start editing your page in WordPress.
Click on preview to open page preview in another tab.

Step 2. Find out post ID for your page.
To do so you can open MySqlWorkbench, run this command and take the post ID (you will need it later):

Step 3. Create update script for your page.
I am using a shell script like this one:

So here you can see that we are taking file contents from file your-local-file.html that you can edit anywhere and using it to update post_content in your WordPress table wp_posts.

One more thing to note is escaping single quotes ` before running the UPDATE. Probably you will need less backslashes than I but this is what I have in my script.

Step 4. Setup your file watcher.
This is the “put everything together” step where you will have to setup your file watcher to run you script and to reload browser tab with your page preview.

The easiest way to reload your browser tab is to get active tab id using this shell command:

(you will get something like tab id 5456 of window id 18) and then to reload browser using this command:

Works pretty nice :)

After you’ve done with tweaking do not forget to copy and paste your final page contents into WordPress and to save it in a usual way.