Turn a WordPress site into an installable PWA (2026)

Key takeaways

• Upload manifest.webmanifest and sw.js to the WordPress root (SFTP or file manager).
• Add the manifest link via functions.php or an Insert Headers plugin.
• Install analytics beat WordPress plugin dashboards — use InstantPWA to see real numbers.

Before you start

• WordPress 5.5+
• HTTPS origin
• File-manager access or SFTP

manifest.webmanifest

{
  "name": "Your product",
  "short_name": "Product",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111827",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Step-by-step for WordPress

1. Step 1
   Upload manifest and sw.js

   Place both files at /wp-content/../ (the site root).

2. Step 2
   Link the manifest

   Add to your theme functions.php (or use Insert Headers and Footers).

   add_action('wp_head', function () {
     echo '<link rel="manifest" href="/manifest.webmanifest">';
     echo '<meta name="theme-color" content="#111827">';
   });

3. Step 3
   Add the install popup

   Paste the InstantPWA snippet into your header — no plugin needed.

Minimal sw.js

// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});

Common WordPress gotchas

• Caching plugins (WP Rocket, W3 Total Cache) can serve stale manifests. Purge cache after any change.
• Some WordPress hosts strip the `.webmanifest` MIME type. Test with `curl -I` — you should see `application/manifest+json`.

FAQ