Nu AI zo prominent aanwezig is in onze wereld, leek het ons interessant om te onderzoeken hoe ontwikkelaars deze tools kunnen gebruiken om WordPress plugins te maken of te verbeteren. Dit bericht neemt je ook mee door een stap-voor-stap proces van het bouwen van een WordPress plug-in met behulp van de populaire AI codeerassistent – Cursor.

Hoewel AI een betrouwbare assistent kan zijn, is het geen volledige vervanging voor menselijke expertise. Een ervaren ontwikkelaar moet nog steeds de uitvoer beoordelen, bugs opsporen, de prestaties optimaliseren en ervoor zorgen dat de code veilig en schaalbaar is.

Dat gezegd hebbende, we bevinden ons duidelijk in het tijdperk van programmeren in natuurlijke taal. Je zult waarschijnlijk niet een heel CMS opstarten met één enkele prompt – en verwacht ook geen uitgebreide page builder – maar AI kan helpen om veel delen van het proces te versnellen. Zelfs enthousiastelingen die alleen de basics van coderen onder de knie hebben kunnen er hun voordeel mee doen, terwijl geavanceerde ontwikkelaars slimmere, snellere manieren vinden om te bouwen.

Overzicht AI codeertools

Welke tool je ook gebruikt, online of desktop, de meeste AI codegeneratoren hebben het volgende gemeen:

  • Ze hebben enorme hoeveelheden gegevens tot zich genomen en zijn getraind op code repositories.
  • Ze bieden autocomplete en intelligente codesuggesties die tijd besparen.
  • Ze zijn bedreven in veel programmeertalen.
  • Ze zijn contextbewust, wat betekent dat ze de structuur van je codebase begrijpen.
  • Ze interpreteren natuurlijke taalaanwijzingen, zelfs met kleine typefouten.
  • Bij sommige kun je schakelen tussen verschillende grote taalmodellen (LLM’s).
  • De meeste ondersteunen plugin-systemen of uitbreidingen.
  • Veel bevatten tools voor debuggen en refactoring.

Wie zijn nu de belangrijkste spelers op het gebied van AI-codering?

  1. ChatGPT: De meest herkenbare naam in AI op dit moment. ChatGPT hoeft niet ingesteld te worden en kan code genereren, uitleggen wat het doet en reageren op vervolgvragen – allemaal op één plek.
  2. GitHub Copilot: Copilot, gebouwd door GitHub en OpenAI, integreert direct in je favoriete IDE’s en suggereert code in real-time terwijl je typt. Het is als pair programming met een AI dev.
  3. Grok: Net als ChatGPT en Claude is Grok een tool van xAI die beschikbaar is voor X gebruikers.
  4. Gemini: Dit is Google’s familie van universele AI tools, vergelijkbaar met ChatGPT.
  5. Windsurf: Dit is een IDE die gespecialiseerd is in het anticiperen op de behoeften van een ontwikkelaar.

Een paar woorden over het gebruik van Cursor AI

Om onze plugin te bouwen, hebben we ervoor gekozen om Cursor AI te gebruiken, een opkomende favoriet onder ontwikkelaars. Cursor AI is een fork van de VSCode IDE, daarom ziet het er vertrouwd uit en voelt het vertrouwd aan. Omdat het flexibel is, kunnen je VSCode instellingen en voorkeuren worden geïmporteerd naar Cursor AI.

Omdat het een volledig open source IDE is, zijn er veel uitbreidingen beschikbaar en zijn er veel manieren om toegang te krijgen tot codedocumentatie.

Cursor’s Chat heeft meerdere modi, elk geoptimaliseerd voor een ander soort taak.

Cursor chatmodus.
Cursor chatmodus.

Je kunt ertussen wisselen met de moduskiezer (Cmd+.) of via sneltoetsen:

  • Vraagmodus: Het beste voor snelle vragen, uitleg of het plannen van functies. Je kunt bijvoorbeeld typen “Welke programmeertaal wordt gebruikt in deze codebase?” en een contextueel antwoord krijgen op basis van je geopende bestanden. Je hebt toegang met Cmd+L (Mac) of Ctrl+L (Windows/Linux).
  • Agentmodus: Ideaal als je wilt dat Cursor door je hele codebase redeneert en bredere wijzigingen aanbrengt, zoals bestanden genereren, een nieuwe functie implementeren of refactoren. Je kunt iets zeggen als “Maak een documentatiebestand gebaseerd op wat er in /plugins/contentwriter staat. ” Activeer deze modus met Cmd+I of Ctrl+I.
  • Handmatige modus: Gebruik dit als je meer controle wilt en de AI alleen binnen een specifiek bestand of fragment hoeft te werken. Je kunt bijvoorbeeld vragen om “Refactor theme.json met componenten die je kan vinden in ../docs.” Deze modus wordt automatisch geactiveerd als je direct begint met bewerken, of via het Command palet.

Workflow plugin opstarten

Als je alleen ChatGPT hebt gebruikt om je code te schrijven, mis je misschien wat AI code assistentie kan doen. Het is waar dat algemene AI tools een werkende WordPress plugin kunnen testen, maar het is zeker niet de meest efficiënte manier om code te testen of te debuggen.

Dat is waar tools als Cursor AI om de hoek komen kijken – ze combineren AI met een volledig uitgeruste IDE om je door een meer gestructureerde, op ontwikkelaars gerichte workflow te leiden.

Een goede manier om te beginnen met het werken met AI codeerassistenten is door ze iets te laten doen waar je al bekend mee bent. Kies een klein, goed afgebakend project. Spring niet meteen in complexe functies of grootschalige pluginontwikkeling. En verwacht zeker niet dat de AI je hele plugin bouwt op basis van een enkele vage vraag. Net als bij elke andere ontwikkelingstaak, begin je met het opschrijven van je doelstellingen in duidelijke taal.

Voor deze walkthrough maken we een plugin genaamd Custom Writer die een nieuwe gebruikersrol registreert in WordPress. Deze rol kan berichten maken en bewerken, maar mag niets verwijderen of toegang hebben tot andere berichttypes.

Stap 1: De plugins map openen

Start Cursor en gebruik File > Open map om naar je /wp-content/plugins map te navigeren. Dit vormt de basis voor het bouwen van je plugin.

Stap 2: Een nieuwe chatsessie starten

Druk op Cmd + Shift + L (of Ctrl + Shift + L op Windows) om een nieuwe chat te beginnen.

Schakel over naar de Ask mode door te drukken op Cmd + L / Ctrl + L zodat we kunnen beginnen met een planningsprompt. In deze modus zal Cursor je helpen om je idee te beredeneren zonder meteen in code te springen.

Boven de hoofdinvoer van de prompt zie je een veld met het label Add Context. Hier kun je je doel volledig beschrijven. Wees specifiek, zelfs als je spelling niet perfect is – Cursor is vergevingsgezind.

Dit is wat we intypen:

Let op het sleutelwoord @WordPress – dit vertelt Cursor om te verwijzen naar de officiële WordPress documentatie. Het is een van de eenvoudigste manieren om ervoor te zorgen dat je plugin de best practices volgt.

Cursor Ask mode gebruiken.
Cursor Ask mode gebruiken.

Stap 3: De markdown instructies bekijken

Zodra je op Send drukt, antwoordt Cursor met een gedetailleerd markdown document. Hierin staat alles wat je plugin moet doen – van het instellen van hooks tot het opruimen na de-installatie.

Hier is een momentopname van wat Cursor bevat:

  • Details plugin header (naam, versie, licentie)
  • Codestructuur (een enkel .php bestand in een aangepaste plugin map)
  • Rol aanmaken met add_role()
  • Specifieke mogelijkheden (edit_posts, publish_posts, enz.)
  • Hooks voor activeren, deactiveren en verwijderen
  • Beveiliging, prestatie en test aanbevelingen

Je kunt de instructies aanpassen voordat je verder gaat, maar wij zijn er tevreden mee zoals ze zijn.

Stap 4: Overschakelen naar Agent modus en de plugin bouwen

Nu is het tijd om de code te genereren.

Schakel over naar Agent mode door op Cmd + Shift + I (of Ctrl + Shift + I) te drukken. Dit geeft Cursor toestemming om in je codebase te werken en taken met meerdere stappen uit te voeren.

Druk op Enter en je ziet de knop Run Command verschijnen.

Cursor Run command.
Cursor Run command.

Klik op de Run Command en Cursor maakt je plugin. Je zou een nieuwe map moeten zien (bijv. custom-writer-role) met een enkel .php bestand erin.

Map en codebestanden gegenereerd door Cursor.
Map en codebestanden gegenereerd door Cursor.

Stap 5: Het bestand controleren en accepteren

Open het bestand dat Cursor heeft gegenereerd. Je kunt hier wijzigingen aanbrengen, zoals het bijwerken van de plugin-auteur of het verfijnen van het commentaar in de regel.

Als je tevreden bent, klik je op Accept File. Maak je geen zorgen, je kunt het later altijd nog bewerken. Hiermee bevestig je alleen dat het bestand deel moet uitmaken van je codebase.

Stap 6: De plugin activeren in WordPress

Ga naar je WordPress Admin dashboard. Zoek onder Plugins je nieuwe plugin en activeer hem.

WordPress plugin gemaakt door Cursor activeren.
WordPress plugin gemaakt door Cursor activeren.

Als alles correct is gegenereerd, zie je een succesbericht en is de plugin live.

Stap 7: De nieuwe rol testen

Maak een nieuwe gebruiker aan en wijs hem de Custom Writer rol toe. Je test zou moeten aangeven:

  • Nieuwe gebruikersrol succesvol aangemaakt
  • Alleen berichten kunnen worden aangemaakt.
  • Berichten kunnen worden bewerkt en bekeken, maar niet verwijderd.

Stap 8: UI fouten ontdekken en oplossen

Eén ding dat je zal opvallen is dat de link Quick Edit nog steeds beschikbaar is in de lijst met berichten. Hoewel je hiermee geen berichten kunt verwijderen, hebben we hier niet om gevraagd en het kan verwarrend zijn voor gebruikers.

Debuggen van de plugin.
Debuggen van de plugin.

Ga terug naar Cursor en start een nieuwe vraag om hulp bij het verwijderen van Quick Edit.

Tijdens het maken van de demo voor deze handleiding, hebben we een reeks vragen gesteld aan Cursor om verschillende benaderingen te gebruiken om Quick Edit te verwijderen. Op een gegeven moment zagen we verwijzingen naar “user_switch”, waardoor we ons afvroegen of er een conflict was met de Switch User Role plugin. (Dit was de enige plugin die we gebruikten naast onze plugin)

Cursor vertelde ons dat er een conflict zou zijn nadat we het hadden geattendeerd op dit potentiële probleem. Er volgde nog een ronde met vragen. Toen ontdekten we dat de nieuwe gebruiker niet kon inloggen omdat er een hoger toestemmingsniveau nodig was.

Een tweede ronde van vragen begon zonder succes. Cursor verwijderde Quick Edit, maar de bewerkingsfunctie werd ook verwijderd. Het ging dus niet helemaal soepel en vroegen Cursor om een samenvatting van waar we waren om er zeker van te zijn dat we wisten wat het begreep. Op een gegeven moment vroegen we: “What do you think?”

Uiteindelijk vond Cursor een manier om alle problemen op te lossen en gaf ons een samenvatting van de wijzigingen.

Stap 9: Observeer extra gedrag

Tijdens het testen merkten we ook het volgende op:

  • De Media Library is ontoegankelijk, ook al hebben we dat niet vermeld. Dit is een geheugensteuntje: als je niet expliciet om een mogelijkheid vraagt, zal de AI deze waarschijnlijk niet opnemen.
  • In de samenvatting van Cursor staat dat het “werkt voor berichten en pagina’s”, maar de plugin blokkeert de toegang tot pagina’s juist. De AI heeft dus iets te veel uitgelegd, maar het gedrag is correct.

Stap 10: Blijf testen en itereren

Vanaf hier kun je aanvullende plugins installeren, compatibiliteit testen en je rol verfijnen als dat nodig is. Als er iets kapot gaat of zich niet gedraagt zoals verwacht, ga dan terug naar Cursor met vervolgvragen.

Je zult merken dat je dit vaak doet – vervolgvragen stellen, instructies anders formuleren of zelfs gewoon vragen “Wat denk je?” om het perspectief van Cursor te krijgen.

Dat is waar Cursor echt uitblinkt: de feedbacklus is snel en de assistent verbetert met elke iteratie.

Gooi voorzichtigheid niet in de wind

Het is niet omdat je een AI kunt vragen om een plugin te genereren dat je dat ook moet doen – tenminste, niet zonder er eerst goed over na te denken.

Neem de tijd om te definiëren wat je plugin zou moeten doen, voordat je het vraagt. Denk na over het doel, de vereiste functies en mogelijke afhankelijkheden. Vraag jezelf af: kan deze plugin conflicteren met belangrijke extensies zoals WooCommerce? Als het antwoord misschien is, vermeld dat dan in je prompt.

Hoe meer context je de AI geeft, hoe beter je resultaten. Wees specifiek. Beschrijf je doelen duidelijk. Hou je niet in.

AI kan magisch aanvoelen, maar verantwoord bouwen is nog steeds belangrijk. Houd dezelfde pijlers in gedachten waarmee je rekening houdt als je met de hand codeert:

  • Beveiliging – zuiver invoer, controleer mogelijkheden, volg best practices
  • Prestaties – vermijd overbodige queries, houd de logica strak
  • Toegankelijkheid – houd rekening met gebruikersrollen, UI-elementen en inclusieve interactie
  • Testen – edge cases uitproberen, plugins mixen en functionaliteit valideren
  • Implementatie – bereid je voor op versiebeheer, rollbacks en schaalbaarheid
  • Refactoring – herzie je code, niet slechts één keer, maar regelmatig

Samenvatting

Het landschap van geassisteerde code verandert met de minuut. Dit doet denken aan de begindagen van zoekmachines, toen er nog talloze mogelijkheden waren. Uiteindelijk overleefden er maar een paar. Dit is wat er uiteindelijk ook hier kan gebeuren, hoewel open source ons in een andere richting kan leiden.

We stellen voor dat je een aantal AI programma’s onderzoekt aan de hand van dezelfde initiële vraag en vervolgens de coderingstrajecten en resultaten vergelijkt. Sta open voor de mogelijkheid dat je van voorkeursapplicatie moet switchen naarmate het landschap zich blijft ontwikkelen.

Naarmate AI tools zich ontwikkelen, moet je workflow dat ook doen – en dat begint met de juiste omgeving.

Kinsta’s ontwikkelaarvriendelijke WordPress Hosting biedt je de snelheid, controle en tools die je nodig hebt om met vertrouwen te bouwen, testen en lanceren. Of je nu lokaal werkt met DevKinsta of uitrolt naar een testomgeving, wij helpen je.

Ontdek de WordPress hostingpakketten van Kinsta en begin met slimmer bouwen.

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.