How to Integrate Lovable with WordPress

The WordPress REST API base URL is the first piece of configuration your Edge Function needs. For public content (published posts and pages), no authentication credentials are needed — just the site URL. For private content or write operations, you also need an Application Password. To set up an Application Password (for private content access): In your WordPress admin dashboard, go to Users → Profile (or Users → All Users, then click your username). Scroll to the 'Application Passwords' section near the bottom of the profile page. Enter a name for the application (e.g., 'Lovable App') and click 'Add New Application Password'. WordPress generates a password like 'abcd 1234 efgh 5678 ijkl mnop' — copy it immediately, it is shown only once. Your Application Password credentials are the WordPress username and this generated password. In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Click 'Add new secret'. Add: - WP_SITE_URL — your WordPress site base URL without trailing slash (e.g., https://yourblog.com) - WP_APP_USERNAME — your WordPress username (only if using authentication) - WP_APP_PASSWORD — the Application Password generated above (only if using authentication) For fully public WordPress blogs (only fetching published posts/pages), only WP_SITE_URL is needed — no authentication credentials are required and the REST API is openly accessible.

The Edge Function proxies WordPress REST API requests, adding authentication headers when needed and handling CORS (the browser cannot call the WordPress REST API directly from a Lovable frontend because WordPress is on a different domain). The function accepts a 'path' parameter specifying the REST API path to fetch (e.g., '/wp/v2/posts?per_page=10&_embed=1'), builds the full URL using WP_SITE_URL, optionally adds Basic Auth headers using the Application Password credentials, and returns the WordPress JSON response. The _embed=1 query parameter is important — it makes WordPress include embedded related resources (featured images, author details, category objects) in a single response rather than requiring multiple API calls. Always include _embed=1 when fetching posts to get featured image URLs and author display names in one request. For performance, consider caching WordPress API responses in Supabase. WordPress content changes infrequently — caching post lists for 5-10 minutes in a supabase_cache table significantly reduces API calls and improves page load times. The Edge Function checks the cache first and only calls WordPress if the cache is stale. For WooCommerce product data (which requires WooCommerce REST API consumer key/secret), add WC_CONSUMER_KEY and WC_CONSUMER_SECRET to Cloud → Secrets and use them as query parameters: ?consumer_key={key}&consumer_secret={secret} on WooCommerce endpoints (/wp-json/wc/v3/products).

1// supabase/functions/wordpress-proxy/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { path } = await req.json() as { path: string };
12
13    if (!path?.startsWith('/')) {
14      return new Response(JSON.stringify({ error: 'path must start with / (e.g., /wp/v2/posts)' }), {
15        status: 400,
16        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const siteUrl = Deno.env.get('WP_SITE_URL')!.replace(/\/$/, '');
21    const username = Deno.env.get('WP_APP_USERNAME');
22    const password = Deno.env.get('WP_APP_PASSWORD');
23
24    const url = `${siteUrl}/wp-json${path}`;
25    const headers: Record<string, string> = { 'Accept': 'application/json' };
26
27    if (username && password) {
28      headers['Authorization'] = 'Basic ' + btoa(`${username}:${password}`);
29    }
30
31    const wpResponse = await fetch(url, { headers });
32
33    if (!wpResponse.ok) {
34      console.error(`WordPress API error ${wpResponse.status} for path: ${path}`);
35      return new Response(JSON.stringify({ error: `WordPress API returned ${wpResponse.status}` }), {
36        status: wpResponse.status,
37        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
38      });
39    }
40
41    const data = await wpResponse.json();
42    const totalPages = wpResponse.headers.get('X-WP-TotalPages');
43    const total = wpResponse.headers.get('X-WP-Total');
44
45    return new Response(JSON.stringify({
46      data,
47      pagination: totalPages ? {
48        total: parseInt(total || '0'),
49        totalPages: parseInt(totalPages),
50      } : null,
51    }), {
52      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
53    });
54  } catch (error) {
55    console.error('wordpress-proxy error:', error);
56    return new Response(JSON.stringify({ error: String(error) }), {
57      status: 500,
58      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59    });
60  }
61});

With the Edge Function deployed, build the Lovable frontend that fetches and displays WordPress content. The React component calls supabase.functions.invoke('wordpress-proxy', { body: { path: '/wp/v2/posts?per_page=10&_embed=1' } }) and renders the returned post data. Key WordPress REST API response fields to use in your React component: - post.title.rendered — post title (may contain HTML entities, use dangerouslySetInnerHTML for safety, or parse with a text decoder) - post.excerpt.rendered — post excerpt HTML - post.content.rendered — full post content HTML - post.date — ISO 8601 publish date - post.slug — URL-friendly post identifier - post._embedded['wp:featuredmedia']?.[0]?.source_url — featured image URL (only present with _embed=1) - post._embedded.author?.[0]?.name — author display name (only present with _embed=1) - post._embedded['wp:term']?.[0] — array of category objects For rendering WordPress HTML content safely, use DOMPurify to sanitize the rendered HTML before inserting it with dangerouslySetInnerHTML. WordPress content can contain arbitrary HTML including scripts if your editor allowed HTML blocks. Ask Lovable to generate the complete post listing, category filter, and single post detail components by describing the layout you want and the WordPress field names above.