📅 April 24, 2026 ⏱ 9 min read 🏷 Web Development

How to Deploy WordPress on Vercel in 2026 — Complete Guide

Deploying WordPress on Vercel means using WordPress as your content management system (CMS) while hosting your frontend website on Vercel's global edge network. Vercel doesn't run PHP, so you can't host a traditional WordPress site directly on it — but you can use WordPress as a headless CMS and deploy a lightning-fast Next.js frontend on Vercel for free. In this guide, you'll get the complete step-by-step setup to make this work in 2026.

A headless WordPress + Vercel stack gives you the best of both worlds: the familiar WordPress editor for your content team, and the performance of a modern CDN-deployed site that loads in under 1 second globally.

Can You Deploy WordPress Directly on Vercel?

Short answer: No, not directly.

Vercel is a frontend cloud platform optimised for JavaScript frameworks like Next.js, Nuxt, SvelteKit, and Astro. WordPress is a PHP application. Vercel does not support PHP hosting.

The correct approach is the headless architecture — described below.

What Is Headless WordPress?

Think of traditional WordPress like a restaurant where the kitchen (backend) and the dining room (frontend) are in the same building.

Headless WordPress separates them. The kitchen (WordPress PHP backend) stays in one place and manages the food (content). The dining room (your Next.js frontend) is built somewhere else entirely — in this case, deployed on Vercel — and receives the food through a delivery hatch (the WordPress REST API or WPGraphQL).

The result: your editors still use the familiar WordPress admin panel to write posts. But your visitors experience a blazing-fast modern website with 95+ PageSpeed scores.

The Architecture Explained

WordPress Backend (PHP)          Next.js Frontend (Vercel)
├── wp-admin (editors write here) ←→ /api/posts → fetch posts
├── MySQL database                    ├── /blog → ISR pages
├── WPGraphQL plugin                  ├── /[slug] → dynamic routes
└── Hosted on: VPS, Kinsta, etc.  └── Deployed on: Vercel (free)
  

The flow when a visitor loads your blog:

1. Visitor requests yourdomain.com/blog/my-post
2. Vercel serves the pre-built static HTML from its CDN (instant)
3. When you publish a new post in WordPress, it sends a webhook to Vercel
4. Vercel rebuilds just that page (Incremental Static Regeneration)

What You Need Before Starting

• A WordPress installation — hosted on any server (not Vercel). Options: Cloudways, Kinsta, SiteGround, or a self-hosted VPS. Even a free Fly.io instance works.
• WPGraphQL plugin installed on your WordPress site (free)
• Node.js 18+ installed on your local machine
• A Vercel account — free at vercel.com
• A GitHub account — to connect your code repo to Vercel

Step-by-Step Deployment Guide

Step 1 — Install WPGraphQL on Your WordPress Site

In your WordPress admin panel, go to Plugins → Add New → search "WPGraphQL" → install and activate. This turns your WordPress site into a GraphQL API that Next.js can query.

Test it by visiting: https://yourwordpress.com/graphql — you should see the GraphQL playground.

Step 2 — Clone the Official WordPress + Next.js Starter

Vercel provides an official starter template. Run this in your terminal:

npx create-next-app --example cms-wordpress my-wp-site
cd my-wp-site

Step 3 — Configure Your Environment Variables

Copy the example environment file:

cp .env.local.example .env.local

Open .env.local and add your WordPress URL:

WORDPRESS_API_URL=https://yourwordpress.com/graphql

Step 4 — Run Locally to Test

npm install
npm run dev

Open http://localhost:3000. You should see your WordPress posts rendered in the Next.js frontend. If you can see your blog posts, the connection is working.

Step 5 — Push to GitHub

git init
git add .
git commit -m "Initial WordPress + Next.js setup"
git branch -M main
git remote add origin https://github.com/yourusername/my-wp-site.git
git push -u origin main

Step 6 — Deploy to Vercel

1. Go to vercel.com/new
2. Click "Import Project" → select your GitHub repository
3. Vercel auto-detects Next.js — no configuration needed
4. Add your environment variable: WORDPRESS_API_URL = your WordPress GraphQL endpoint
5. Click "Deploy"

Vercel builds your site and gives you a live URL in under 2 minutes. Every future git push auto-deploys.

Environment Variables in Vercel Dashboard

After deploying, add any additional environment variables in Vercel:

1. Go to your project in Vercel Dashboard
2. Click "Settings" → "Environment Variables"
3. Add WORDPRESS_API_URL for Production, Preview, and Development
4. Redeploy for changes to take effect

Setting Up On-Demand Revalidation (Auto-Update When You Publish)

By default, Next.js will regenerate pages on a schedule (ISR). For instant updates when you publish a new WordPress post, set up a webhook:

1. Create a WORDPRESS_PREVIEW_SECRET in your .env.local (any random string)
2. In WordPress admin: Settings → WPGraphQL → Webhooks → add your Vercel revalidation URL
3. Vercel URL format: https://yoursite.vercel.app/api/revalidate?secret=YOUR_SECRET

Now every time you publish a post in WordPress, Vercel instantly rebuilds that page.

Alternative: Serverless WordPress with Vercel Functions (Experimental)

For advanced users, there's an experimental setup where WordPress PHP runs as a serverless function. The Serverless WordPress project packages WordPress into a Lambda-compatible format. This is not production-ready for most use cases, but it's an interesting option for simple blogs.

WordPress Hosting Options Compared

This site itself is built with Next.js deployed on Vercel — the same stack. Read our guide on MCP and AI agents for more on how we automate content workflows. Or see our Complete SEO Guide 2026 to make sure your new fast site actually ranks.

References & Further Reading

• Vercel — Official WordPress Integration Guide
• WordPress.org — WPGraphQL Plugin
• Wikipedia — Headless CMS
• Next.js Docs — Incremental Static Regeneration
• WPGraphQL — Official Documentation