Kan je een eigen WordPress thema vibecoden?

Een experiment wat al een aantal weken in de maak is, was om een eigen WordPress thema te vibecoden met AI. Er zijn hier een hoop opties en tools in mogelijk, met een hoop wisselende resultaten. Na een hoop over en weer zijn we hierin geslaagd, en hebben we zelf ook gezien dat dit mogelijk is. En zeker een optie kan vormen voor de freelancer of blogger die het liefst iets customs heeft voor zijn eigen website, maar niet het budget heeft om hierin te investeren.

Laten we een kijkje nemen naar alle tips en trucs die wij hebben geleerd in dit experiment, en hoe jij dit zelf kunt gaan reproduceren. 

De Haken en Ogen

Is dit voor iedereen de oplossing waar gelijk naar overschakeld dient te worden? Nee, naar onze mening niet. 

Er zitten namelijk een aantal haken en ogen aan het hele proces, en je dient hier wel rekening te houden met een aantal (belangrijke!) zaken. 

Veiligheid

De veiligheid van het WordPress thema wat je gaat vibecoden zal de nummer 1 prioriteit aannemen, zoals eigenlijk met elk WordPress thema. De Core van WordPress wordt gecontroleerd en gewerkt door duizenden programmeurs. De plugins en thema’s zijn echter vaak kleine teams die een wisselend succes hierin hebben. 

Het is met een eigen gevibecoded thema jouw verantwoordelijkheid om te controleren of dit veilig is om te gebruiken. En als je dit daadwerkelijk live gaat zetten op je website, dan is het raadzaam om regelmatig back-ups te maken. Zodat mocht er wat fout gaan hierin, je snel weer een schone website hebt. Geef ook een prompt expliciet aan de AI die je besluit om te gebruiken welke stappen en verbeteringen er nog gebracht kunnen worden aan de veiligheid van het thema. 

Update proces

Sinds je het thema zelf in de hand hebt, deels, zal je ook zelf verantwoordelijk zijn voor het update proces. Code staat nooit stil, en hier is regelmatig onderhoud voor noodzakelijk. Denk bijvoorbeeld hier aan bugs die pas naar boven komen zodra een PHP versie bijgewerkt wordt. Of een update aan een browser of werkwijze jouw website “breekt”. En uiteraard als laatste ook WordPress zelf wat bijgewerkt wordt, en enige plugins ook samen dienen te werken. 

Je zal zelf dus een keer in de zoveel tijd, bijvoorbeeld elk halfjaar op zijn minst, alles na dienen te lopen of dit Thema nog gebruikmaakt van de laatste standaarden en beveiliging. Hoe simpeler en barebones je het thema houdt, des te beter je tegen grote wijzigingen gewapend zijn.

Voor welke use case kan dit wat zijn? 

Het is een minder goed idee om gelijk een complexe webshop op te zetten met vibecoden. Naast de veiligheid vragen die hierbij komen, wil je ook een noodlijn beschikbaar hebben in de vorm van support mocht er hier wat mis in gaan. Dat heb je niet als je dit zelf in de hand hebt. 

In de volgende use cases kan dit echter wel geschikt zijn: 

Als freelancer die een portfolio website wilt opzetten – Een portfolio wat geheel naar je eigen wensen is afgestemd. En zo beter overeenkomt dan bijvoorbeeld een startertemplate of kant en klaar thema van derden. 

Als schrijver of auteur – Een online aanwezigheid waarin je laatste werk toont en mensen aanmoedigt om je boeken in huis te halen. 

Blogger – Blogs zijn nog steeds een populaire creatieve outlet voor velen, en je kan hierin alles delen over je hobby of passie. Met een eigen design voor je website. 

Online visitekaartje van je bedrijf of startup – Denk hier aan wie je bent, waar je bent, wat je levert, etc. 

Je zal hier in de meeste gevallen wel een stukje langer mee bezig zijn dan een kant en klaar thema zoals die van bijvoorbeeld Astra, die we in het verleden een hoop behandeld hebben. Maar uiteindelijk heb je wel alles volledig naar eigen wens. En zit je verder niet vast aan een betaald thema voor alle mogelijkheden. 

Welke AI kan je hiervoor gebruiken?

Er zijn een hoop partijen die je kan gaan gebruiken, waar inmiddels al vast ook eigen voorkeur aan verbonden is. In de beginjaren van AI waarin we nu staan zijn er al een groot aantal tools opgesprongen. We raden aan om bij de grote partijen te blijven, zodat je (iets) zekerder weet dat de AI er over 1 jaar nog steeds voor je klaarstaat. Dit betekend bijvoorbeeld: 

ChatGPT
Claude
Gemini

Maak voor je vibecode Thema een apart project aan, en zorg ervoor dat je deze vastzet in je taakbalk. Je zal hier nog vaak naar terug dienen te keren in de meeste gevallen om elke bug en vraag glad te strijken. Wij hebben in deze alle drie deze partijen uitgetest, maar zijn geland op de lokale versie van Claude om dit uiteindelijk succesvol te maken. 

Naar mijn idee blijkt Claude ook beter om te gaan met de exacte vragen en eisen, en maakt er geen probleem van om altijd een complete zip file aan te leveren, iets waar de andere opties soms nog moeilijk over kunnen doen. Claude heeft ook een focus gelegd op het coderen in zijn algehele visie. En sluit hier dus vaak beter in aan. 

Mocht je een andere tool liever gebruiken dan ben je hier uiteraard vrij in, zoals Lovable is ook populair, maar hebben wij nog niet uitgetest. 

Het ontwerpen van het WordPress Thema

Om een kijkje te nemen naar ons voorbeeld thema waar wij mee bezig zijn geweest:  https://schaats.mijnwordpressdemo.nl/ 

Het is verstandig om voordat je gelijk code laat generen om een kladblokje even te openen met de gehele eerste prompt hier even in. Om een voorbeeld te noemen voor een eerste prompt: 

Bedenk wat voor uitstraling je wilt, bijvoorbeeld een focus op de leesbaarheid van de content. Een mooie carrousel voor je afbeeldingen, of juist een focus op je dienstverlening in een mooie one page layout. Je kleurenpallet, de uitstraling, enige content wat je al gemaakt hebt, etc. 

-> Wat is voor jouw belangrijk? 

Begin hierna met de eerste prompt waarin je dit allemaal aangeeft, en vraag om een opzet hierin. Er zal dan door middel van een afbeelding getoond worden in welke richting dit heen gaat. En je kan dan al gauw zien en bespreken met de AI (het hele idee achter vibecoden) wat je graag anders wilt zien, of wat hier juist goed aan is. Zie ook de bovenstaande afbeelding die gegeneerd is na het vibecoden van het thema zelf, en hoe je dit zelf ook kunt gaan inzetten. 

Een wijziging die ik er specifiek in wilde, was het gebruik van de WordPress Customizer, in plaats van de nieuwe blok editor. Omdat dit mijn eigen voorkeur heeft. Dat is gelijk ook voorbeeld van een groot pluspunt hierin, je bent niet meer aan banden gelegd. 

We hopen dat je geïnspireerd raakt door deze blog post, en als je al een keer met het idee hebt geworsteld, om het dan zeker een keer uit te proberen. Zet het niet gelijk live op je productiewebsite. Maar maak bijvoorbeeld even een kopie van je WordPress website op een subdomein om hier te experimenteren naar hartenlust. Subdomeinen zijn eenvoudig aan te maken binnen de Linux webhosting van MijnHostingPartner.nl, probeer het gelijk uit!