WordPress extra CSS: waar je het toevoegt en hoe je de kleur van een knop wijzigt
WordPress extra CSS is een veld waarin je eigen opmaakregels toevoegt zonder de bestanden van het thema aan te raken. In een klassiek thema vind je het onder Weergave → Customizer → Extra CSS, en in een blokthema in de site-editor, onder Stijlen. De wijziging werkt zodra je haar opslaat en blijft bewaard bij updates van het thema.
Auteur: Het TellMyShop-team. Een gids voor eigenaren van WordPress-websites en WooCommerce-winkels: de oorzaak, de oplossing met de hand en hetzelfde werk in een gesprek met de chat.
Laatst bijgewerkt: · 5 min lezen
Voordat je CSS schrijft: misschien is een instelling genoeg
De makkelijkste knopkleur is die je zonder code instelt. Controleer eerst dit:
- Blokthema: Weergave → Editor → Stijlen. In de instellingen voor blokken of elementen vind je knoppen en wijzig je hun achtergrond- en tekstkleur voor de hele site.
- Klassiek thema: Weergave → Customizer. Veel thema’s hebben daar een onderdeel voor kleuren of knoppen.
- WooCommerce-webshop: knoppen In winkelwagen nemen hun kleur meestal over van het thema, dus een wijziging in de stijlen van het thema is vaak genoeg.
CSS heb je nodig als er geen zo’n optie is, of als je één bepaalde knop wilt wijzigen.
Waar extra CSS in jouw thema staat
| Soort thema | Waar je CSS toevoegt | Opmerkingen |
|---|---|---|
| Klassiek (bijv. Astra, OceanWP) | Weergave → Customizer → Extra CSS | live voorbeeld rechts, opgeslagen met de knop Publiceren |
| Blok (bijv. Twenty Twenty-Five) | Weergave → Editor → Stijlen, menu met drie puntjes → Extra CSS | opgeslagen in de globale stijlen van het thema |
| Blok, één soort blok | Stijlen → Blokken → gekozen blok → Geavanceerd | CSS alleen voor dat blok |
| Meer dan een paar regels | het stylesheet van het child theme | vraagt om toegang tot de bestanden |
CSS uit de site-editor en CSS uit de Customizer zijn twee aparte plekken. De notitie van het WordPress-kernteam over CSS in globale stijlen legt dat uit. Heb je een blokthema maar heb je ooit CSS in de Customizer toegevoegd, zet het dan op één plek, zodat je over een jaar weet waar je moet kijken.
Zo wijzig je de kleur van een knop stap voor stap
- Open de pagina met de knop, klik er met de rechtermuisknop op en kies Inspecteren. Je ziet de klasse van het element, bijvoorbeeld wp-block-button__link of button.
- Ga naar de plek voor extra CSS uit de tabel hierboven.
- Voeg een regel toe, bijvoorbeeld:
.wp-block-button__link {
background-color: #1f6f5c;
color: #ffffff;
}
.wp-block-button__link:hover {
background-color: #17574a;
}- Kijk naar het voorbeeld. Is de kleur niet veranderd, dan is een regel van het thema sterker. Zet de naam van een gebied voor de klasse, bijvoorbeeld .site-footer, in plaats van de regel meteen met important af te dwingen.
- Publiceer of sla de wijzigingen op.
- Controleer de pagina in een privévenster en op een telefoon. De tekstkleur moet leesbaar zijn op de nieuwe achtergrond.
De kleuren in het voorbeeld zijn alleen voorbeelden. Meer manieren, waaronder een child theme en een plugin, staan in de handleiding van Hostinger over eigen CSS in WordPress.
Wat een paar regels CSS nog meer oplossen
De kleur van een knop is het vaakst gevraagd, maar hetzelfde veld helpt bij andere kleine opmaakverbeteringen:
- Een element verbergen, bijvoorbeeld de datum onder berichten of de naam van de auteur, met een regel display: none. Het element staat nog in de code van de pagina, je ziet het alleen niet.
- Witruimte, als een kop aan een afbeelding plakt of knoppen op een telefoon te dicht bij elkaar staan.
- Lettergrootte op één plek, bijvoorbeeld de footer, zonder de hele typografie van het thema te wijzigen.
- Linkkleur in de inhoud van berichten, als de kleur van het thema te bleek is op een witte achtergrond.
- Mobiele opmaak, met een regel met een voorwaarde voor de schermbreedte die alleen op smalle schermen geldt.
Twee gewoonten besparen je over een paar maanden zoekwerk. Zet boven elke regel een opmerking tussen /* en */, bijvoorbeeld “groene knoppen, oktober 2026”. En houd al je aanpassingen op één plek, niet een deel in de Customizer, een deel in de stijlen van de editor en een deel in de instellingen van een paginabouwer. Dan zie je makkelijk welke regel wat doet, en haal je regels die je niet meer nodig hebt zonder zorgen weg.
Een waarschuwing over verbergen. Verberg je op deze manier tekst die voor klanten belangrijk is, bijvoorbeeld verzendkosten, dan verdwijnt die van het scherm, maar niet uit de verplichtingen van de webshop. Zulke inhoud verbeter je bij de bron.
Wanneer extra CSS niet genoeg is
Extra CSS verandert hoe dingen eruitzien, niet de inhoud of de HTML-structuur. Je kunt er geen nieuwe tekst mee aan de footer toevoegen of een knop naar een ander deel verplaatsen. Daarvoor heb je sjablonen in de site-editor nodig of bestanden in een WordPress child theme. Die staan beschreven in het WordPress Theme Handbook.
Verandert er na het opslaan niets terwijl de CSS klopt, dan ligt het vaak aan de cache. De volgorde om die te legen beschrijven we in het stuk WordPress-wijzigingen niet zichtbaar.
Zo wijzigt de chat CSS met een voorbeeld
Met de TellMyShop-plugin voor WordPress en WooCommerce leest je chat (Claude of ChatGPT) je huidige extra CSS en voegt hij een deel toe of vervangt hij het. Voor het opslaan controleert hij of de accolades kloppen, en hij waarschuwt je voor het laden van stijlen van andere domeinen. In een blokthema wijzigt hij ook kleuren en typografie in de globale stijlen.
Jij: De knoppen op de site zijn grijs, maak ze groen zoals het logo.
Je chat: Het thema is klassiek en de extra CSS heeft al twee regels. Ik voeg aan het eind toe:
Witte tekst op dit groen is leesbaar. Opslaan? (ja / nee)
Jij: Ja.
Je chat: Opgeslagen. Ik heb de homepage uitgelogd gecontroleerd: de knoppen zijn groen.
Status van de kaart: wacht op jouw “ja”nieuwe versie: .wp-block-button__link { background-color: #1f6f5c; color: #ffffff; }
nieuwe versie: .wp-block-button__link:hover { background-color: #17574a; }
Wijzigingen in CSS en globale stijlen werken in TellMyShop Pro zodra de schakelaar Thema in het pluginpaneel aan staat. De schakelaar geldt 24 uur en vraagt om een databaseback-up van vandaag. De chat maakt het voorbeeld ook als de schakelaar uit staat, en slaat pas op als hij aan staat en na jouw ‘ja’. De wijziging komt in de wijzigingsgeschiedenis en je maakt haar met één opdracht ongedaan.
De gratis versie TellMyShop Free leest en wijzigt de vormgeving van de site niet, dus bij deze taak helpt die weinig. Een beschrijving van beide versies vind je op de pagina TellMyShop voor WordPress en WooCommerce, en de prijzen op de pagina prijzen. Meer handleidingen staan op de blog.
Vragen en antwoorden
Verdwijnt extra CSS na een update van het thema?
Nee. WordPress bewaart extra CSS in de database, niet in de bestanden van het thema, dus een update raakt het niet. Het is wel gekoppeld aan het thema waarin je het hebt toegevoegd. Wissel je van thema, dan moet je het overzetten.
Ik heb CSS toegevoegd en er veranderde niets. Waarom?
Meestal past de selector niet bij het element, of is een regel van het thema sterker. De tweede veelvoorkomende oorzaak is cache, dus controleer de pagina in een privévenster. Kijk in een blokthema ook of je de CSS in de stijlen van de site-editor hebt toegevoegd en niet in het oude scherm Customizer.
Kan slechte CSS mijn site kapotmaken?
Het legt de site niet plat zoals een PHP-fout dat kan. Het kan wel een element verbergen, de opmaak breken of tekst een onleesbare kleur geven. Wijzig daarom één regel tegelijk en controleer de pagina meteen, ook op een telefoon.
Heb ik een plugin nodig om de kleur van een knop te wijzigen?
Nee. In een blokthema stel je de kleur van knoppen in bij de globale stijlen, en in een klassiek thema vaak in de themaopties onder Customizer. Extra CSS is handig als het thema zo’n optie niet heeft.
WordPress is een handelsmerk van de WordPress Foundation. WooCommerce is een handelsmerk van Automattic Inc. Claude is een handelsmerk van Anthropic PBC. ChatGPT en OpenAI zijn handelsmerken van OpenAI. TellMyShop is niet gelieerd aan deze bedrijven.