Local to live site development workflow using WordPress Studio

I’m currently in search for a workflow to synchronize my local development with a live site. One of the workflow I tried is by using the WordPress Studio, because it offers a direct and seamless connection to the hosting service WordPress.com. Here’s my walkthrough and review.

Requirements:

  1. WordPress Studio.
  2. WordPress.com account.
  3. A staging/live site on the WordPress.com hosting. You need to sign up for a Business or Commerce plan, because the synch feature is only available for sites on those plans.

Steps to pull a live site to local:

  1. Open your Studio app.
  2. Log in to your WordPress.com account.
  3. Select the Add site button, and choose Pull an existing site.
  4. Select the name of the site you want to pull from, the available sites are listed under the production label. The pulling process will take sometime, depending on your internet speed and the size of your site. During the process, you can make some adjustments like assigning a local custom domain, and enable the “https” options for the pulled site. You can use the video below for a quick reference.
  5. After the pull process is done, you can access the local site by clicking the Open site link.
Select a live site to pull into a local development.
Select a live site to pull into a local development.

Steps to push to a live site:

  1. After you’ve finished editing the local site.
  2. Navigate to the site’s Sync tab.
  3. Push the changes back to the live site by clicking the Push option.
  4. During the process, you can choose to push all the files and folders, the database or only select some of them.
Push and pull options to sync a local site to its live/staging site.
Push all files and folders changes.
Only push selected files and folders.

After the push process is complete, you can visit the live/staging site and see the reflected changes.

The live/staging site reflects the changes made on the local development.
The live/staging site reflects the changes made on the local development.

Review

I found the Site Editor of the pulled site loads slower compare to a local site that was created directly in the Studio. I tested both of them using Twenty Twenty-Five theme, and a homepage with pattern “Landing page for book.”

When I made edits on the pulled site, I experienced this delayed response across all sections of the Site Editor, like opening and exploring patterns, accessing navigation panel, or when clicking back to the WP-Admin.

Here’s some data from the Developer Tools’s Network tab.

Site creation methodFileTime
Pull an existing site site-editor.php3512ms
Create a sitesite-editor.php1086ms

References

WordPress Studio document on the sync feature.

How to create a staging site.

Download WordPress Studio.

WordPress.com Business and Commerce plans

Share your thoughts

Your email address will not be published. Required fields are marked *