Wil je de CSS van je WordPress site aanpassen, maar weet je niet waar je moet beginnen? Met CSS styling kun je het uiterlijk van je hele website in één keer aanpassen of alleen de stijl van enkele pagina’s veranderen. De mogelijkheden zijn vrijwel onbeperkt: kleuren toevoegen, veranderen hoe elementen worden uitgelijnd, een layout ontwerpen en nog veel meer. Met CSS kan je zowat elke mogelijke wijziging maken aan je WordPress thema.
Wanneer je vertrouwd wil raken met de “ontwikkelkant” van WordPress of wanneer je simpelweg meer controle wil hebben over hoe je site eruitziet, dan zul je moeten weten hoe je CSS kunt toevoegen aan WordPress (en hoe je de reeds aanwezige CSS kan bewerken).
Door je thema te bewerken en je eigen CSS elementen toe te voegen, kun je elk visuele element op je website tot in perfectie optimaliseren. Vandaag gaan we kijken hoe je dat precies doet.
Ben je er klaar voor? Laten we dan beginnen!
Wat is het bewerken van CSS?
CSS is de afkorting van Cascading Style Sheets en is de meest populaire webtaal na HTML. De twee werken nauw samen, aangezien CSS gebruikt wordt om HTML elementen te stylen. HTML legt de basis van een website en CSS wordt vervolgens gebruikt om het precieze uiterlijk vorm te geven.
CSS geeft je de mogelijkheid om een website responsief te maken, kleuren toe te voegen, lettertypen te wijzigen, de layout aan te passen en in het algemeen de visuele presentatie van een website naar jouw voorkeuren aan te passen. Net als HTML en JavaScript is CSS een front-end clientside taal, wat betekent dat het uitgevoerd wordt aan de kant van de gebruiker, niet de server.
Wanneer je verder gaat met WordPress development, zijn HTML, CSS, JavaScript en PHP de talen die je moet beheersen. De kern van WordPress, een CMS, is daar namelijk op gestoeld. Ook de meeste thema’s en plugins worden in deze talen geschreven.
Maar zelfs als je geen webdesigner of developer bent, is het handig om in elk geval een beetje CSS te kunnen. Je kan het namelijk ook gebruiken om elementen te verplaatsen of te stijlen binnen je website, en kleine esthetische aanpassingen te doen aan je thema zodat alles er perfect uitziet.
WordPress en CSS
Binnen WordPress gedraagt CSS zich iets anders dan normaal. Het wordt beheerd door thema’s, die bestaan uit templatebestanden, template tags en natuurlijk de CSS stylesheet. Het thema maakt al deze bestanden voor je aan, maar dat betekent niet dat je ze niet kan aanpassen.
Templatebestanden delen je website op in onderdelen (bijvoorbeeld header.php of archive.php) en vervolgens worden template tags gebruikt om die onderdelen op te roepen samen met content uit je database. De bestanden bestaan vooral uit PHP en HTML, alhoewel je er ook CSS aan toe kunt voegen.
Maar het belangrijkste in dit geval is de stylesheet, standaard style.css genoemd. Om de looks van je website aan te passen, zul je moeten leren hoe je code kunt toevoegen en bewerken in dit bestand.
Zo gebruik je CSS om je WordPress thema te bewerken
Als je door middel van CSS je thema wilt aanpassen en het uiterlijk van je website wilt veranderen, zul je je eigen code moeten toevoegen of de bestaande code moeten bewerken. Er zijn manieren om CSS toe te voegen zonder dat je ooit een themabestand hoeft aan te raken, maar als je de bestaande code van je thema wilt aanpassen, zul je de stylesheet van je website moeten openen.
Bij het maken van deze bewerkingen, is er iets dat je moet weten: wanneer je thema updates ontvangt, worden je aanpassingen van style.css, functions.php en andere templatebestanden verwijderd. Je wil daarom normaal gesproken niet rechtstreeks wijzigingen aan je site maken, maar een child-thema gebruiken.
De stylesheet kun je zien als een lijst met instructies voor je website, waarmee wordt bepaald wat de stijl van de website is en hoe de CSS code gebruikt wordt. Hier zul je het grootste deel van je aanpassingen doen, maar we laten ook zien hoe je toegang krijgt tot andere templatebestanden van je thema, bijvoorbeeld header.php en footer.php.
Er zijn twee manieren om toegang te krijgen tot de stylesheet van je WordPress website: via het WordPress dashboard of via een FTP client. We zullen beide methoden bekijken.
Vind je het geen prettig idee om dit zelf te doen? Overweeg dan een WordPress developer in te huren zodat hij of zij dat voor je kan doen.
Bewerken van WordPress CSS via het dashboard
De makkelijkste manier om je CSS stylesheet te bewerken is direct vanuit het WordPress dashboard. Je hoeft in dat geval dus geen FTP toepassingen of code-editors te installeren. Je kan direct elk gewenst bestand bewerken, en je kan gebruik maken van de met ingebouwde documentatie voor functies en syntaxismarkeringen.
Voordat je grote veranderingen maakt aan deze belangrijke bestanden, moet je altijd een back-up maken van je WordPress website. Het is nogal makkelijk om per ongeluk een foutje te maken waardoor het hele uiterlijk van je website verpest wordt, dus als je onervaren bent met CSS kan het lastig zijn om uit te vogelen hoe je je veranderingen kunt terugdraaien.
Als je eenmaal een back-up en een child-thema hebt gemaakt, log je in op de back-end van je site. Je vindt de editor door naar het menu te gaan en op Weergave > Thema editor te klikken.
Je zou een popup moeten zien die je waarschuwt om geen rechtstreekse aanpassingen aan deze bestanden te maken. Maak je geen zorgen, je kan op de blauwe knop klikken om aan te geven dat je het begrijpt. Het is een waarschuwing die je eraan herinnerd om een child-thema te gebruiken en een back-up van je website te maken voordat je iets verandert. Wanneer je inderdaad deze stappen opvolgt, kun je veilig bewerkingen doorvoeren.
En nu ben je binnen! Je zou normaal gesproken meteen op de stylesheet uit moeten komen, maar kijk in het menu aan de rechterkant om je themabestanden te zien, mocht dit niet zo zijn.
Naast style.css heb je ook toegang tot andere templatebestanden zoals functions.php, header.php en single.php. Deze hebben allemaal effect op hoe bepaalde pagina’s op je website zich gedragen.
Maar om deze specifieke bestanden te bewerken, kan je het beste eerst wat PHP leren.
Onthoud dat de meeste veranderingen die je hier in de CSS maakt op je hele website worden toegepast. Als je bijvoorbeeld je H1 headers verandert naar een bepaalde lettertype, zal dat op al je pagina’s veranderen. Je zult een aparte syntaxis moeten gebruiken om alleen de stijl van specifieke pagina’s aan te passen.
Het rechtstreeks bewerken van themabestanden
Wat als je niet bij de Thema editor kunt of als je liever werkt via FTP? Het is inderdaad makkelijker om de back-end editor te gebruiken, maar sommige thema’s of plugins schakelen deze editor uit. In dat geval zul je verbinding moeten maken met je website via FTP.
FTP oftewel File Transfer Protocol, maakt het mogelijk om je bestanden op afstand aan te passen. Het eerste dat je hiervoor moet doen is FileZilla downloaden, of een andere FTP client.
Daarna moet je contact opnemen met je host en de FTP gegevens opvragen (host, poort en de gebruikersnaam/wachtwoord indien nodig). Heeft je host een dashboard, dan kun je die gegevens waarschijnlijk in het dashboard vinden.
De gegevens van Kinsta gebruikers zijn te vinden in het MyKinsta dashboard onder Sites > SFTP/SSH.
Nadat je de gegevens hebt, start je de FTP client en voer je de informatie in. Als dat niet werkt, kun je “sftp://” toevoegen voor de URL onder Host.
Ben je binnen, dan vind je style.css door op de map wp-content te klikken, vervolgens de map van je thema (zoals het Twenty Twenty thema) en vervolgens scrol je naar beneden tot je style.css ziet.
Dubbelklik om dit te openen (of rechtsklik en selecteer View/Edit) en voer de gewenste veranderingen door. Vergeet niet alles op te slaan en weer te uploaden naar de server.
Moet je andere templatebestanden bewerken, zoals home.php, single.php of archive.php, dan kun je die in dezelfde map als style.css vinden.
Het bewerken van je themabestanden, of je dat nou doet via FTP of het dashboard, is niet altijd nodig. Het is zelfs beter om het niet te doen, als je alleen maar wat code wil toevoegen.
Voor kleine veranderingen is de onderstaande methode de beste manier om CSS toe te voegen aan je WordPress website.
Zo voeg je je eigen CSS toe aan WordPress
Wil je niet de bestaande CSS code veranderen, maar alleen je eigen styling toevoegen, dan wordt het sterk aangeraden om een van de volgende methoden te gebruiken: via de WordPress Customizer of een speciale plugin.
Allereerst kun je veel makkelijker bij de CSS code die je door middel van een van deze twee methodes toevoegt. Verder hoef je je geen zorgen te maken dat je de nieuwe CSS op de verkeerde plek toevoegt, of dat je later vergeten bent waar je het ook alweer had neergezet.
Daarnaast raak je de CSS die je via deze methoden toevoegt, niet kwijt bij een update van je thema (alhoewel het nog steeds kan verdwijnen als je van thema verandert).
Dit betekent dat je dus geen child-thema hoeft te gebruiken, en als er iets misgaat, kun je eenvoudig de door jou toegevoegde CSS weer weg halen.
Let erop dat het ook hier verstandig is een back-up van je website te maken, aangezien het soms voor kan komen dat gebruikers toch nog hun CSS kwijtraken bij grote updates. Maar zelfs met dit risico is deze methode aanzienlijk eenvoudiger en betrouwbaarder dan het rechtstreeks bewerken van je thema.
Je kan natuurlijk altijd je code toevoegen aan style.css en de computer vervolgens met een voldaan gevoel afsluiten als je geen child-thema wilt maken. Maar als je wilt voorkomen dat je grote wijzigingen kwijtraakt, kun je beter een plugin gebruiken of de Extra CSS optie binnen de WordPress Customizer gebruiken.
1. CSS bewerken via de WordPress Customizer
In plaats van de Theme editor te gebruiken kun je ook het volgende proberen. Log in op je WordPress back-end en klik op Weergave > Customizer om de pagina te openen waarin je je thema kan aanpassen. Hier zie je meteen een live preview van je website, met aan de linkerkant opties voor het aanpassen van bijvoorbeeld kleuren, menu’s of andere widgets.
Helemaal onderaan het menu zou je het veld Extra CSS moeten zien.
Klik erop om het te openen. Je gaat nu naar een nieuw scherm met een box voor het invoeren van code en een aantal instructies. Het scherm Extra CSS werkt net als de Thema editor wat betreft het markeren van syntaxis en beschikt ook over een controletool, zodat je meteen kunt zien als je code niet klopt.
Alle code die je schrijft, verschijnt automatisch in de preview aan de rechterkant, tenzij de code een fout bevat (je kan er dan voor kiezen om het alsnog te publiceren, inclusief de fout).
Wanneer je klaar bent, kun je de code direct publiceren, aangeven vanaf wanneer de code geactiveerd moet worden, of het als concept opslaan om later verder te gaan. Je krijgt bovendien een preview link om je werk aan anderen te kunnen laten zien.
Zoals je inmiddels wel snapt, is de Extra CSS pagina op veel manieren krachtiger dan de Thema editor, en tegelijkertijd veel makkelijker om mee te werken dan wanneer je zelf rechtstreeks belangrijke bestanden bewerkt.
De CSS code die je hier schrijft, zal de standaard styling van je thema overschrijven en zal ook niet verdwijnen bij een update van je thema. Als je het niet live kunt zien in de preview, controleer dan nog eens of je de goede selectors gebruikt binnen je CSS code.
Net als bij de Thema editor wordt CSS standaard op de hele site toegepast, maar je kunt ook code schrijven voor specifieke pagina’s.
Het enige nadeel is dat alles wat je hebt geschreven wordt verwijderd als je van thema wisselt. Zorg dus dat je een back-up maakt van je CSS voordat je naar een nieuw thema gaat, anders raak je een hoop werk kwijt.
Vind je deze optie lastig te gebruiken, of zoek je een oplossing die op verschillende thema’s blijft werken en waarmee je makkelijk specifieke pagina’s kunt aanpassen, dan kun je beter een plugin zoeken.
2. Toevoegen van je eigen CSS aan WordPress via plugins
Er zijn verschillende redenen waarom je liever een plugin gebruikt om CSS toe te voegen aan WordPress. Alhoewel de functies erg lijken op het menu Extra CSS, zullen de styles ook bewaard blijven als je van thema verandert of updates doorvoert.
De UI van plugins is soms ook prettiger, of wellicht vind je extra features zoals auto-aanvullen belangrijk. Sommige plugins laten je zelfs CSS samenstellen via dropdown-menu’s, zodat je niks zelf hoeft te schrijven.
Simple Custom CSS
Simple Custom CSS is één van de meeste populaire CSS editor plugins, omdat het makkelijk te gebruiken is, een overzichtelijke interface heeft en een lichtgewicht back-end. Kortom, een kleine WordPress plugin met een hoop power.
De plugin instellen is supersimpel en je zult geen negatieve impact op je prestaties zien. Het werkt met elk thema en bevat syntaxis highlighting en error checking.
Simple Custom CSS and JS
Simple Custom CSS and JS is een goed alternatief. Hiermee kun je je ook specifiek richten op de header, footer, front-end en zelfs de admin back-end.
SiteOrigin CSS
SiteOrigin CSS is nog een andere optie die ook een traditionele CSS editor bevat. Je kan makkelijk op elk moment wisselen tussen de traditionele editor en een moderne visuele editor.
WP Add Custom CSS
Vind je het lastig om CSS toe te voegen aan specifieke pagina, dan voegt WP Add Custom CSS een CSS box toe aan het bewerkingsvenster. Ook biedt het normale styling voor je gehele site.
CSS Hero
Een volledige visuele CSS editor kan ook een goede oplossing zijn. Hierdoor hoef je niet meer zelf code te schrijven en hoef je alleen maar eenvoudige inputveld en dropdown-menu’s langs te gaan, en vervolgens schrijft de plugin alle benodigde code.
CSS Hero is een premium visual editing plugin, met krachtige features (animaties, bewerkingen per apparaat en non-destructive editing, om maar eens wat te noemen).
Waar kun je CSS leren
Wil je zelf CSS leren? Deze handige tutorials voor beginners zullen je de basis leren, waardoor je de syntaxis kent om zelf werkende CSS code te schrijven.
Het kan intimiderend lijken, maar CSS is over het algemeen niet heel ingewikkeld. Eenvoudige dingen zoals het veranderen van de kleur van de achtergrond of het instellen van lettertypen is vrij makkelijk, en er zijn allerlei voorbeelden te vinden.
De meeste programmeertutorials die je online kunt vinden zijn ook helemaal gratis. Er is een hoop informatie te vinden die (bijna) niks kost.
Een paar voorbeelden van de beste CSS tutorials voor beginners.
- W3Schools CSS Tutorial: Er zit echt belachelijk veel informatie in deze website: tutorials, voorbeelden en referenties. De tutorials van W3Schools zijn eenvoudig en makkelijk te volgen, ook voor beginners, dus dit is een goede plek om te starten.
- Codecademy Learn CSS: Via zes gratis en praktische lessen zul je de basis van CSS leren. Dit is niet alleen een video met uitleg, maar een volledige, interactieve les waarin je met echte code werkt. Binnen de pro versie krijg je ook quizzen en vrije projecten om mee te werken.
- Learn CSS in One Hour: Een hoop mensen willen een programmeertaal leren, maar hebben weinig tijd. Maar als je één uur over hebt, kun je gratis CSS leren met deze 20-delige cursus. Je zult aan het einde nog geen expert zijn, maar wel zeker de basis goed begrijpen.
- Introduction to Basic HTML & CSS for WordPress Users: Ben je op zoek naar iets dat focust op WordPress? Als je altijd al moeite had met het schrijven van HTML en CSS, dan is dit de ideale cursus. Je moet ervoor betalen, maar krijgen dan ook 52 lessen en 5 uur aan video.
Samenvatting
Als WordPress gebruiker kan CSS op het eerste gezicht ingewikkeld lijken. Maar als je eenmaal weet hoe je de bestanden van je thema kunt aanpassen en doorhebt waar je styling kunt toevoegen, is het gelukkig vrij eenvoudig.
Je kan het uiterlijk van je website aanpassen door je themabestanden te bewerken via de back-end of via FTP, maar dit is verre van ideaal, tenzij je per se de bestaande code wilt wijzigen.
Wil je alleen je eigen CSS toevoegen, dan kun je beter de Extra CSS pagina gebruiken onder Weergave > Customizer, of een plugin installeren als je meer functies nodig hebt.
Aanpassingen aan je stylesheet raak je namelijk kwijt zodra je je thema updatet, tenzij je een child-thema gebruikt. Dit geldt niet voor Extra CSS. Hierbij blijft je code bewaard bij updates, maar onthoud wel dat alleen een plugin je CSS bewaart wanneer je verandert van thema.
Welke methode je ook kiest, zorg dat je regelmatig back-ups maakt van je website, inclusief de stylesheet en de door jou toegevoegde code. Wil je graag meer weten over CSS? Dan is het de hoogste tijd om je CSS skills (weer) aan te scherpen met de door ons genoemde sites!
Happy styling!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter