Headless WordPress Interview Questions

Decoupled architectures, REST API, GraphQL, and Next.js integration.

Headless WordPress uses WP as a CMS backend and a modern JS framework (like Next.js) for the frontend. This approach is popular for high-performance, omnichannel experiences.

1. What are the pros and cons of Headless WordPress?

Answer:

  • Pros:
    • Performance: Static generation (SSG) or Edge rendering.
    • Security: The CMS is hidden/decoupled from the frontend.
    • Developer Experience: Use modern tools (React, Vue) instead of PHP templates.
    • Omnichannel: Serve data to Web, App, Watch, etc.
  • Cons:
    • Complexity: Requires managing two stacks (WP + Node).
    • Plugin Compatibility: Visual plugins (sliders, forms) won't work out of the box.
    • Previewing: Requires custom setup to preview drafts.

2. REST API vs WPGraphQL: Which would you choose and why?

Answer:

  • REST API: Built-in. Good for simple integrations. Can suffer from over-fetching (getting too much data) or under-fetching (needing multiple requests).
  • WPGraphQL: Community standard for Headless. Allows you to query exactly what you need in a single request. Strongly typed. Generally preferred for complex Headless sites.

3. How do you handle authentication in a Headless setup?

Answer: Since the frontend is on a different domain/port, standard cookies might not work easily.

  • JWT (JSON Web Tokens): Most common. Plugin issues a token on login, frontend sends it in `Authorization` header.
  • Application Passwords: Good for scripts, not for user sessions.
  • Faust.js / Next.js Auth: Wrappers that handle cookie-based auth proxying for a seamless experience.

4. How do you handle "Preview Mode" in Headless WordPress?

Answer:

  1. WordPress generates a special preview URL with a secret token.
  2. The frontend (Next.js) has an API route that verifies the token.
  3. If valid, it sets a cookie to bypass Static Generation and fetch draft content directly from WordPress.
  4. The page renders the draft content.

5. How do you handle forms (e.g., Gravity Forms, CF7) in Headless?

Answer: You cannot render the form shortcode directly.

  • Option A: Rebuild the form in React and submit data to the form plugin's REST API endpoint.
  • Option B: Use a headless-specific library (like `gravityforms-headless`) that exposes form schema via API, allowing you to render fields dynamically in React.

6. What is ISR (Incremental Static Regeneration) and how does it help Headless WP?

Answer: ISR allows you to create or update static pages after you’ve built your site.

Benefit: In a large WordPress site (10k+ posts), building all pages statically takes too long. With ISR, you can build critical pages at build time and generate others on-demand when a user requests them. You can also set a revalidation time (e.g., 60 seconds) so content updates without a full rebuild.

7. What are the SEO challenges in Headless WordPress?

Answer:

  • Meta Tags: You need to fetch SEO data (Yoast/RankMath) via the API and inject it into the <head> of your frontend application.
  • Sitemaps: The default WP sitemap points to the WP domain. You need to generate a custom sitemap on the frontend or proxy the WP sitemap to rewrite URLs.
  • Canonical URLs: Ensure canonicals point to the frontend domain, not the backend WP installation.

8. How do Webhooks function in a Headless architecture?

Answer: Webhooks are used to trigger a rebuild or cache invalidation on the frontend hosting provider (Vercel/Netlify) whenever content changes in WordPress.

Workflow: User publishes a post -> WP sends POST request to Vercel Webhook URL -> Vercel triggers a new deployment or revalidates the specific path.