# Run WordPress headless

Show a WordPress site’s content on an Astro, Next.js or Nuxt frontend. Nuvlo deploys the frontend, sets the variables that connect the two, and keeps WordPress visitors and product updates pointed at the frontend.

## Before you start

- A WordPress site in Nuvlo, for example on `cms.example.com`. Create one first, or move one in.
- The frontend’s code in a Git repository, connected to Nuvlo. See [Connect Git](https://app.nuvlo.dev/docs/connect-git).
- A server for the frontend created as **Node.js apps**, **Mixed projects** or **Headless**. A **Headless** server can run both WordPress and the frontend.

## Step 1: Start a headless site

Click **Create**, then **Site**, and choose the **Headless** site type.

![Create site, first step, with the Headless site type card among WordPress, Node.js app, PHP & Laravel and Static website](https://app.nuvlo.dev/docs/shots/headless-wordpress--site-type.webp)

You can also start from the WordPress site: open its **Headless** tab and click **Create a frontend for this site**. That picks the WordPress site for you.

## Step 2: Choose the WordPress backend

Under **WordPress site**, pick the site the frontend loads its content from. Click **Next: choose the frontend**.

The WordPress site keeps its own address. Visitors use the frontend’s domain.

![Choose the WordPress backend step with a list of WordPress sites](https://app.nuvlo.dev/docs/shots/headless-wordpress--backend.webp)

## Step 3: Deploy the frontend

Continue as for any app: choose the repository, framework, domain and settings, then deploy. See [Deploy an application](https://app.nuvlo.dev/docs/deploy-an-application).

Nuvlo sets these variables on the frontend. Your code reads them:

| Variable | Value |
| --- | --- |
| `WORDPRESS_URL` | The WordPress site’s address |
| `SITE_URL` | The frontend’s own address |
| `WOOCOMMERCE_WEBHOOK_SECRET` | The secret that signs product updates |
| `SITE_INDEXABLE` | Whether search engines may show the frontend |

After the first deploy, Nuvlo connects WordPress to the frontend and installs the Nuvlo plugin on WordPress if needed. If WordPress isn’t connected after the deploy, click **Reconnect WordPress** on the frontend’s **Headless** tab.

## Step 4: Check the connection

Open the frontend and click its **Headless** tab. The **WordPress** card shows **Content from** with **Connected**, or **Needs attention** with the problem and a **Reconnect WordPress** button.

If the WordPress theme isn’t Nuvlo Blank, click **Switch to Nuvlo Blank**. Visitors never see the theme, and Nuvlo Blank loads nothing, so you can remove page builders.

![Headless tab of a frontend with the WordPress, Search results and Visitors and links cards](https://app.nuvlo.dev/docs/shots/headless-wordpress--frontend-tab.webp)

## Step 5: Set search results

In **Search results**:

- Turn on the frontend’s switch when it runs on its final domain.
- Keep the WordPress site’s switch off, so search engines only find the frontend.
- **Titles, schema and sitemap** come from Nuvlo SEO on the WordPress site. Click **Install Nuvlo SEO** if it isn’t installed, or **Open SEO settings**.

Changing these deploys the frontend with the new values.

## Step 6: Set visitors and links

In **Visitors and links**:

- **Visitors of …**: send people who open a WordPress page to the same address on the frontend. WordPress admin, logins and payment callbacks stay on WordPress.
- **After payment**: the frontend page customers return to from PayPal, card checks and similar.
- **Password reset**: the page that reset emails link to.
- **Customer account**: the page account links in WooCommerce emails go to.

Click **Save visitors and links**.

![Visitors and links card with the redirect switch and the After payment, Password reset and Customer account paths](https://app.nuvlo.dev/docs/shots/headless-wordpress--visitors.webp)

## Step 7: Check product updates

With WooCommerce, the **Product updates** row shows whether WooCommerce tells the frontend right away when products change. Click **Send a test update** to check the frontend accepts it.

Under **Advanced**, you can change the variable names, the address that receives updates, which changes are reported, pages that stay on WordPress, and replace the webhook secret.

## On the WordPress site

The WordPress site’s **Headless** tab shows which frontends show its content, the theme, and **Edit settings**, which opens the frontend’s tab. Its header links to the frontend with **Open frontend**.

![Headless tab of a WordPress site that a frontend reads from, with Content shown on, Theme and Edit settings](https://app.nuvlo.dev/docs/shots/headless-wordpress--cms-tab.webp)

## Disconnect

On the frontend’s **Headless** tab, open **Advanced** and click **Disconnect**. WordPress shows its own pages again and stops sending product updates.

---
Source: https://app.nuvlo.dev/docs/headless-wordpress