Kunstmatige intelligentie, verbeterde ontwikkeltools en moderne hostingomgevingen geven headless WordPress een nieuwe golf van aandacht onder ontwerpers en ontwikkelaars. Deze evolutie geeft vorm aan de manier waarop gedistribueerde digitale ervaringen worden ontworpen, gebouwd en ingezet.

In deze walkthrough onderzoeken we hoe je Lovable, een AI-gestuurde frontend builder, kunt gebruiken om een moderne website te maken met een headless WordPress backend.

Wat we vandaag zien, biedt een blik in de toekomst van WordPress, of het nu headless of traditioneel is: een meer open, collaboratieve en AI-ondersteunde benadering voor het creëren van digitale ervaringen die contentbeheer combineren met creatieve ontwerpvrijheid.

Begrijpen van headless WordPress

Het opzetten van een headless WordPress omgeving is eenvoudiger dan het klinkt. Zie het als het opsplitsen van WordPress in twee delen:

  • Backend – WordPress blijft je inhoud, media en gegevens beheren zoals gewoonlijk.
  • Frontend – Een aparte app regelt hoe alles eruit ziet en zich gedraagt.

Door de twee te scheiden, behoud je het betrouwbare contentbeheer van WordPress, terwijl je de vrijheid krijgt om te ontwerpen en te bouwen met moderne frontend frameworks zoals React of Vue. Het gaat erom het beste van WordPress te nemen en het verder uit te breiden dan met een traditionele installatie mogelijk is.

Een andere manier om het je voor te stellen: WordPress zorgt voor de structuur (je content) en je frontend zorgt voor de stijl (hoe het wordt gepresenteerd).

Waarom Lovable?

Is headless WordPress echt nodig? Dat hangt af van je doelen. Voor veel projecten is een standaard WordPress setup nog steeds de makkelijkste en meest efficiënte weg. Maar als je meer flexibiliteit wilt, snellere iteraties, of een manier om moderne webapps te bouwen die verder gaan dan traditionele thema’s en plugins, dan begint headless WordPress te schitteren.

Voor dit project hebben we Lovable gebruikt, een AI-gestuurd ontwikkelplatform dat je helpt bij het genereren, bewerken en beheren van frontend code. Het bouwt met moderne tools zoals React, Tailwind CSS en Vite, en gebruikt AI aanwijzingen om de layout, styling en logica van componenten af te handelen.

Met andere woorden, Lovable is niet de frontend zelf. Het is de omgeving waarin de frontend wordt gemaakt en onderhouden.

Dit maakte het geschikt voor ons experiment:

  • Flexibele versiecontrole: eenvoudige 2-weg synchronisatie met GitHub, GitLab of Bitbucket.
  • Platformoverschrijdend ontwerp: bouw voor web, mobiel of kiosk vanuit één WordPress backend.
  • Directe iteraties: werk layouts, stijlen of componenten in seconden bij met behulp van AI-prompts.
  • Ontkoppelde beveiliging: geen directe database-exposure vanaf de frontend kant.
  • Ondersteunt statische builds: eenvoudig deployen als statische HTML, CSS en JavaScript voor betere prestaties en betrouwbaarheid.

Natuurlijk zijn headless setups niet zonder nadelen. Het onderhouden van een multi-layer stack kan het debuggen complexer maken, en plugins die inhoud renderen op de voorkant kunnen aangepaste API bruggen nodig hebben. Maar voor statische of content-gedreven sites, biedt het koppelen van WordPress met Lovable een snelle, moderne manier om te ontdekken wat headless kan doen.

Aan de slag

Laten we, voordat we beginnen met bouwen, de twee hoofdonderdelen van onze stack opzetten: Lovable voor de frontend en WordPress voor de backend.

Stap 1: Maak een Lovable project

Ga naar lovable.dev en maak een gratis account aan. Zodra je op het dashboard bent, start je een nieuw project door een korte prompt in te voeren.

De gebruikersinterface van Lovable met een overzicht van een headless WordPress-websiteproject.
De chatinterface van Lovable.

De chat-interface geeft het gevoel alsof je met een teamgenoot praat. Je kunt op een natuurlijke manier typen, net als in een echt gesprek. Je kunt bijvoorbeeld beginnen met een eenvoudige vraag:

How do we start building a frontend with WordPress on the backend?

Lovable antwoordt met duidelijke aanwijzingen en loopt met je door de opties:

Building a React frontend with WordPress as a headless CMS is a solid approach.
You can use the built-in WordPress REST API or install WPGraphQL for more complex data queries.

Deze eerste uitwisseling zet de toon voor het proces. Het geeft een snel overzicht van wat er mogelijk is en helpt je begrijpen hoe WordPress zal integreren met je frontend.

Daarna kun je het idee verfijnen door de AI te vragen om het simpel te houden:

Let's keep it simple. We just want to build a demo blog site and have a page to serve as a dynamic style guide.

Lovable past zich meteen aan door een schone demosite te maken en een Style Guide pagina op te zetten die je later kunt gebruiken voor algemene ontwerpupdates.

Vanaf hier verloopt het gesprek op een natuurlijke manier. Jij en Lovable gaan heen en weer om details te verfijnen en te verduidelijken wat nodig is om verder te gaan. Op een gegeven moment kan Lovable je vragen om essentiële instellingsdetails, zoals:

1. Do you have a WordPress site URL? (e.g., https://yoursite.com)  
2. Is the WordPress REST API publicly accessible?  
3. What WordPress content should map to your blog? (posts, pages, or custom post types?)  
4. Are there custom fields you’d like to fetch? (e.g., read time or featured flag)

Zodra je deze informatie hebt verstrekt, kan Lovable automatisch de integratielogica genereren en je frontend verbinden met je WordPress backend.

Stap 2: Stel WordPress in

Voordat Lovable echte content kan ophalen, heb je een werkende WordPress site nodig als backend. Dit is waar al je berichten, pagina’s en media staan.

Voor een soepele installatie gebruik je een betrouwbare WordPress host zoals Kinsta, gebouwd op een krachtige cloud infrastructuur om ervoor te zorgen dat prestaties en uptime geen probleem zijn. Meld je aan bij Kinsta en maak een nieuwe WordPress site, en je krijgt automatisch een tijdelijk subdomein zoals:

https://your-site.kinsta.cloud/

Zodra je site is gemaakt, controleer je of de REST API openbaar beschikbaar is. Open een nieuw browsertabblad en bezoek:

https://your-site.kinsta.cloud/wp-json/wp/v2/posts

Als je een JSON feed ziet die berichtgegevens weergeeft, is je backend klaar.

Stap 3: Verbind WordPress met Lovable

Zodra je WordPress site live is en je REST API werkt, is het tijd om de backend te verbinden met je Lovable project. Hier komen de inhoud en het ontwerp eindelijk samen.

In de chat van Lovable kun je het eenvoudig vragen:

Ok, how do we connect your frontend to our WordPress CMS?

Lovable antwoordt met een duidelijk plan en legt uit wat er nodig is:

You’ll connect to your WordPress backend using its REST API.
What you’ll need:
1. WordPress REST API (built-in, available at yoursite.com/wp-json/wp/v2/posts)
2. A CORS plugin if your frontend is on a different domain
3. (Optional) ACF or custom fields for extra data

Het geeft je ook een overzicht van wat er aan beide kanten gebeurt:

  • Aan de kant van WordPress: zorg ervoor dat de REST API is ingeschakeld (meestal is dat standaard zo).
  • Aan de frontend: vervang alle statische bloggegevens door API calls naar WordPress, maak een service om de gegevens op te halen en handel het laden af.

Je ziet Lovable het netjes schetsen en soms zelfs een voorbeeld als dit laten zien:

const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: async () => {
    const response = await fetch('https://your-site.kinsta.cloud/wp-json/wp/v2/posts');
    return response.json();
  }
});

Vervolgens gebruikt Lovable, op jouw commando, de WordPress URL die je opgeeft en zet een frontend site op die je WordPress berichten weergeeft.

Voorbeeld van een headless WordPress-blog, aangedreven door Lovable’s frontendframework.
Voorbeeld van een headless WordPress blog.

Zo snel gaat dat. De integratie is live, de verbinding is geverifieerd en je headless site heeft nu een volledig werkende contentflow van WordPress naar Lovable.

Styling en ontwerpsysteem

Zodra je WordPress verbinding live is, kun je beginnen met het finetunen van de look en feel van de site. Op dit moment wordt alles wat je ziet gestyled door Tailwind CSS en de standaardinstellingen van de browser. Dat geeft je een schone basis, maar nu is het tijd om hem helemaal van jou te maken.

Je kunt beginnen door het rechtstreeks aan Lovable te vragen:

Is all styling currently provided by TailwindCSS and the User Agent?

Lovable legt uit:

Yes. All styling is currently provided by TailwindCSS (via index.css and tailwind.config.ts) and the User Agent's default styles. The App.css file exists but isn’t imported anywhere.

Met dat in gedachten kun je beginnen met het aanpassen van de structuur en navigatie van de site. Je zou bijvoorbeeld kunnen vragen:

Connect to all pages, posts, and media, and set up a header navigation as follows:
Home
Style Guide
Blog
    Trip To Santa Fe
    Hello World
Make the Home page the root of the site.

Lovable reageert door je routes te reorganiseren en je WordPress berichten dynamisch te koppelen onder de Blog dropdown. Navigatie werkt nu op verschillende pagina’s: Home, Blog en je dynamische Style Guide, die je hub wordt voor globale ontwerpwijzigingen.

De gebruikersinterface van de website aanpassen.
De gebruikersinterface van de website aanpassen.

Werken met de dynamische Style Guide

Op deze pagina definieer en beheer je de globale styling van je hele site. Elke verandering die je hier aanbrengt, werkt onmiddellijk alle pagina’s bij.

Je kunt beginnen met het instellen van een basiskleurenpalet en typografie:

Set page background color to #7B3F00.
Set all text color to #eee.
Heading 1 = 2rem
Heading 2 = 1.5rem
Heading 3 = 1.25rem
Heading 4 = 0.84375rem
All other text = 1rem

Lovable past snel het nieuwe ontwerpsysteem toe en geeft je site een warmbruine achtergrond, zachtgrijze tekst en een consistente letterhiërarchie.

Dynamische styleguide-pagina in Lovable met typografie, kleurenschema’s en componentvoorbeelden.
Dynamische stijlgids pagina.

Vanaf hier kun je je aanpak verder finetunen. Bijvoorbeeld:

Double the size of all headings.
Add 10% left and right margin to the page.
Create a 2x2 image gallery with 20px spacing, rounded corners (20px radius), and a 2px solid white border.

Lovable past de layout in realtime aan, en je ziet meteen de vorm van je afbeeldingsgalerij.

Afbeeldingen toevoegen aan een headless WordPress project.
Afbeeldingen toevoegen aan een headless WordPress project.

Globale lettertype- en spacingsaanpassingen

Je kunt je ontwerp een stap verder brengen door consistente lettertype- en spacingsregels toe te passen voor de hele site:

Align the page title to the left.
Use the Cowboy (Rye) font for all headings and Roboto for all other text.
Double the line height for all paragraphs and quote elements.
Add 5% top/bottom and 10% left/right margins to the quote block.

Lovable werkt je typografie, regelhoogtes en marges bij.

Pas de layout van een pagina visueel aan.
Pas de layout van een pagina visueel aan.

Als er iets niet klopt, bijvoorbeeld als de titel niet echt links uitgelijnd is, kun je Lovable vragen dit te controleren:

The page title isn’t aligned left. Why?

En het zal het uitleggen:

The container has mx-auto, which centers it. I’ll remove that for true left alignment.

Globale knopstijlen definiëren

Vervolgens kun je je knoppen visueel consistent maken. Vraag Lovable in je Dynamic Style Guide om de drie knoppen met duidelijke hover-status te maken:

1. Buttons should be rectangular.
2. Use a black background with white text, and invert on hover.
3. The medium button is 125% the width of the small one; the large is 150%.
4. Add 20px border radius.

Als je de knoppen niet meteen ziet, kan Lovable een showcase toevoegen om ze te bekijken. Zodra ze zichtbaar zijn, worden je aangepaste stijlen toegepast.

Hier is een voorbeeld van de resulterende CSS die je ook in WordPress kunt gebruiken:

.wp-button {
  background: #000;
  color: #fff;
  border-radius: 20px;
  padding: 0.5rem 0.9375rem;
  transition: all 0.3s ease;
}

.wp-button:hover {
  background: #fff;
  color: #000;
}

.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }

Lovable legt ook uit hoe je deze stijlen in je WordPress thema kunt brengen door de variabelen te kopiëren naar de CSS van je thema en de .wp-button classes toe te passen binnen de blokeditor of templates.

Custom knoppen op een webpagina toevoegen en stylen.
Custom knoppen op een webpagina toevoegen en stylen.

Deployment

Nu je headless site is aangesloten en gestyled, is de laatste stap de deployment, waarbij je hem live op het web zet.

De codebase van Lovable is overdraagbaar, wat betekent dat je je frontend naar elk Git-gebaseerd platform kunt pushen en van daaruit kunt deployen. In deze handleiding gebruiken we Sevalla, een platform gebouwd door het Kinsta-team dat krachtige cloudhosting combineert met ontwikkelaarsvriendelijke automatisering.

Sevalla biedt gratis statische site hosting, met wereldwijde edge delivery en auto-deploys op Git push. Zodra je code is gesynchroniseerd met GitHub, GitLab of Bitbucket, kun je je repository met slechts een paar klikken verbinden met Sevalla.

Zo ga je live:

  1. Ga in je Sevalla dashboard naar Statische sites en klik op Sites toevoegen.
  2. Kies je Git provider en repository.
  3. Bevestig je standaard branch en schakel automatische deployment bij commit in.
  4. Sevalla detecteert je framework automatisch (React + Vite in dit geval).
  5. Klik op Site maken en je build begint meteen.

Binnen een paar minuten is je site beschikbaar met een gratis tijdelijk domein.

Handige tips en andere opmerkingen

Terwijl je je headless build uitvoert met Lovable, vallen een paar dingen op die het proces soepeler en begrijpelijker maken.

  • Gratis en betaalde pakketten: Lovable biedt beide. Het gratis pakket geeft je veel ruimte om te experimenteren, terwijl de betaalde niveaus langere promptsessies en snellere verwerking bieden.
  • Je hoeft niet vaak te verversen: In de meeste gevallen wordt de interface van Lovable automatisch bijgewerkt wanneer je inhoud wijzigt of publiceert vanuit WordPress. De live synchronisatie is snel en betrouwbaar.
  • Directe bestandsbewerking: Net als GitHub kun je met Lovable bestanden direct in het platform bewerken. Handig voor snelle aanpassingen of het debuggen van kleine problemen zonder over te schakelen naar een externe editor.
  • REST API vs. WPGraphQL: Voor de meeste eenvoudige projecten is de ingebouwde WordPress REST API voldoende. Als je echter complexere queries of relaties nodig hebt, biedt de WPGraphQL plugin een krachtigere en meer gestructureerde optie.
  • Veel voorkomende installatieproblemen: Als je verbindingsproblemen tegenkomt, hebben die vaak te maken met CORS (Cross-Origin Resource Sharing) of REST API toegangsrechten. De AI Agent van Lovable kan je hier snel doorheen helpen.
  • Cachingsoverwegingen: Omdat je frontend statisch is, is het mogelijk dat wijzigingen niet meteen zichtbaar zijn tijdens de ontwikkeling. Wis je cache of herbouw wanneer je grote updates uitvoert.

Samenvatting

Headless WordPress opent een ruimte waar ontwerp en ontwikkeling elkaar bijna onbeperkt ontmoeten. Door WordPress als betrouwbare content backend te combineren met Lovable’s AI-gestuurde frontend creatie, kun je sneller dan ooit van concept naar live.

Terwijl AI de workflows verder vorm blijft geven, ontpopt headless WordPress zich als een flexibele, toekomstbestendige benadering voor makers die op zoek zijn naar snelheid, controle en vrijheid in gelijke mate.

Als je klaar bent om te ontdekken wat headless WordPress kan doen voor je volgende project, begin dan met een hostingplatform dat is gebouwd voor prestaties en betrouwbaarheid. Ontdek de hostingpakketten van Kinsta, de ideale basis voor WordPress, headless of hybride builds.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.