Wil je zelf (custom) CSS gaan toevoegen aan je WordPress website? Dat is mooi, want na het lezen van dit artikel weet je er alles van! Het is leuk om een goed thema te hebben, maar vaak wil je bepaalde onderdelen van je website toch net iets anders hebben. Eerst gaan we kijken hoe je nou bepaalde onderdelen in CSS kan aanpassen. Daarna gaan we bekijken waar je deze CSS code kan toevoegen, daar zijn 3 manieren voor. Lees lekker verder!
Ja, ik wil ook het beste WordPress thema hebben, net zoals ProgrammeerPlaats!
Hoe pas je een onderdeel van je website aan met CSS?
Het is goed als je weet hoe je CSS toevoegt aan je website, maar als je niet weet hoe je bepaalde onderdelen op een website aanpast met CSS, heb je er alsnog weinig aan. Vandaar dat we eerst daar dieper op ingaan.
Weet je nog niet veel af van HTML en CSS? Dan is het aan te raden om eerst “HTML leren” en “CSS leren” te lezen. Als je dat hebt gelezen, begrijp je waarschijnlijk ook beter waar we het over hebben in dit artikel.
Een (WordPress) website bestaat uit allemaal HTML elementen. Bijvoorbeeld de titel van dit hoofdstuk is een HTML element. Een HTML element bestaat uit een openings- en sluitingstag. De titel van dit hoofdstuk bestaat uit <h2> openings- en een </h2> sluitingstag.
Stel dat je de titel van dit hoofdstuk de kleur rood zou willen geven. Dan kan je dat zo doen in CSS:
h2 {
color: red;
}
Zo maak je de titel van dit hoofdstuk rood, maar het probleem is dat op deze manier alle titels met <h2> tags rood zijn. Dit wil je misschien helemaal niet!
Gelukkig is daar een oplossing voor. Je kan in een HTML openingstag een id of een class zetten. Hierdoor bewerk je alleen de desbetreffende titel en worden andere <h2> titels niet rood. Dit ziet er zo uit met een id:
<h2 id="Rood_titel_onderdeel_aanpassen">Hoe pas je een onderdeel van je website aan met CSS?</h2>
Als je nu dit in CSS doet, wordt alleen de titel van dit hoofdstuk rood en niet alle <h2> titels:
#Rood_titel_onderdeel_aanpassen {
color: red;
}
Een id gebruik je meestal om één onderdeel aan te passen en een class gebruik je vaak om meerdere onderdelen aan te passen, die dan dezelfde uiterlijke kenmerken krijgen.
Bij een class gebruik je een punt (.) in plaats van een # om het aan te spreken in CSS. Zelf kan je in de Tekst/Text editor, bij een WordPress pagina of bericht, HTML elementen plaatsen met daarin bijvoorbeeld een id of een class.
HTML elementen inspecteren
Maar hoe weet je eigenlijk wat voor HTML elementen de onderdelen op je website zijn? Dit is gelukkig eenvoudig te achterhalen. In Google Chrome klik je met je rechtermuisknop ergens op de website, daarna klik je op “Inspecteren” (Of Ctrl + Shift + I). Op deze manier zie je alle HTML elementen van de website en ook CSS code.
Als je op 
klikt (Of Ctrl + Shift + C), kan je met je muis over bepaalde onderdelen van je website gaan en zie je gelijk wat voor soort HTML elementen daarbij horen. Ook zie je de CSS die daarbij is geschreven.
Hierboven hebben we als voorbeeld gekeken naar wat voor onderdeel de titel “Gratis leren programmeren” op de homepage van ProgrammeerPlaats is. Dit is een <H1> element en heeft een class met de waarde “entry-title”. Rechts op het scherm zie je wat voor CSS er geschreven is bij dit HTML element.
Het leuke is dat je de HTML elementen en de geschreven CSS in Chrome kan aanpassen. Je kan gewoon in de HTML en CSS code klikken om iets toe te voegen of aan te passen. Dit is ideaal om even snel iets te testen, zonder dat het gelijk wordt opgeslagen.
Hopelijk heb je nu een beter over hoe je HTML elementen op een website kan vinden en hoe je CSS schrijft. Nu is het goed om te weten waar je (custom) CSS kan toevoegen, zodat jouw WordPress website het ook begrijpt. Daar zijn 3 manieren voor.
Ja, ik wil ook het beste WordPress thema hebben, net zoals ProgrammeerPlaats!
Manier 1: Child theme
Als je een WordPress website hebt, is het zeker aan te raden om een child theme te maken. Met een child theme kan je makkelijk aanpassingen doen aan je website en functionaliteiten toevoegen, zonder dat het verloren gaat bij een update van je thema.
Stel dat je CSS aanpassingen gaat doen, direct in het “style.css” bestand in je hoofdthema (Parent theme), dan heb je kans dat je andere CSS code beschadigt en bij een update gaan al je aanpassingen verloren. Dit is niet wat je wil.
Met een child theme voorkom je dat. Je kan CSS schrijven en eventueel ook nieuwe functionaliteiten toevoegen met PHP, zonder dat het verloren gaat bij een update van het thema. Het wordt aanbevolen door professionele WordPress developers.
Maar hoe maak je een child theme? In “Child theme maken in WordPress” lees je daar alles over!
Nadat je een Child theme hebt gemaakt, wil je natuurlijk weten waar je CSS kan toevoegen. Ga eerst naar het Dashboard van je WordPress website. Klik op Appearance/Weergave > Theme Editor/Thema editor, nu ben je in de thema editor, waar je CSS kan toevoegen. Let er wel op dat je CSS toevoegt in het “style.css” bestand van je child theme en niet in die van je parent theme. Als het goed is zijn de bestanden van je child theme al automatisch geselecteerd, maar even checken voor de zekerheid kan nooit kwaad.
Manier 2: Customizer (Extra CSS)
De 2e manier om CSS toe te voegen is door naar “Extra CSS” te gaan, in de “Customizer”. Daar kom je door te klikken op Appearance/Weergave > Customize/Customizer > Additional CSS/Extra CSS.
Hier komt dus custom CSS vandaan. Custom CSS is een onderdeel van de “Customizer” en een feature van WordPress. Het is makkelijk om hier CSS aanpassingen te maken.
Ook is het makkelijk om hier CSS aanpassingen te testen en je ziet gelijk wat de aanpassingen teweeg brengen, voordat je het opslaat. Zoals in het onderstaande voorbeeld:
Het is echter wel aan te raden om gebruik te maken van een child theme. Dit is een nettere manier van werken dan het gebruiken van “Extra CSS” in de “Customizer”. Als je even snel iets wil testen, is het wel handig zijn. Daarvoor kan je ook gewoon Google Chrome gebruiken, zoals eerder beschreven in “HTML elementen inspecteren”.
Manier 3: Plugin
Tot slot zijn er nog (gratis) plugins op de markt, die het leven makkelijker voor je maken, als je CSS wil toevoegen aan je WordPress website. Enkele goede plugins zijn:
Conclusie
De meest nette manier om CSS toe te voegen aan je WordPress website, is door dat in een child theme te doen. Als dat te lastig voor je is, is een plugin een goed alternatief.
Met een child theme is het veel overzichtelijker dan in de kleine “Extra CSS” editor. Daarnaast is het noodzakelijk om een child theme te hebben, als je je website (later) nog verder wil uitbreiden.
Test van te voren je CSS aanpassing(en) in Google Chrome of in “Extra CSS” in de “Customizer”. Zo zie je eenvoudig wat de aanpassing doet, zonder het al op te slaan. Als je er tevreden over bent, sla je het op in bijvoorbeeld je child theme of een plugin. Je bent natuurlijk ook vrij om het in “Extra CSS” op te slaan, maar persoonlijk doen wij dat liever niet.
Veel succes met toevoegen van (custom) CSS aan je WordPress website!
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.