Custom CSS toevoegen aan je WordPress-site

Het toevoegen van je eigen “custom” CSS aan WordPress kan op verschillende manieren. Met de taal CSS kun je de ‘styling’ van (bepaalde elementen op) je WordPress-website aanpassen.

Heb je wel wat kennis van CSS maar weet je niet precies hoe je in WordPress custom CSS moet toevoegen? In dit artikel leg ik je uit hoe je op de juiste manier(en) je eigen CSS kunt toevoegen aan WordPress.

Child theme

De meeste CSS op een WordPress-website is meestal afkomstig uit het WordPress-theme dat je gebruikt. Je kunt de CSS van je website dan ook makkelijk aanpassen door het style.css-bestand van je theme aan te passen. Dit is echter niet aan te raden. Het nadeel hiervan is namelijk dat deze wijzigingen overschreven zullen worden zodra je je theme updatet. De “best practices” schrijven dan ook voor om een child theme te gebruiken voor het maken van CSS-aanpassingen van je theme.

Door een child theme te maken kun je de CSS van het hoofd-theme “overschrijven” zonder dat je eigen CSS verloren gaat tijdens een update. Op WPLounge.nl gebruiken wij óók een child theme, en we raden iedereen aan om dit ook te doen.

Child theme maken?
Om te leren hoe je op de juiste manier een child theme maakt, lees mijn artikel: WordPress child theme maken

“Extra CSS” in de WordPress Customizer

Voor hele kleine aanpassingen kun je ook CSS toevoegen via de WordPress Customizer. Je vindt deze in WordPress onder Weergave > Customizer. In de Customizer krijg je je website te zien, met daarnaast een balk met instellingen. Je kunt hier onder meer je menu’s, widgets en andere instellingen aanpassen en direct het resultaat bekijken.

De afbeelding rechts laat zien hoe deze instellingen-balk er uit ziet. Klik op het kopje “Extra CSS” om je eigen CSS toe te voegen. Je komt dan in een nieuw scherm waarin je je eigen CSS kunt invoeren. Rechts in het scherm krijg je dan direct het resultaat te zien, zonder dat je bezoekers het ook al zien.

Je kunt wijzigingen die je in de Customizer maakt ook “inplannen”:

Let op: liever een child theme dan de Customizer
Ik raad je aan om een child theme te gebruiken voor CSS-aanpassingen. Wijzigingen maken in de Customizer is echter wel een stuk sneller dan een child theme maken. De Customizer is dan ook vooral handig om CSS-aanpassingen of extra en custom CSS te testen. Als je tevreden bent met het resultaat, raad ik je aan om de CSS vervolgens in je child theme te zetten in plaats van in de Customizer.

Een plugin gebruiken

Vind je het maken van een child theme (ondanks ons artikel) te moeilijk? Je kunt ook een plugin installeren, zoals Simple Custom CSS. Deze plugin geeft je de mogelijkheid om vanuit de WordPress admin-omgeving CSS-aanpassingen te doen. Net als bij een child theme, blijven deze wijzigingen óók actief als je je theme updatet. Het fijne aan deze plugin is dat er ook “syntax highlighting” in zit, waardoor de CSS-bewerker een stuk overzichtelijker wordt.

Let op: De CSS die je in deze plugin invoert zal óók worden ingeladen als je een nieuw theme activeert. Houd hier dus rekening mee als je ooit een nieuw theme installeert (en activeert).

Conclusie

Voor het toevoegen van custom CSS aan WordPress heeft het gebruiken van een child theme altijd de voorkeur. Als je even snel wat kleine aanpassingen wilt doen zonder eerst een child theme te maken, dan kun je ook (al dan niet tijdelijk) één van de andere mogelijkheden gebruiken.

Beoordeel dit artikel