In this article

↑ Back to top

Developing a WordPress Theme with Jetpack Locally

Jetpack requires a publicly accessible URL for certain features, which can make local theme development slightly more complex. Sometimes, you need to develop or update a WordPress theme and style blocks coming from Jetpack. Many of the blocks in Jetpack are behind the Jetpack connection since they provide web service-based features. This guide walks you through setting up a local WordPress environment that works with Jetpack while ensuring it remains connected properly.

Prerequisites

  • A local WordPress installation (using LocalWP, XAMPP, Docker, or any other tool).
  • Jetpack plugin installed.
  • A way to expose your local site to the internet (e.g., ngrok or Cloudflare Tunnel).

Step 1: Set Up Your Local WordPress Environment

  1. Install WordPress locally using your preferred method (e.g., LocalWP, MAMP, or WP-CLI).
  2. Install and activate the Jetpack plugin.

Step 2: Expose Your Local Site with a Public URL

Jetpack requires a public-facing URL to connect properly. You can achieve this using:

Using ngrok

  1. Install ngrok and run the following command to create a secure public URL:ngrok http 80or, if using a different port (e.g., 8080):ngrok http 8080
  2. Copy the provided https:// URL and use it as your WordPress site URL.

Using Cloudflare Tunnel

  1. Set up Cloudflare Tunnel and configure it to point to your local WordPress environment.
  2. Copy the public URL provided by Cloudflare and update your site settings

Step 3: Update WordPress Site URL

Once you have a public URL:

  1. Update WordPress settings:
    • Go to Settings > General in the WordPress admin panel.
    • Change WordPress Address (URL) and Site Address (URL) to the public URL (e.g., https://your-ngrok-url.ngrok.io).
  2. Update your database to reflect the new URL using WP-CLI:
    wp search-replace 'http://localhost' 'https://your-ngrok-url.ngrok.io'

Step 4: Connect Jetpack

  1. Go to Jetpack > Dashboard in WordPress admin.
  2. Click Set up Jetpack and follow the connection process.
  3. Ensure Jetpack connects successfully to your WordPress.com account.

Step 5: Develop Your Theme

Now that Jetpack is connected, you can:

  • Build and test your theme with Jetpack features like infinite scroll, social sharing, or site stats.
  • Use wp theme activate your-theme to switch themes during development.
  • Run wp jetpack module activate [module-name] to enable specific Jetpack features via WP-CLI.

Troubleshooting

1. Jetpack Fails to Connect?

  • Ensure your ngrok or Cloudflare Tunnel session is active.
  • Check that your site URL in WordPress settings matches the public URL exactly.
  • If using ngrok, try running it with --region to find a faster server.

2. Images Not Loading?

  • Jetpack’s Site Accelerator might conflict with the local environment. Disable it under Jetpack > Settings > Performance.

With this setup, you can fully develop and test your WordPress theme locally while leveraging Jetpack’s powerful features.