Bewerken van je WordPress code

Vroeg of laat loop je tegen een beperking van je WordPress-thema aan. Je wilt net dat ene element aanpassen dat niet binnen de standaard opties of widgets valt. Misschien moet een knop op een andere plek staan, wil je de opmaak van je formulieren strakker maken of heb je een stukje extra functionaliteit nodig dat het thema simpelweg niet biedt.

In zulke gevallen kom je uit bij het aanpassen van HTML, CSS of zelfs PHP. Dat kan prima, zolang je het op de juiste manier aanpakt. Doe je het verkeerd, dan loop je het risico dat updates worden overschreven of dat je site helemaal niet meer werkt.

Daarom is het belangrijk om te weten welke routes er zijn om wijzigingen veilig door te voeren en hoe je voorkomt dat een kleine aanpassing grote gevolgen krijgt.

Safety first

Voor je ook maar één regel code verandert, is het slim om drie zaken goed te regelen:

1. Maak een volledige back-up van zowel bestanden als database.
2. Gebruik een staging-omgeving om je wijzigingen eerst veilig te testen.
3. Zorg voor duidelijke rechten zodat niet iedereen zomaar in de code kan werken.

Dit lijkt misschien overdreven, maar het is basis-hygiëne. Zelfs een kleine fout kan je hele dashboard onbereikbaar maken. Door eerst in staging te werken en pas daarna naar live door te zetten, beperk je de risico’s aanzienlijk.

Schakel risicovolle editors uit

Binnen WordPress vind je standaard editors om thema- en pluginbestanden direct vanuit de admin aan te passen. Handig, maar ook gevaarlijk. Een verkeerde komma kan je hele site platleggen, en bij misbruik kan een aanvaller direct code uitvoeren.

Schakel deze editors daarom uit door in je wp-config.php het volgende toe te voegen:

define('DISALLOW_FILE_EDIT', true);

Ook de officiële WordPress-documentatie adviseert dit als onderdeel van de zogenoemde hardening van je installatie.

Waarom dit belangrijk is

• Back-ups en staging zorgen dat fouten niet direct impact hebben op je live site.
• Het uitschakelen van de file-editor verkleint je aanvalsoppervlak én voorkomt dat een typefout je admin onbruikbaar maakt.
• SFTP blijft beschikbaar voor legitieme code-aanpassingen, waarbij je gebruikmaakt van je eigen IDE, versiebeheer en de mogelijkheid om snel terug te draaien.

Welke route past bij jouw wijziging?

Er is niet één manier om code in WordPress te bewerken. Welke route je kiest, hangt af van het soort aanpassing dat je wilt doen. Maak altijd een bewuste keuze:

• Kleine contentaanpassing of embed: gebruik de Block Editor. Kies een Custom HTML-blok, of schakel over naar Bewerken als HTML om direct in de code te werken.
• Een paar regels CSS die sitebreed gelden: voeg deze toe via Customizer > Extra CSS, zodat je met live-preview direct het resultaat ziet. Voor grotere stijlaanpassingen is een child-theme beter, waarbij je een eigen stylesheet inlaadt.
• Structurele themawijzigingen of templates: doe dit altijd in een child-theme. Pas je het hoofdthema aan, dan verlies je de wijzigingen bij de eerstvolgende update.
• Losse scripts of kleine PHP-snippets: plaats ze in een snippets-plugin in plaats van direct in functions.php. Zo voorkom je dat een fout je site platlegt en houd je overzicht.
• Grotere aanpassingen: werk lokaal in je eigen IDE, gebruik versiebeheer en zet wijzigingen live via SFTP. Vermijd de ingebouwde Theme Editor.

In de volgende secties lichten we elke route uitgebreider toe, met uitleg, voorbeelden en praktische tips, zodat je precies weet wanneer en hoe je de methode

veilig toepast.

HTML bewerken in de Block Editor

De meeste WordPress-sites draaien tegenwoordig op de Block Editor (ook wel Gutenberg genoemd). Hiermee bouw je pagina’s en berichten met blokken voor tekst, afbeeldingen, video’s en meer. Voor de meeste aanpassingen gebruik je gewoon die standaardblokken, maar soms wil je direct in de HTML werken – bijvoorbeeld om een embed goed te krijgen, een extra attribuut toe te voegen of een stukje markup te plaatsen dat je thema niet ondersteunt.

Binnen de Block Editor heb je daarvoor drie mogelijkheden:

• Custom HTML-blok – voeg een blok toe en plak je eigen HTML. Ideaal voor losse widgets, knoppen of embeds.
• Bewerken als HTML – pas de code van een bestaand blok aan, bijvoorbeeld om een link of heading te finetunen.
• Code-editor – schakel de hele pagina om naar codeweergave, zodat je alle markup in één keer ziet.

Werk je nog met de Classic Editor, dan gebruik je de tab Tekst om de HTML te bewerken en de tab Visueel om het resultaat te controleren. Dat is minder flexibel, maar voor snelle correcties nog steeds bruikbaar.

Let op: rechtstreeks HTML aanpassen kan snel leiden tot foutjes in de structuur. Controleer daarom altijd in de preview en vertrouw op de revisie-functie van WordPress als vangnet.

CSS aanpassen in WordPress

Met CSS bepaal je hoe je site eruitziet: kleuren, lettertypes, marges en meer. Thema’s en blokken brengen standaard stijlen mee, maar vaak wil je net wat finetunen – een knop in een andere kleur, extra ruimte rond een afbeelding of een eigen lettertype.

Daar zijn verschillende routes voor, afhankelijk van hoeveel controle je nodig hebt:

• Extra CSS in de Customizer – via Weergave > Customizer > Extra CSS voeg je regels toe en zie je direct een live-preview. Perfect voor kleine, snelle aanpassingen zonder in bestanden te duiken.
• CSS per element in een page builder – gebruik je Elementor of een andere builder, dan kun je vaak direct bij een element of widget eigen CSS invullen. Handig voor één-off tweaks, al wordt het al snel onoverzichtelijk als je veel losse stukjes gebruikt.
• Stylesheet in een child-theme – voor grotere of structurele stijlen is dit de beste aanpak. Je plaatst je regels in style.css van je child-theme en laadt die in met wp_enqueue_style(). Zo blijven je wijzigingen netjes bewaard bij updates en kun je werken met versiebeheer.

Advies: voor snelle correcties is de Customizer of page builder prima, maar zodra stijlen zich opstapelen is het slimmer om over te stappen naar een child-theme. Zo houd je overzicht, kun je consistent testen en voorkom je dat CSS verspreid raakt over verschillende plekken.

Themabestanden aanpassen met een child-theme

Soms kom je met CSS of losse HTML niet ver genoeg. Wil je de structuur van je thema veranderen, bijvoorbeeld de header, footer of de manier waarop blogberichten worden getoond – dan moet je in de themabestanden zelf aanpassingen doen. Doe dit nooit rechtstreeks in het hoofdthema, want je wijzigingen verdwijnen bij de eerstvolgende update.

De oplossing is een child-theme. Daarmee maak je een kleine uitbreiding op je bestaande thema: het behoudt alle functies en stijlen van het parent-theme, maar je kunt specifieke bestanden overschrijven of extra logica toevoegen.

Een child-theme bestaat minimaal uit een map in wp-content/themes met daarin een style.css (met een korte header waarin je het parent-theme aangeeft) en meestal een functions.php om styles en scripts in te laden. Wil je een templatebestand wijzigen, dan kopieer je het bestand uit het parent-theme naar je child-theme en pas je het daar aan. Alles wat je niet kopieert, blijft automatisch uit het parent-theme komen.

Lees hier alles child themes binnen wordpress

Voorbeelden van veelvoorkomende aanpassingen:

• Een aangepaste header of footer door header.php of footer.php te overschrijven.
• Het finetunen van blogweergaven door single.php of content-single.php te kopiëren en te bewerken.
• Een eigen paginatemplate maken door een nieuw bestand toe te voegen, zoals page-contact.php.

Tip: verdiep je in de template hierarchy van WordPress. Daarmee zie je precies welk bestand geladen wordt voor welke pagina. Dat voorkomt giswerk en zorgt dat je altijd het juiste bestand overschrijft.

Snippets en losse scripts toevoegen

Soms wil je een klein stukje code of een extern script toevoegen aan je site. Denk aan een trackingtag, een script voor een chatwidget of een kleine PHP-uitbreiding. Je zou dit rechtstreeks in functions.php of in je themabestanden kunnen zetten, maar dat is risicovol: één fout kan je site onbereikbaar maken en bij een update raak je de wijzigingen kwijt.

Een betere oplossing is het gebruik van een snippets-plugin. Daarmee beheer je losse stukjes code alsof het mini-plugins zijn. Je geeft ze een naam, kunt ze eenvoudig aan- of uitzetten en houdt ze gescheiden van je thema. Twee veelgebruikte opties zijn:

• Code Snippets – ideaal voor PHP-snippets, zoals een extra functie of filter.
• Head, Footer and Post Injections – handig voor scripts die in de <head> of vlak voor </body> moeten worden geladen, bijvoorbeeld een Google Analytics-tag.

Een GA-tag is een goed voorbeeld: je wilt dit script altijd correct inladen, onafhankelijk van welk thema je gebruikt. Door het via een snippets-plugin te plaatsen, blijft de code behouden bij updates en kun je per omgeving (staging, productie) bepalen of het script wel of niet actief moet zijn.

Advies: gebruik snippets-plugins voor trackingcodes, kleine uitbreidingen en losse scripts. Zodra je meer complexe logica toevoegt of structurele integraties bouwt, is het beter om die onder te brengen in een child-theme of een eigen plugin met versiebeheer.

Grotere aanpassingen via SFTP

Voor kleine tweaks kun je prima uit de voeten met de editor, CSS of een snippets-plugin. Maar zodra je grotere of structurele wijzigingen maakt, zoals nieuwe templates, complexe functies of meerdere bestanden tegelijk, is het verstandiger om buiten het WordPress-dashboard te werken.

De professionele aanpak is om lokaal in je eigen IDE (bijvoorbeeld PhpStorm of VS Code) te ontwikkelen en de bestanden via SFTP naar de server te uploaden. Zo heb je versiebeheer tot je beschikking, kun je veilig testen in een stagingomgeving en zet je pas daarna gecontroleerd de wijzigingen live.

Een goede werkroutine ziet er zo uit:

1. Download het originele bestand voordat je iets aanpast.
2. Werk lokaal in je IDE, met linting en debugging ingeschakeld.
3. Upload via SFTP en test de wijziging.
4. Werkt het niet? Zet direct het originele bestand terug om downtime te voorkomen.

Deze route vraagt meer discipline, maar levert maximale controle en veiligheid op. Je bent niet afhankelijk van de Theme File Editor in het dashboard. Die kun je beter uitschakelen, omdat één fout de hele site kan blokkeren.

Advies: gebruik SFTP altijd voor grotere wijzigingen en combineer het met versiebeheer, bijvoorbeeld Git. Zo kun je je werk stap voor stap volgen, terugrollen als iets misgaat en houd je overzicht, ook als meerdere mensen aan dezelfde site werken.

Hulp nodig bij code of onderhoud?

Code aanpassen in WordPress hoeft geen risico te zijn, zolang je een veilige route kiest die past bij de wijziging die je wilt doen. Kleine tweaks pak je eenvoudig op in de editor of met Extra CSS, grotere aanpassingen horen in een child-theme, een snippets-plugin of via SFTP. Met back-ups, staging en een zorgvuldige werkwijze houd je controle en voorkom je onnodige downtime.

Wil je zelf geen omkijken hebben naar dit soort technische ingrepen? Bij Surver bouwen we WordPress-websites die vanaf het begin veilig en onderhoudbaar zijn opgezet. Daarnaast bieden we een webmaster-service: je kunt altijd op ons rekenen voor snelle hulp of advies, of het nu gaat om een kleine aanpassing of complexe ontwikkeling. Zo weet je zeker dat je site in goede handen is.