CSS is de taal die bepaalt hoe jouw WordPress-website eruitziet: de kleuren, lettertypen, marges en de indeling van elk element op de pagina. Wil je een knop een andere kleur geven, meer witruimte toevoegen of een lettertype aanpassen? Dan heb je CSS nodig. Gelukkig hoef je geen doorgewinterde ontwikkelaar te zijn om dit zelf te doen.
In dit artikel lees je op welke drie manieren je CSS kunt toevoegen aan een WordPress-website, hoe je controleert of je aanpassingen correct zijn doorgevoerd, en hoe je veelvoorkomende problemen oplost. Na het lezen kun je zelf aan de slag met het stylen van jouw site, zonder dat je meteen een ontwikkelaar hoeft te bellen.
De drie manieren om CSS toe te voegen aan WordPress
Er zijn drie gangbare methoden om custom CSS toe te voegen aan een WordPress-website. Welke het beste bij jou past, hangt af van hoeveel aanpassingen je wilt maken en hoe technisch onderlegd je bent.
- Via de WordPress-customizer — de eenvoudigste optie voor kleine aanpassingen, direct beschikbaar zonder extra installaties.
- Via een child theme — de meest robuuste aanpak voor grotere of structurele CSS-wijzigingen, waarbij je aanpassingen ook na een thema-update bewaard blijven.
- Via een plugin — een goede tussenoplossing als je geen child theme wilt aanmaken maar wel meer flexibiliteit nodig hebt dan de customizer biedt.
Eén ding is belangrijk om vooraf te weten: pas nooit direct het stylesheet van je hoofdthema aan. Bij een thema-update worden die wijzigingen namelijk overschreven en ben je alles kwijt. Gebruik altijd één van de drie methoden hieronder. Gebruik je een blokthema met Full Site Editing (FSE), dan is de customizer niet beschikbaar. In dat geval voeg je CSS toe via de Site-editor, te bereiken via Weergave > Editor > Stijlen > Extra CSS.
CSS toevoegen via de WordPress-customizer
De WordPress-customizer is de snelste manier om custom CSS toe te voegen, zonder dat je iets hoeft te installeren. Handig voor kleine tweaks, zoals een andere achtergrondkleur of een aangepast lettertype. Je ziet de wijzigingen direct in een live voorvertoning, nog voordat je ze publiceert.
Volg deze stappen om CSS toe te voegen via de customizer:
- Log in op je WordPress-dashboard en ga naar Weergave > Customizer.
- Klik onderin de zijbalk op Extra CSS.
- Typ of plak je CSS-code in het tekstveld dat verschijnt.
- Controleer de live voorvertoning aan de rechterkant om te zien of het er goed uitziet.
- Klik op Publiceren om de wijzigingen op te slaan en live te zetten.
De customizer heeft een eenvoudige syntaxisvalidatie ingebouwd: als je een fout maakt in je CSS, krijg je een waarschuwing. Dat scheelt je een hoop zoekwerk. Let wel op: de CSS die je hier toevoegt, is gekoppeld aan het actieve thema. Wissel je later van thema, dan moet je de CSS handmatig kopiëren naar je nieuwe thema. Wil je dat voorkomen, dan is een plugin of child theme een betere keuze. Meer over CSS toevoegen in WordPress Deze link opent in een nieuw tabblad lees je bij WP Handleiding.
CSS toevoegen via een child theme
Een child theme is als een beschermhoes voor je hoofdthema. Het erft alle stijlen en functies van het hoofdthema, maar jouw aanpassingen staan in een apart bestand. Zo blijven je wijzigingen bewaard, ook als het hoofdthema wordt bijgewerkt. Voor grotere of structurele CSS-aanpassingen is dit veruit de meest verstandige aanpak.
Een child theme aanmaken
Je kunt een child theme handmatig aanmaken via FTP of het bestandsbeheer van je hostingpanel, maar makkelijker is het via een plugin zoals de Child Theme Configurator. Die doet het werk voor je. Handmatig gaat het zo:
- Maak een nieuwe map aan in de map wp-content/themes/, bijvoorbeeld mijnthema-child.
- Maak in die map een bestand aan met de naam style.css.
- Voeg bovenaan dat bestand de volgende code toe, waarbij je Mijn Thema vervangt door de naam van jouw hoofdthema:
/* Theme Name: Mijn Thema Child / Template: mijnthema */
- Sla het bestand op en ga in je WordPress-dashboard naar Weergave > Thema’s.
- Activeer het child theme.
Voeg vervolgens je eigen CSS toe aan het style.css-bestand van het child theme, onder de bovenstaande kopregel. Zolang je nog geen CSS hebt toegevoegd, zie je geen visuele veranderingen op de website. Dat is normaal. Zodra je je eerste stijlregel toevoegt, zie je het resultaat direct in de browser. Meer achtergrond over child themes aanmaken Deze link opent in een nieuw tabblad vind je bij De Webdeveloper.
CSS toevoegen met een plugin
Wil je geen child theme aanmaken maar heb je meer nodig dan de customizer biedt? Dan is een CSS-plugin een prima tussenoplossing. Een plugin als Simple Custom CSS and JS van SilkyPress is lichtgewicht, makkelijk in gebruik en heeft syntaxismarkering, zodat je fouten direct ziet.
Het grote voordeel van een plugin boven de customizer: de CSS blijft actief ongeacht welk thema je gebruikt. Wissel je van thema, dan hoef je de CSS niet opnieuw in te voeren. Houd er wel rekening mee dat dit ook een nadeel kan zijn: als je een nieuw thema activeert, kan oude CSS voor onverwachte stijlconflicten zorgen.
Zo installeer je een CSS-plugin en voeg je je eerste stijlregel toe:
- Ga in je WordPress-dashboard naar Plugins > Nieuwe plugin en zoek op Simple Custom CSS and JS.
- Installeer en activeer de plugin.
- Ga naar het nieuwe menu-item dat de plugin heeft aangemaakt en klik op CSS toevoegen.
- Typ of plak je CSS-code in het editor-venster.
- Klik op Opslaan en controleer de website in je browser.
Sommige plugins bieden extra functies zoals automatisch aanvullen van CSS-eigenschappen of dropdown-menu’s waarmee je stijlen kunt samenstellen zonder zelf code te schrijven. Dat is handig als je nog niet zo bekend bent met CSS. Houd als algemeen principe aan: gebruik zo min mogelijk plugins. Een CSS-plugin is een goede keuze voor kleine aanpassingen, maar als je weet dat je veel gaat aanpassen, is een child theme overzichtelijker.
Controleer of je CSS correct is toegepast
Je hebt je CSS toegevoegd en opgeslagen. Maar hoe weet je zeker dat het ook echt werkt? Gelukkig heeft elke moderne browser een ingebouwde tool waarmee je dit snel kunt controleren: de DevTools.
Zo verifieer je of je CSS correct is toegepast:
- Open je website in de browser en klik met de rechtermuisknop op het element dat je hebt gestyled.
- Kies Inspecteren (of druk op F12).
- In het paneel dat opent, zie je aan de rechterkant welke CSS-regels op dat element van toepassing zijn.
- Je kunt hier tijdelijk waarden aanpassen om te testen wat het effect is, zonder dat dit direct op je website wordt opgeslagen.
Zie je jouw stijlregel staan, maar is hij doorgestreept? Dan wordt hij overschreven door een andere, specifiekere CSS-regel. In dat geval moet je je selector aanpassen of, als laatste redmiddel, !important toevoegen aan je stijlregel. Gebruik dat laatste met mate, want het maakt toekomstige aanpassingen lastiger.
Test je aanpassingen ook altijd op verschillende schermformaten. Wat er goed uitziet op een laptop, kan er op een telefoon heel anders uitzien. De DevTools hebben een ingebouwde modus om dit te simuleren. Twijfel je of je CSS technisch correct is? De W3C CSS-validator Deze link opent in een nieuw tabblad controleert je code gratis op fouten.
Veelvoorkomende CSS-problemen in WordPress oplossen
Je hebt alles goed gedaan, maar je aanpassingen zijn niet zichtbaar. Herkenbaar? Dit zijn de meest voorkomende oorzaken en hoe je ze oplost.
De browsercache toont een oude versie
Browsers slaan CSS-bestanden op in de cache. Daardoor zie je soms nog de oude stijl, ook al heb je al wijzigingen opgeslagen. Leeg de browsercache via de instellingen van je browser, of open de website in een incognitovenster. Gebruik je een caching-plugin zoals WP Rocket of LiteSpeed Cache? Klik dan ook in je WordPress-dashboard op Cache legen of Purge all.
Een plugin veroorzaakt een conflict
Soms laden CSS-bestanden niet correct omdat twee plugins elkaar in de weg zitten. Test dit door alle plugins tijdelijk te deactiveren. Werkt de CSS nu wel? Activeer de plugins dan één voor één opnieuw totdat je de boosdoener vindt.
Je CSS wordt overschreven door een specifiekere regel
CSS werkt volgens het principe van specificiteit: een meer specifieke selector wint het altijd van een minder specifieke. Als jouw stijlregel niet werkt, is de kans groot dat het thema of een plugin een specifiekere regel gebruikt. Maak je eigen selector specifieker door er een extra klasse of element aan toe te voegen. Gebruik !important alleen als echt niets anders werkt.
Na een WordPress-update zijn aanpassingen verdwenen
Heb je je CSS direct in het hoofdthema aangepast in plaats van via een child theme of plugin? Dan zijn die wijzigingen bij een update waarschijnlijk overschreven. Dit is precies waarom je altijd één van de drie methoden uit dit artikel gebruikt. Test na elke WordPress-update ook even of je stijlen nog correct worden weergegeven op verschillende apparaten.
Wil je niet zelf worstelen met CSS, child themes of caching-plugins? Bij Stuurlui bouwen we WordPress-websites volgens de hoogste standaarden en trainen we jouw team direct bij oplevering in het gebruik van de site. Zo ben je meteen zelfstandig, zonder gedoe achteraf.
CSS toevoegen aan WordPress is eenvoudiger dan het klinkt: kies de methode die past bij de schaal van je aanpassingen, controleer het resultaat in de browser en los problemen op via de DevTools of door de cache te legen. Kom je er niet uit of wil je dat een expert meekijkt? Neem contact op met ons team, we denken graag met je mee.