Hoe je Custom CSS aan je WordPress-website kunt toevoegen

Wanneer je voor een WordPress-website kiest, heb je tegenwoordig steeds minder kennis van coderen nodig.

Het blijft echter aan te raden om jezelf te verdiepen in een paar basis skills zoals HTML en CSS. Het maakt je leven net wat eenvoudiger als je hier enige kennis van hebt.

Het kan namelijk altijd een keer voorkomen dat het design van een bepaald onderdeel van je website niet via de instellingen aan te passen is. Door CSS aan je website toe te voegen, kun je het alsnog aanpassen.

In dit artikel leer ik je verder geen CSS, maar ik laat je wel een aantal manieren zien waar jij jouw custom CSS kunt plaatsen, zodat het niet verloren gaat bij een update.

Het style.css-bestand van je child theme

Custom CSS toevoegen via een child theme in WordPress

Doordat je CSS via verschillende methodes in je website kunt krijgen, kun je al snel het overzicht kwijtraken als je het op allerlei verschillende plekken plaatst.

Het is daarom aan te raden om altijd CSS codes op dezelfde plek te plaatsen en het style.css-bestand van je WordPress child theme is de beste locatie hiervoor.

Je hebt twee manieren om bij dit bestand te komen om CSS codes toe te voegen. Zo kun je via FTP verbinden en naar wp-content/themes/je-child-theme-map/style.css gaan en het bewerken.

Een andere methode is om codes toe te voegen aan dit bestand vanuit het WordPress beheerdersgedeelte. Je kunt hiervoor naar “Weergave -> Editor” en dan het style.css-bestand.

Extra CSS toevoegen via de Customizer

Een andere manier om custom CSS aan je WordPress-website toe te voegen, is door gebruik te maken van de Extra CSS optie in de WordPress Customizer. Deze optie is erin gekomen sinds WordPress 4.7, maar vervangt natuurlijk niet een child theme.

Je kunt CSS toevoegen in de WordPress customizer door naar “Weergave -> Customizer” te gaan en dan het tabblad “Extra CSS”.

Een mooie functie van de Extra CSS editor in de customizer, is dat je een live kunt zien wat je aan het aanpassen bent met de live preview. Wanneer je eenmaal tevreden bent met je toevoegingen kun je het opslaan en staat het live op je website.

De CSS code die je invoert in de Extra CSS editor wordt inline geladen. Dit houdt in dat er geen apart bestand voor gemaakt wordt en het direct in de code komt te staan. Op zich is dit niet echt een probleem als je een paar kleine CSS aanpassingen wilt doorvoeren.

Je wilt het echter wel vermijden als je honderd of zelfs meer dan duizend regels CSS code wilt toevoegen om het thema aan te passen naar je wensen. Inline CSS moet namelijk keer op keer geladen worden door de browser, terwijl een CSS-bestand in de browser cache kan komen.

CSS toevoegen met de Simple Custom CSS plugin

Simple Custom CSS

Een andere mogelijkheid om CSS codes toe te voegen aan je website is door de plugin Simple Custom CSS toe te voegen. Deze plugin kan handig zijn wanneer je eigenlijk al een tijd bezig bent met je website en het teveel gedoe is om een child theme te maken.

Het voordeel van deze plugin in vergelijking met de WordPress customizer, is dat het onder andere ook nog syntax highlighting heeft, waardoor het makkelijker is om de code te lezen. Persoonlijk vind ik dat echt een stuk fijner werken.

Net als de WordPress customizer, plaatst deze plugin alle CSS code wel inline. Het blijft dus onverstandig om deze plugin te gebruiken als je 1000en regels code wilt plaatsen. Gaat het echter om een paar kleine design aanpassingen, dan is het een prima optie.

Conclusie

Het is belangrijk dat je altijd voor een locatie kiest om je custom CSS codes in te plaatsen. Op deze manier raak je het overzicht niet kwijt en kun je direct zien wat je allemaal al hebt toegevoegd aan codes.

Custom CSS toevoegen via het style.css-bestand blijft de beste methode, maar in bepaalde situaties is het wellicht net even wat makkelijker om voor een van de twee andere opties te gaan.

Hoe voeg jij custom CSS aan je website toe? Doe je dit via een van bovenstaande methodes of maak jij gebruik van een hele andere methode?

Geef een reactie