Je wilt de kleur van een knop op je WordPress-site aanpassen, maar zodra je de code opent, zie je een muur aan tekst die nergens op lijkt te slaan. Dus laat je het maar zitten. Herkenbaar. Cursor is een code-editor met een ingebouwde AI-assistent waarbij je in gewoon Nederlands kunt beschrijven wat je wilt veranderen, en die de bijbehorende code voor je schrijft. Je hoeft niet te weten wat CSS of PHP inhoudt om er mee aan de slag te gaan. In dit artikel lees je stap voor stap hoe je dat in de praktijk doet.

Wat je nodig hebt vóór je begint

Voordat je iets doet, controleer je drie dingen:

  • Toegang tot je WordPress-installatie, bij voorkeur via een lokale omgeving zoals Local by WP Engine of via FTP naar je hostingserver.
  • Een child theme dat actief is. Pas nooit je hoofdthema rechtstreeks aan, want bij een thema-update verdwijnt alles. Een child theme maak je aan via de WordPress-adminpaneel of via een plugin als Child Theme Configurator.
  • Cursor geïnstalleerd op je computer. Download het gratis via cursor.sh. Het werkt op Windows en Mac.

Heb je alle drie? Dan gaan we verder.

Cursor verbinden met je themabestanden

Open Cursor en klik op “Open Folder”. Navigeer naar de map van je child theme. Als je met Local werkt, vind je die ergens in de Local-sitemap onder app/public/wp-content/themes/jouw-child-theme/. Gebruik je FTP via bijvoorbeeld FileZilla, download dan eerst de hele child-thememap naar je computer, werk lokaal, en upload daarna de aangepaste bestanden terug.

Zodra de map open is, zie je aan de linkerkant de bestandenlijst: style.cssfunctions.phpen eventueel templatebestanden. Dit is je werkgebied.

Je eerste instructie formuleren

Het slimste van Cursor is de chatfunctie. Open die met Ctrl+L (of Cmd+L op Mac). Hier typ je gewoon wat je wilt, alsof je het aan iemand uitlegt.

Een goede prompt is specifiek en beschrijft het resultaat. Bijvoorbeeld: “Maak de koptekst op de homepagina rood. De tekst staat in een h1-tag.”

Wat je niet moet doen: te vaag zijn. “Maak het mooier” geeft niets bruikbaars terug. Zeg liever wat je ziet, wat je wilt zien, en waar het staat op de pagina.

De gegenereerde code begrijpen zonder te programmeren

Cursor geeft je een stukje code terug. Lees het even door, ook als je het niet volledig snapt. Controleer altijd drie dingen voordat je iets kopieert:

  • Staat er vermeld in welk bestand het hoort? Cursor zegt meestal “voeg dit toe aan style.css” of “plaats dit in functions.php”.
  • Is het een toevoeging of een vervanging? Bij een toevoeging plak je onderaan. Bij een vervanging zoek je de bestaande regel op.
  • Ziet de code er logisch uit? CSS begint met een selector en accolades, PHP begint met een functienaam. Als je iets ziet wat er niet bij past, vraag dan via de chat: “Kun je uitleggen wat deze regel doet?”

Aanpassing 1: lettertypekleur wijzigen

Stel, je wilt de kleur van de h1-koptekst op je homepagina veranderen naar donkerblauw. Je prompt in Cursor:

“Schrijf CSS om de h1-koptekst op de homepagina de kleur #1a3a5c te geven.”

Cursor geeft je zoiets terug:

h1 {
 color: #1a3a5c;
}

Open style.css in je child theme, scroll naar het einde, en plak de code daar. Sla op, ververs je browser en controleer het resultaat. Werkt het niet meteen? Dan is de selector mogelijk te algemeen. Vraag Cursor: “De kleur verandert niet, hoe maak ik deze CSS specifieker?” en geef eventueel de HTML-structuur van het element mee.

Aanpassing 2: een knop verplaatsen

Dit is iets ingewikkelder, want knoppen staan in HTML-bestanden of templatebestanden. Vraag Cursor: “Ik heb een knop met de tekst ‘Nu bestellen’. In welk soort bestand staat die waarschijnlijk, en hoe herken ik de juiste plek?”

Cursor legt uit dat je moet zoeken in een templatebestand zoals page.phpfront-page.php of een blokpatroon. Je gebruikt de zoekfunctie in Cursor (Ctrl+Shift+F) om te zoeken op de knoptekst of een klassenaam die je in de browser-inspector hebt gevonden. Eenmaal gevonden, beschrijf je aan Cursor waar de knop nu staat en waar je hem wilt hebben. De AI schrijft de aangepaste HTML-regel voor je uit.

Aanpassing 3: een sectie verbergen op mobiel

Dit lost Cursor op met een media query. Je prompt: “Ik wil dat de sectie met de klasse.promo-banner niet zichtbaar is op schermen kleiner dan 768 pixels.”

Je krijgt zoiets:

@media (max-width: 767px) {
.promo-banner {
 display: none;
 }
}

Het verschil met visibility: hidden: dat verbergt het element visueel, maar de ruimte blijft bezet. Met display: none verdwijnt het element volledig, inclusief de ruimte. Voor mobiele opmaak wil je vrijwel altijd display: none. Cursor legt dit ook uit als je ernaar vraagt.

Testen zonder je live site te beschadigen

Voordat je iets naar je echte site stuurt, test je lokaal of op een stagingomgeving. Als je Local gebruikt, test je gewoon in je lokale browser. Gebruik je een live server, dan heeft vrijwel elke hoster een stagingknop in het dashboard. Druk die aan, maak je wijzigingen daar, en push pas door naar live als alles klopt.

Een snelle check: open je browser, druk op F12, ga naar de “Console”-tab en kijk of er rode foutmeldingen staan. Staan die er, vraag dan aan Cursor wat ze betekenen.

Als Cursor het mis heeft

Het gebeurt. Cursor wijst soms het verkeerde bestand aan of genereert een stukje code dat niet werkt. Raak niet in paniek. Schrijf gewoon een vervolgprompt zoals: “De aanpassing heeft geen effect. De selector h1 klopt misschien niet. Hoe vind ik de exacte HTML-klasse van mijn koptekst via de browser-inspector?”

Cursor stuurt je dan naar de F12-inspector, waar je met de aanwijzer op elk element kunt klikken om de exacte klassenamen te zien. Kopieer die en geef ze mee in je volgende prompt. Zo corrigeer je de AI stap voor stap.

Je wijzigingen veiligstellen

Alles werkt, mooi. Nu zorgen dat een thema-update of een ongelukje je werk niet wist. Twee opties:

  • Gebruik een plugin zoals UpdraftPlus om automatisch dagelijkse backups te maken van je volledige site, inclusief het child theme.
  • Ben je iets avontuurlijker, initialiseer dan Git in je child-thememap via de Cursor-terminal (git initgit add.git commit -m "eerste aanpassingen"). Zo kun je altijd terug naar een werkende versie.

Omdat je een child theme gebruikt, zijn je aanpassingen sowieso losgekoppeld van het hoofdthema. Updates van het hoofdthema overschrijven jouw style.css en functions.php dus nooit.

Cursor neemt het schrijven van de code over, maar jij bepaalt wat er verandert. Hoe specifieker je beschrijft wat je wilt, hoe bruikbaarder de output. Test aanpassingen altijd eerst op een lokale of stagingomgeving voordat je ze live zet, zodat je nooit met een kapotte productiesite zit. Begin met iets kleins, een kleur, een marge, een lettertypegrootte, en werk van daaruit verder. Meer heb je niet nodig om zelf aan de slag te gaan.