Can You Connect WordPress as a Framer Custom Domain? A Technical Implementation Guide

Problem Statement & Impact

Modern web architectures frequently require the decoupling of frontend marketing assets from enterprise content management systems. Organizations often adopt Framer for high-fidelity, design-forward landing pages and interactive prototypes while relying on WordPress as a headless or monolithic backend for content syndication, user management, and archival data storage. A frequent engineering requirement involves mapping these two disparate platforms under a unified root domain structure.

The technical challenge centers on the mutual exclusivity of hosting infrastructures. Framer hosts static assets on a globally distributed Content Delivery Network (CDN) managed via custom DNS records (CNAME and A records), whereas WordPress requires a dedicated PHP-FPM runtime, an upstream web server (Nginx or Apache), and a persistent relational database (MySQL or MariaDB). Direct platform replacement—attempting to host a WordPress instance directly inside Framer’s edge infrastructure—is fundamentally impossible because Framer lacks a persistent PHP execution environment and database storage layer.

Attempting improper root domain routing without a strict reverse proxy or subdomain segregation strategy leads to several severe technical and security consequences:

• DNS Routing Failures and SSL/TLS Collisions: Pointing the apex domain (`example.com`) directly to Framer’s nameservers while attempting to serve WordPress through an A record pointing to a separate VPS results in split-brain DNS states, breaking Let’s Encrypt automated ACME challenges and causing continuous `ERR_SSL_VERSION_OR_CIPHER_MISMATCH` errors for end-users.
• Cookie and Session Hijacking Vectors: Improperly configured subdomains or reverse proxies sharing the same root domain can lead to cross-site scripting (XSS) vulnerabilities if WordPress authentication cookies (`wordpress_logged_in_*`) lack the appropriate `Secure`, `HttpOnly`, and `SameSite=Strict` flag inheritance across upstream boundaries.
• SEO Cannibalization and Routing Loops: Incorrect Nginx or Cloudflare edge routing rules can trigger infinite HTTP 301/302 redirection loops between `https://example.com` and `https://www.example.com`, destroying search engine crawl budgets and rendering administrative endpoints inaccessible.
• Expanded Attack Surface: Decoupled systems deployed without strict firewall rules, proper CORS headers, and Web Application Firewall (WAF) integration leave REST API endpoints vulnerable to unauthorized data exfiltration, XML-RPC amplification attacks, and distributed denial-of-service (DDoS) vectors.

Root Cause Analysis & Architecture

To understand why a direct one-to-one replacement of a WordPress root domain with a Framer custom domain fails, one must analyze the HTTP request lifecycle and domain name resolution flow. When a user queries `https://example.com`, the recursive DNS resolver queries the authoritative nameservers for the domain’s A and AAAA records.

If the apex domain is configured to point directly to Framer’s edge servers via an A record, any traffic destined for WordPress paths (such as `/wp-admin/`, `/wp-json/`, or `/wp-login.php`) hits Framer’s CDN instead of the origin server running PHP-FPM. Framer’s routing engine will evaluate these paths as missing routes within its project space, resulting in custom 404 pages or routing failures, completely bypassing the WordPress backend.

Conversely, pointing the apex domain to a WordPress server prevents Framer from utilizing its required CNAME configurations (such as `www.example.com` or custom subdomain mappings like `app.example.com` or `marketing.example.com`). Framer requires specific DNS validation records (TXT records) and canonical CNAME targets (`proxy.framer.app` or similar designated endpoints) to provision and maintain SSL/TLS certificates via automated certificate authorities.

The architecturally sound resolution to this infrastructural conflict is a subdomain segmentation model:

1. Primary WordPress Core: Retained at the root domain (`example.com`) or a dedicated operational subdomain (`cms.example.com`) backed by a secure LEMP stack (Linux, Nginx, MySQL, PHP-FPM).
2. Framer Marketing Frontend: Deployed to a dedicated subdomain (`try.example.com` or `get.example.com`), completely isolated from the WordPress PHP execution environment.
3. Edge-Level Reverse Proxy Routing (Alternative Advanced Pattern): Utilizing an enterprise-grade edge proxy (such as Cloudflare Workers or an Nginx reverse proxy upstream) to intercept traffic at the apex domain and conditionally route requests matching specific URI patterns (e.g., `/blog/` to WordPress, all other paths to Framer). However, this pattern introduces significant caching complexity, cache poisoning risks, and header sanitization overhead.

Step-by-Step Implementation & Remediation Guide

The standard, secure implementation strategy involves deploying Framer on a dedicated subdomain while maintaining WordPress on the primary domain or an alternative administrative subdomain. Execute the following technical procedures to configure, secure, and validate this architecture.

Step 1: DNS Configuration for Subdomain Segregation

Log in to your DNS registrar or authoritative DNS provider (e.g., Cloudflare, Route53, or DigitalOcean DNS). Configure the DNS records to separate the Framer deployment from the WordPress origin server.

# Example DNS Zone File Configuration
# Root domain pointing to WordPress origin server IP
example.com.         IN  A       192.0.2.45
www.example.com.     IN  CNAME   example.com.

# Framer marketing subdomain configuration
marketing.example.com. IN  CNAME   sites.framer.app.
_framer-verify.marketing.example.com. IN TXT "framer-site-verification=abc123xyz789"

Step 2: Configuring Framer Custom Domain

1. Navigate to your Framer project settings dashboard.
2. Go to the Domains tab and input your chosen subdomain (`marketing.example.com`).
3. Framer will generate specific CNAME and TXT validation records. Input these exact records into your DNS provider’s control panel.
4. Wait for DNS propagation (typically 5 to 30 minutes) and verify that Framer successfully issues the Let’s Encrypt SSL/TLS certificate.

Step 3: Hardening the WordPress Origin Server (Nginx & PHP-FPM)

Ensure your WordPress instance is properly secured against unauthorized access, SQL injection, and cross-site request forgery. Update your Nginx server block configuration to enforce TLS 1.3, restrict access to sensitive PHP files, and implement strict security headers.

# /etc/nginx/sites-available/example.com
server {
    listen 443 ssl http2;
    server_name example.com www.example.com;
    root /var/www/html/wordpress;
    index index.php index.html;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    # Deny access to sensitive files
    location ~* /\.(?!well-known).* {
        deny all;
    }

    location ~* /wp-config.php {
        deny all;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastScript_name;
        include fastcgi_params;
    }
}

Step 4: Executing Hardening Procedures via WP-CLI

Run the following WP-CLI commands directly on your server terminal to disable file editing from the dashboard, enforce SSL administration, and remove default vulnerable themes.

# Navigate to WordPress root directory
cd /var/www/html/wordpress

# Enforce SSL for admin dashboards and logins
wp option update siteurl 'https://example.com' --allow-root
wp option update home 'https://example.com' --allow-root

# Disable file editing directly inside the WordPress admin dashboard
wp config set DISALLOW_FILE_EDIT true --raw --allow-root

# Disable XML-RPC if not required by external mobile apps or plugins
wp config set XMLRPC_ENABLED false --raw --allow-root

# Purge default unused themes to reduce attack surface
wp theme delete twentytwentyone twentytwentytwo twentytwentythree --allow-root

Production Hardening & Edge Cases

Deploying a split architecture where Framer handles the marketing frontend and WordPress powers the core backend introduces specific operational edge cases that must be mitigated before launching to production.

CORS (Cross-Origin Resource Sharing) Configuration

If your Framer-built landing pages need to communicate with your WordPress backend via the WP REST API (e.g., submitting form data, fetching dynamic blog posts, or handling user authentication tokens), the WordPress server must explicitly allow cross-origin requests originating from your Framer subdomain.

Add the following PHP snippet to your active theme’s `functions.php` file or implement it via a custom must-use (MU) plugin: