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 goede manieren voor. Lees lekker verder!
Video
Er is ook een video over dit artikel:
Hoe pas je een onderdeel van je WordPress website aan met CSS?
Het is goed als je weet hoe je Custom 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 ik daar eerst dieper op inga.
Heb je al verstand van HTML en CSS? Sla dit hoofdstuk dan gerust over en ga lekker gelijk naar de 3 manieren.
Weet je echter nog niet veel of zelfs helemaal niks over HTML en CSS? Dan is het verstandig om eerst “HTML leren” en “CSS leren” te lezen op ProgrammeerPlaats.
Als je deze artikelen hebt gelezen, kan je beter volgen waar ik het allemaal over heb 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="rode_titel">Hoe pas je een onderdeel van je WordPress 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:
#rode_titel {
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 bijvoorbeeld in de Gutenberg editor HTML elementen plaatsen met daarin een id of een class.
Ook kan je eventueel in bepaalde blokken die al in je bericht of pagina staan id’s en classes toevoegen als je deze blokken als HTML gaat bewerken.
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.
Hierboven heb ik 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 je aanpassingen op je website hoeft te maken.
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 hoe je Custom CSS kan toevoegen. Daar zijn 3 goede manieren voor.
Manier 1: Customizer (Extra CSS)
De makkelijkste manier om CSS toe te voegen is door naar “Extra CSS” te gaan in de customizer.
Daar kom je door in het dashboard te klikken op Weergave > Customizer > Extra CSS.
Extra 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:
Ga je echter grotere en meer aanpassingen doen in CSS? Dan is het wel handig om manier 2 te gebruiken.
Manier 2: Child theme
Wil je serieus met je thema aan de slag? Dus veel en grote aanpassingen en/of uitbreidingen doen? Dan moet je sowieso een child theme hebben.
Met een child theme kan je op een overzichtelijke manier veel Custom CSS toevoegen, zonder dat het verdwijnt bij een update van het thema.
Je gaat niet lopen rommelen in je parent theme, waardoor alles ook netjes gescheiden blijft en je je parent theme niet aantast.
Weet je nog niet veel van een child theme af? En hoe maak je eigenlijk een child theme?
In “Child theme maken in WordPress” kan je eenvoudig een child theme maken en ga je begrijpen wat het is.
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 Weergave > Thema editor, nu ben je in de thema editor.
Soms kan het ook een iets andere naam hebben, zoals “Thema bestand editor”.
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 3: Plugin
Tot slot zijn er nog (gratis) plugins op de markt, die het leven makkelijker voor je maken.
Enkele goede plugins zijn:
Conclusie
Ben je van plan om veel Custom CSS toe te voegen aan je WordPress website? Dan is een child theme het meest verstandige om te gebruiken.
Dit maakt het veel netter en overzichtelijker.
Heb je geen grote plannen en wil je vooral kleine aanpassingen doen? Dan is “Extra CSS” in de customizer of een plugin prima.
Ga lekker aan de slag zou ik zeggen!
Wellicht is het ook interessant om te leren hoe je JavaScript en PHP toevoegt aan je WordPress website.
Zijn er onduidelijkheden of heb je vragen? Laat dan vooral hieronder een reactie achter.