Je hebt een mooie WordPress-website gemaakt en bijna alles ziet eruit zoals je wilt. Alleen dat ene detail zou je wel anders willen. Of net dat extra element op je website dat precies niet kan met jouw WordPress theme.
Of misschien wil je wel:
- een knop net een andere kleur geven;
- meer ruimte onder een titel;
- iets alleen op de mobiel verbergen;
- een element smaller maken;
- een WooCommerce-functie aanpassen;
- een extra functie aan WordPress toevoegen.
Soms kun je dat gewoon via je theme of pagebuilder instellen. Maar lang niet altijd. En dan kom je al snel uit bij CSS, HTML, PHP of soms JavaScript.
Vroeger zocht ik voor zulke aanpassingen vaak via Google naar een stukje code. Tegenwoordig gebruik ik daar voornamelijk ChatGPT voor.
Ik leg precies uit wat ik wil veranderen, geef waar nodig de bestaande code mee en laat ChatGPT een voorstel maken. Dat scheelt ontzettend veel zoekwerk kan ik je vertellen.
Maar: code die ChatGPT maakt moet je niet blind op je website plakken.
Het is handig als je een beetje weet:
- welk soort code je nodig hebt;
- waar die code thuishoort;
- wat je beter niet rechtstreeks aanpast;
- hoe je controleert of de code veilig is.
In dit artikel ga ik je precies dat uitleggen. Hoe pas je je website aan met code en hoe laat je ChatGPT je daarmee helpen? Lees het hier.
Moet je tegenwoordig nog leren programmeren om WordPress aan te passen?
Wil je kleine dingen aanpassen op je website? Dan hoef je daar tegenwoordig niet meer voor te leren programmeren.
Met ChatGPT kun je bijvoorbeeld vragen: ‘Ik gebruik WordPress met het theme Impreza. Ik wil dat deze knop op mobiel over de volledige breedte staat. Kun je hiervoor CSS schrijven?’.
Of: ‘Ik gebruik WooCommerce. Ik wil op productpagina’s een tekst onder de prijs tonen, maar alleen in categorie X. Kun je hiervoor PHP schrijven?’.
Dat maakt het gebruik van code op je website veel toegankelijker.
Maar ChatGPT kan alleen goede code maken als je voldoende informatie geeft. En vooral bij PHP is het belangrijk dat je begrijpt dat verkeerde code je website kan breken.
Je hoeft dus geen programmeur meer te worden om kleine elementen op je website met code aan te passen, maar een beetje weten over het wat en hoe is wel verstandig. En heel grote aanpassingen of extra functies zou ik sowieso uitbesteden als je er niet in thuis bent.
CSS, HTML en PHP: wat is het verschil?
Als je met code aan de slag gaat, is het wel handig om te weten wat het verschil is tussen CSS, HTML en PHP.
HTML: de structuur
HTML bepaalt de structuur en betekenis van de inhoud op een pagina.
Bijvoorbeeld: <h2>Dit is een tussenkop</h2>.
Of: <a href="https://voorbeeld.nl">Bekijk de website</a>.
WordPress maakt het grootste deel van die HTML tegenwoordig automatisch voor je via blocks, je theme en plugins. En daarom hoef je zelf weinig HTML te schrijven.
CSS: de vormgeving
CSS bepaalt hoe onderdelen eruitzien.
Bijvoorbeeld: h2 {. Daarmee maak je alle H2-koppen donkergrijs.
color: #333;
}
CSS gebruik je onder andere voor:
- kleuren;
- marges;
- padding;
- lettertypes;
- randen;
- breedtes;
- knoppen;
- hover-effecten;
- mobiele weergave.
Voor kleine aanpassingen in de layout van de websites die ik maak, gebruik ik CSS veruit het meest.
PHP: de functionaliteit
PHP gaat een stapje verder, dit bepaalt meer hoe iets werkt. WordPress zelf is ook voor een belangrijk deel in PHP geschreven.
Met PHP kun je bijvoorbeeld bepalen:
- wanneer iets wordt weergegeven;
- welke producten of categorieën ergens onder vallen;
- welke functionaliteit WordPress uitvoert;
- wat er bij een WooCommerce-bestelling gebeurt;
- welke informatie aan een pagina wordt toegevoegd;
- hoe een plugin of theme zich gedraagt.
Bijvoorbeeld: add_filter( 'excerpt_length', function() {.
return 30;
} );
Zo’n stukje code verandert dus niet alleen hoe iets eruitziet, maar hoe iets op je website werkt. Daarom moet je met PHP voorzichtiger zijn dan met een paar regels CSS.
Welke code heb je nodig?
Een simpele vuistregel:
Wil je iets er anders laten uitzien?
Dat doe je meestal met CSS.
Wil je HTML-structuur of een los HTML-element toevoegen?
Dan gebruik je HTML.
Wil je veranderen wat WordPress of een plugin doet?
Dan kom je vaak bij PHP uit.
Wil je gedrag in de browser veranderen?
Dan kan JavaScript nodig zijn.
Wil je iets wijzigen en heb je geen flauw idee wat precies? Vraag het dan aan ChatGPT.
Bijvoorbeeld: ‘Ik wil in WooCommerce de knop ‘Toevoegen aan winkelwagen’ alleen bij productcategorie X veranderen in ‘Reserveer nu’. Heb ik hiervoor CSS of PHP nodig?’.
Dan kan ChatGPT eerst uitleggen welk type code hiervoor nodig is, daarna ga je de code uitwerken.
Wanneer heb je helemaal geen code nodig?
Voordat je ChatGPT code laat maken, kijk ik altijd eerst of de instelling gewoon al in WordPress zit.
Afhankelijk van het WordPress theme dat je gebruikt, kun je namelijk veel dingen gewoon al aanpassen via:
- je WordPress-theme;
- de Block Editor;
- Site Editor;
- jouw specifieke pagebuilder;
- WooCommerce;
- een plugininstelling.
WordPress ondersteunt tegenwoordig bijvoorbeeld veel meer styling per block. Sinds WordPress 7.0 kun je zelfs Custom CSS rechtstreeks aan bepaalde individuele blocks toevoegen.
Als je een instelling gewoon met twee klikken kunt aanpassen, zou ik daar zeker geen custom code voor schrijven.
Custom code is vooral handig als de normale instellingen nét niet bieden wat je nodig hebt.
CSS laten schrijven door ChatGPT
Ik gebruik altijd ChatGPT om CSS mee te schrijven. Of nouja, meestal. Ik doe dit al jaren, dus de basis CSS lukt me ook wel zelf. Maar voor meer uitgebreidere CSS vraag ik nu ChatGPT.
Stel dat ik een knop alleen op mobiel over de volle breedte wil hebben.
Ik zou bijvoorbeeld vragen: ‘Ik gebruik WordPress met Impreza. De knop heeft de class .contact-button. Op schermen smaller dan 768px wil ik dat deze knop 100% breed wordt. Geef alleen de CSS-code en verander niets op desktop.’.
ChatGPT kan dan iets maken als:
@media (max-width: 767px) {
.contact-button {
width: 100%;
}
}Vervolgens test ik dat en kijk ik of het klopt. Of pas ik zelf nog iets aan de code aan.
Hoe concreter je vraag, hoe groter de kans dat je meteen bruikbare code krijgt.
Geef ChatGPT voldoende informatie
Een vraag als: ‘Maak mijn knop kleiner’ is nogal vaag. En dan druk ik me nog bescheiden uit.
Welke knop? Op welke pagina? Alleen mobiel? Welke afmetingen? Welk theme?
Een veel betere vraag is: ‘Ik gebruik WordPress met Astra. Ik wil alleen de blauwe knop in mijn header op mobiel iets lager maken. De knop heeft de class .ast-header-button-1. Voeg 10px ruimte boven de knop toe en verander niets op desktop.’.
En nóg beter is het als je relevante bestaande HTML of CSS kunt meegeven. Dan hoeft ChatGPT minder te gokken en ben je sneller klaar. Hoe meer ChatGPT moet gokken hoe langer je ermee bezig bent.
Hoe vind je de juiste CSS-class of ID?
Als je CSS code niet werkt, is dit meestal het probleem: je hebt niet de juiste class of ID.
ChatGPT kan prachtige CSS schrijven, maar als de selector niet overeenkomt met jouw website gebeurt er precies helemaal niets.
Je kunt de juiste class of ID vaak vinden via je browser.
In Chrome:
- ga naar de pagina waaraan je iets wilt wijzigen;
- klik met de rechtermuisknop op het onderdeel;
- kies Inspecteren;
- bekijk de HTML van het betreffende element.
Je ziet dan bijvoorbeeld: <a class="w-btn contact-button">Contact opnemen</a>.
Dan weet je dat je in dit geval als class .contact-button kunt gebruiken.
Een screenshot kan ook helpen
Ik gebruik ChatGPT zelf ook regelmatig door gewoon een screenshot te laten zien. Bijvoorbeeld: ‘Ik wil dat de ruimte tussen deze titel en knop kleiner wordt. Welke informatie heb je van mij nodig om de juiste CSS te maken?’.
Dan kan ChatGPT aangeven wat er nodig is, bijvoorbeeld:
- de class;
- HTML;
- bestaande CSS;
- theme-naam.
Dat voorkomt veel eindeloos proberen met willekeurige code.
Waar voeg je CSS toe in WordPress?
Dat hangt af van het soort theme dat je gebruikt.
Bij een klassiek WordPress-theme
Veel klassieke themes hebben nog: Weergave > Customizer > Extra CSS.
WordPress bewaart CSS die je daar toevoegt apart van de themebestanden. Een update van het theme overschrijft deze CSS dus niet. De CSS is wel gekoppeld aan het gebruikte theme. Wissel je van theme, dan wordt die CSS niet meer toegepast.
Veel premium themes hebben daarnaast een eigen veld voor custom CSS. Bijvoorbeeld in de theme options.
Bij een block theme
Gebruik je een block theme, dan werk je via de Site Editor.
Daar kun je via Stijlen website breed aanvullende CSS toevoegen. WordPress adviseert om eerst te kijken wat met de gewone Style-instellingen kan en pas daarna custom CSS toe te voegen.
Je kunt daarnaast CSS op blockniveau toevoegen. Sinds WordPress 7.0 kan Custom CSS zelfs rechtstreeks worden toegevoegd aan individuele blocks die deze mogelijkheid ondersteunen.
Heb je voor aanpassingen met CSS een child theme nodig?
Nee, je hebt geen child theme nodig als je CSS toevoegt via bijvoorbeeld:
- Extra CSS;
- Site Editor;
- theme options;
- een ingebouwd CSS-veld.
WordPress bewaart zulke Custom CSS juist los van de bestanden van je parent theme.
Een child theme is vooral belangrijk als je daadwerkelijk:
- themebestanden aanpast;
- templates overschrijft;
- PHP in het theme toevoegt;
- structurele theme-aanpassingen maakt.
Lees ook mijn artikel over wanneer je een WordPress child theme nodig hebt.
HTML toevoegen in WordPress
HTML hoef je tegenwoordig veel minder vaak handmatig te gebruiken dan vroeger. In de klassieke WordPress-editor kon je wisselen tussen Visueel en Tekst. Veel ondernemers gebruiken deze klassieke editor niet meer. Ikzelf nog wel voor mijn blogs.
In de Block Editor kun je een Aangepaste HTML / Custom HTML-block gebruiken. WordPress heeft daarvoor een specifiek core block waarmee je HTML kunt toevoegen en tijdens het bewerken kunt bekijken.
Bijvoorbeeld:
<div class="melding">
Dit is een melding.
</div>Die class kun je vervolgens met CSS vormgeven:
.melding {
padding: 20px;
border: 1px solid #ddd;
}Maar je hebt meestal geen HTML-code nodig voor het aanpassen van:
- koppen;
- afbeeldingen;
- buttons;
- links;
- kolommen;
Daar zijn WordPress-blocks voor.
PHP laten schrijven door ChatGPT
Ik gebruik ChatGPT tegenwoordig ook regelmatig voor PHP, wat heel handig is voor meer geavanceerde aanpassingen.
Denk aan:
- WooCommerce-aanpassingen;
- WordPress-filters;
- shortcodes;
- plugin-aanpassingen;
- aangepaste functionaliteit.
Een voorbeeld van een goede vraag aan ChatGPT: ‘Ik gebruik WooCommerce. Ik wil alleen bij producten uit de categorie workshops een extra melding onder de prijs tonen. Schrijf hiervoor PHP met een WooCommerce-hook. Zorg dat de code niets verandert bij andere producten en leg kort uit wat iedere regel doet.’.
Waar voeg je PHP-code toe in WordPress?
Je kunt PHP bijvoorbeeld toevoegen via:
- een snippets-plugin;
- je child theme;
- een eigen plugin;
- in sommige situaties een theme-specifieke codefunctie.
Voor kleine losse functies vind ik een snippets-plugin praktischer dan rechtstreeks de functions.php bewerken. Ikzelf gebruik hiervoor graag WPCode.
Zo kun je een snippet makkelijker:
- activeren;
- uitschakelen;
- benoemen;
- terugvinden.
Niet zomaar PHP in functions.php plakken
Als je gaat zoeken naar PHP-code toevoegen zul je vaak de tip tegenkomen om de code toe te voegen aan de functions.php.
En hoewel dat prima kan werken, kan één PHP-fout ook een kritieke fout veroorzaken waardoor je website breekt.
Daarom zou ik PHP nooit zomaar rechtstreeks in een parent theme zetten.
Gebruik dus beter:
- een snippets-plugin;
- een child theme als de code echt themegebonden is;
- een kleine eigen plugin bij belangrijkere functionaliteit.
En maak vóór grotere wijzigingen altijd een backup van je website.
Kan ChatGPT veilig PHP schrijven?
ChatGPT kan heel goed helpen bij het schrijven van PHP, maar het kan ook code maken die:
- niet past bij jouw pluginversie;
- een verkeerde hook gebruikt;
- conflicteert met andere code;
- technisch werkt maar iets anders doet dan je bedoelde;
- verouderde WordPress-functies gebruikt.
Test daarom alles heel goed nadat je een code hebt toegepast. Leeg de cache en bezoek je website in een andere browser, zonder te zijn ingelogd. Test je website ook op de mobiel.
En help ChatGPT door bestaande code mee te geven als je iets wilt laten aanpassen.
Als je één regel in een bestaande plugin of snippet wilt veranderen, laat ChatGPT dan niet een compleet nieuwe functie verzinnen zonder de huidige code te zien. Dat voorkomt een hoop gedoe.
Gebruik ChatGPT ook om fouten te vinden
Krijg je na een wijziging bijvoorbeeld: Er heeft zich een kritieke fout voorgedaan op deze website of een PHP-fout in je log?
Dan kun je die foutmelding aan ChatGPT geven.
Bijvoorbeeld: ‘Sinds ik deze PHP-code heb toegevoegd krijg ik deze fatal error. Hier is de foutmelding en hier is de volledige functie. Kun je uitleggen wat er misgaat en alleen het noodzakelijke corrigeren?’.
Daar is AI ontzettend handig voor.
Geef bij voorkeur:
- de exacte foutmelding;
- relevante code;
- de WordPress-versie;
- de PHP-versie;
- plugin/theme waarop de code betrekking heeft.
Laat wachtwoorden, API-keys en andere gevoelige gegevens uiteraard weg.
Lees hier meer over hoe je een error op je website oplost.
JavaScript laten maken met ChatGPT
Soms kom je er met CSS of PHP niet uit en is JavaScript nodig. Bijvoorbeeld wanneer iets moet gebeuren nadat iemand klikt, scrollt, een formulier invult of een element opent.
Ook daarvoor kan ChatGPT code schrijven.
Maar voor gewone WordPress-aanpassingen kom ik zelf wel veel vaker uit bij CSS of PHP.
Ik zou JavaScript daarom niet als eerste oplossing kiezen als dezelfde aanpassing gewoon via WordPress zelf kan.
Eerst de instelling zoeken, dan pas code schrijven
Als ik iets wil aanpassen, is dit de route die ik volg:
- Kan de aanpassing met een instelling in WordPress?
- Kan het via het theme?
- Kan het via een bestaande plugin?
- Kan het met eenvoudige CSS?
- Is PHP of JavaScript echt nodig?
Dat voorkomt dat je website vol komt te staan met snippets voor dingen die WordPress eigenlijk al kan.
Wat moet je ChatGPT vertellen voor goede WordPress-code?
Hoe meer relevante context je ChatGPT voorschotelt, hoe beter.
Ik vermeld bijvoorbeeld:
- WordPress;
- mijn theme;
- gebruikte plugin;
- wat er nu gebeurt;
- wat ik wil dat er gebeurt;
- op welke pagina’s;
- alleen desktop of mobiel;
- relevante class/ID;
- bestaande code;
- de eventuele foutmelding.
Een goede prompt is bijvoorbeeld: ‘Ik gebruik WordPress, WooCommerce en het theme Impreza. Op alle producten uit categorie online-cursus wil ik direct onder de prijs de tekst “Direct toegang na betaling” tonen. Gebruik een WooCommerce-hook, verander geen templatebestanden en zorg dat dit alleen op individuele productpagina’s verschijnt. Geef de PHP-code en leg kort uit waar ik die toevoeg.’.
Waar ChatGPT minder goed in is als het aankomt op code schrijven
AI ziet je website niet automatisch van binnen. ChatGPT weet bijvoorbeeld niet uit zichzelf:
- welke CSS-classes je theme gebruikt;
- welke plugins je hebt;
- welke pluginversie je gebruikt;
- welke custom code al actief is;
- welke hooks een plugin heeft veranderd;
- wat er in je error log staat.
Daarom kan een antwoord technisch heel logisch klinken en toch voor geen meter werken. En als code niet werkt, betekent dat dus niet per se dat CSS of PHP onmogelijk is. ChatGPT mist dan vaak aanvullende informatie.
Plak nooit gevoelige gegevens in ChatGPT
Je weet waarschijnlijk al dat je ChatGPT geen gevoelige gegevens moet voeren. Maar ik zeg het toch nog even voor de zekerheid. Deel geen:
- wachtwoorden;
- API-secrets;
- private keys;
- databasewachtwoorden;
- volledige configuratiebestanden met credentials;
- klantgegevens.
Heb je bijvoorbeeld een fout in wp-config.php? Kopieer dan alleen het relevante deel en verwijder gevoelige waarden.
Maak een backup voordat je belangrijke code wijzigt
Voor drie regels CSS hoef je niet iedere keer een complete noodprocedure te starten.
Maar ik zou voorzichtiger zijn bij PHP of aanpassingen aan:
- pluginbestanden;
- themebestanden;
- WooCommerce;
- checkout;
- database;
.htaccess;wp-config.php.
Maak een backup en gebruik bij grotere wijzigingen bij voorkeur een stagingomgeving.
Lees mijn stappenplan voor een WordPress backup maken.
Pas een plugin niet zomaar rechtstreeks aan
In principe kun je vrij simpel de PHP-bestanden van een plugin aanpassen. Maar bij de volgende update kunnen die wijzigingen worden overschreven.
Vraag daarom eerst aan ChatGPT of die aanpassing ook kan via een filter of een snippet, zonder de pluginbestanden rechtstreeks te wijzigen.
Moet je tóch een pluginbestand aanpassen omdat bijvoorbeeld de ontwikkelaar dat expliciet aangeeft?
Documenteer dan precies:
- welk bestand;
- welke regels;
- welke wijziging;
- waarom.
Na een update van de betreffende plugin moet je altijd even controleren of die wijziging nog nodig en compatibel is.
Test altijd na een wijziging in code
Een stukje code dat op één pagina goed werkt kan op een andere pagina zomaar iets onverwachts veranderen. Echt: ik spreek uit ervaring.
Controleer daarom na invoeren van code ten minste:
- de pagina waarop je iets hebt gewijzigd;
- mobiel;
- desktop;
- belangrijke formulieren;
- de checkout als WooCommerce betrokken is.
Bij PHP kijk ik ook naar:
- foutlogs;
- WordPress-admin;
- frontend;
- relevante processen.
En doe na een WooCommerce-aanpassing bij voorkeur een testbestelling.
Wanneer zou ik hulp inschakelen?
ChatGPT maakt code toegankelijker, maar niet iedere aanpassing aan je website is ineens een goede doe-het-zelfklus.
Ik zou hulp inschakelen wanneer je bijvoorbeeld werkt aan:
- de checkout van je webshop;
- betalingen;
- complexe PHP;
- grote pluginwijzigingen;
- een live website waar fouten direct omzet kosten.
AI kan je daar nog steeds enorm bij helpen, maar je wilt niet dat een experimenteel codefragment je webshop platlegt.
Mijn manier van werken met ChatGPT en WordPress-code
Voor aanpassingen aan een website werk ik ongeveer zo:
- Eerst kijk ik of WordPress, het theme of de plugin de optie al heeft.
- Zo niet, dan bepaal ik of CSS, HTML, PHP of JavaScript logisch is.
- Ik geef ChatGPT zo veel mogelijk relevante context.
- Bij CSS geef ik de class of HTML mee als dat nodig is.
- Bij PHP geef ik bestaande code en plugininformatie mee.
- Ik vraag om zo weinig mogelijk te veranderen.
- Ik laat uitleggen wat de code doet.
- Ik maak bij risicovollere wijzigingen eerst een backup.
- Ik test de aanpassing.
- Werkt iets niet? Dan geef ik de foutmelding of het resultaat terug aan ChatGPT.
Dat scheelt mij inmiddels ontzettend veel tijd.
Veelgestelde vragen over je website aanpassen met code
Kan ChatGPT CSS voor WordPress schrijven?
Ja. Voor kleine aanpassingen in de layout werkt dat meestal heel goed. Geef wel duidelijk aan welk element je wilt aanpassen en geef het liefst ook meteen de gebruikte class of ID.
Kan ChatGPT PHP voor WordPress schrijven?
Ja. ChatGPT kan bijvoorbeeld WordPress- en WooCommerce-hooks, filters en functies schrijven.
Controleer PHP-code wel extra goed na invoeren. Eén foutje kan een kritieke WordPress-fout veroorzaken.
Waar voeg ik CSS toe in WordPress?
Bij klassieke themes vaak via Weergave > Customizer > Extra CSS of via de theme-instellingen.
Bij block themes vind je aanvullende CSS via Stijlen in de Site Editor. WordPress biedt daarnaast ook CSS-mogelijkheden voor individuele blocks.
Waar voeg ik PHP toe?
Voor losse snippets is een snippets-plugin vaak praktisch. Ik gebruik daarvoor WPCode.
Themegebonden PHP kan eventueel in een child theme. En voor belangrijkere functionaliteit kan een eigen plugin logischer zijn.
Heb ik een child theme nodig voor CSS?
Niet als je CSS toevoegt via de ingebouwde Custom CSS-functie van WordPress of je theme.
Een child theme is vooral belangrijk als je de bestanden van je thema daadwerkelijk wijzigt.
Kan ChatGPT mijn website kapotmaken?
ChatGPT zelf verandert niets aan je website zolang jij de code niet uitvoert. Maar code die je kopieert kan zeker wel fouten veroorzaken. En soms zelfs de hele website breken.
Wees daarom vooral voorzichtig met PHP, JavaScript, serverbestanden en databasecode. En test alles goed voordat je je computer afsluit en denkt dat je website het gewoon doet zoals normaal.
Conclusie: pas layout en functies van je website aan met ChatGPT
Je hoeft tegenwoordig geen uitgebreide kennis van CSS, HTML of PHP te hebben om kleine aanpassingen te maken aan je WordPress-website.
ChatGPT heeft dat ook voor mij behoorlijk veranderd. Ik kan nu met code veel meer aan een WordPress-website wijzigen dan voorheen, en zelfs hele nieuwe functies en elementen maken.
Dat scheelt een hoop gedoe en tijd kan ik je vertellen.
Maar het belangrijkste is eigenlijk niet dat ChatGPT code kan schrijven, maar dat jij weet waar je die code veilig gebruikt en wat het ongeveer doet.
Voor visuele wijzigingen is CSS vaak voldoende.
HTML gebruik je tegenwoordig veel minder handmatig omdat WordPress veel structuur zelf regelt.
En voor functionaliteit kan PHP ontzettend handig zijn.
Test alle codes die ChatGPT je geeft heel goed op je website. Soms ben ik lang bezig om een code goed te krijgen, het is dus zeker niet zo: jij stelt een vraag en ChatGPT geeft je binnen 10 seconden een oplossing. Soms ben ik er uren mee zoet.
Geef voldoende context, laat de code uitleggen, verander zo weinig mogelijk tegelijk en maak bij belangrijke wijzigingen eerst een backup.
Loop je vast met code of een bestaande WordPress-website? Bekijk dan mijn WordPress ondersteuning.
