WPMerge - Your development workflow with WPMerge

If you prefer to see a walk-through video, here it is.

Or if you'd like a step-by-step with screenshots, here you go -

Preparing a brand new development environment

Use your preferred wordpress backup / duplication tool to clone your production site to a new development site (DB and all files)
Install WPMerge.io plugin on both production and development sites
Go to WPMerge → Settings on the Production site and copy the site key to WPMerge → Settings on the Development site to link the sites together.
In case there have been any new changes on Prod since we cloned the site in Step 1, run WPMerge → Show advanced options → Clone Prod DB to pull the latest Production database to the Development site.
Ensure the "DB Changes" switch is turned on so that we start capturing any new dev DB changes to be applied to Production later.
Start development.

Development Process

The development process works as follows:

As you make changes to your development site the DB changes are recorded, stored separately and applied to the local development site.
Because the DB changes are stored separately rather than fully merged into the WP DB we are able to pull new versions of the Production DB down at any time and reapply the local development changes. We do this using the Clone Prod DB & Apply Dev Changes button allowing us to include all new changes on Production (new pages added, new woocommerce orders, new comments left etc) with our new local development changes then applied on top.
We continue to develop locally, pulling the Prod DB and apply our changes until we are ready to deploy our changes to the Production site.
We use Show advanced options → Clone Prod DB & Test Merge. This pulls the latest Production database and fully merges our local changes into the Development DB. We can now test the Development DB knowing that it is an exact copy of what will be pushed to Production.
Test the merged Development site until we are happy that it is ready for deployment.

IMPORTANT: Even though we have merged our local changes into the Development database we are *still* keeping a copy of our local changes separately. If for any reason we want to undo the merge or if we decide to make more changes we can click the "Clone Prod DB & Apply Dev Changes" button again to pull the latest Prod DB and re-apply our local changes without merging.

NOTE: Sometimes we want to test changes in our Development site without recording database changes that will be applied later. We can do this by temporarily turning off the “Record DB Changes” switch (it changes to red). We can then make any changes we want without the changes being captured. When we are ready to start capturing changes again we switch “Record DB Changes” on again (to green).

Deployment to Production

Fully back up your Production website (files & DB)
Once ready we need to export any modified files from Development to be sent to Production. Click the Download files as a zip button. This will save a zip file of all new & modified files on Development. Upload this zip file to the WordPress web root directory and unzip. All of the new files will be extracted to their correct folders. The zip file can then be deleted.
The final step is to hit the Apply changes to Prod button to send all of the local development changes through to Production where they will be merged into the Production database.
At this point your development cycle is complete. Congratulations.

Resetting our development environment for the next stage of development.

Discard any recorded changes (if any) on the local development site by clicking the Discard Records button
Clone the latest Prod database from the Production site to the development site by clicking the Show advanced options → Clone Prod DB button.
Ensure the "DB Changes" switch is turned on (green) so that any new changes to the development site are captured and stored.

IMPORTANT: if you have made any file changes to the Production site since your last development cycle finished you will need to download any changed files to your development environment. This can be done with various file sync tools (LocalSync.io or WordMove). Alternatively you could start fresh by completely cloning the full Production site again.

• • •

FAQs

What is the difference between "Clone Prod DB & Apply Changes" and "Clone Prod DB & Test Merge"?

"Clone Prod DB & Apply Changes" - pulls the latest Production DB to the local development site. The changes we've been making locally are then applied to the imported Production database but are still kept completely separate. This means we can continue to pull new versions of the Production database without overwriting our development work - our development database changes are kept separate until we are ready to merge.

"Clone Prod DB & Test Merge" pulls the latest Prod DB and permanently merges the locally made changes. At this point the Dev site will be exactly how the Production site will be once the local changes are applied. We simply need to carefully test the merged development site and if everything is working as expected we can then push up the entire DB and any new/modified changes to Production.

What happens if we "Apply changes to Prod" without first doing the "Clone Prod DB & Test Merge"?

All of our local development changes will be applied to directly to the production DB and merged on Production. While we can do this at any time it is highly, highly recommended that we first do a "Clone Prod DB & Test Merge" first so that we can test all of the merged DB changes on our local development site and only "Apply changes to Prod" when we have finished testing.

IMPORTANT: doing a "Apply changes to Prod" requires us to also export and upload any new and modified files that have been added to the Development site to the Production site.

Thanks to @phillcoxon for his input with this article.