Of je nu een thema aanpast, een dashboard vol plugin’s probeert op te ruimen of gewoon wilt dat je blog er op elk scherm goed uitziet, CSS is nog steeds een van de snelste manieren om dingen gedaan te krijgen in WordPress zonder de zoveelste plugin te installeren.
Maar laten we eerlijk zijn: niet elke WordPress gebruiker heeft tijd om door de stylesheets van het thema te spitten of de eigenaardigheden van de Block Editor te ontcijferen. Daarom hebben we deze lijst samengesteld met praktische, tijdbesparende CSS tips, speciaal ontworpen voor WordPress.
Dit zijn geen algemene trucs. In plaats daarvan kunnen ze je helpen bij het oplossen van veel voorkomende frustraties van bloggers, site-eigenaren, ontwikkelaars en freelancers die elke dag met WordPress werken.
Deze gids legt uit hoe je:
- Problemen met sticky headers oplost met anchorlinks
- Lange berichtlijsten kunt versnellen met moderne layouttechnieken
- Het inlogscherm aanpassen zonder plugin
- Opgeblazen plugin UI elementen verbergen
- En meer…
Of je nu een klassiek thema, een op blokken gebaseerd thema of een builder gebruikt, deze tips kunnen je helpen je werkstroom te stroomlijnen en je prestaties te verbeteren, en dat alles met een paar regels CSS.
1. Problemen met anchorlinks oplossen bij sticky headers
Heb je wel eens op een link geklikt die naar een deel van een pagina verankerd was, maar dat de doelheader verborgen was achter je sticky navbar? Dat is een veel voorkomend probleem in WordPress. Het komt meestal voor bij lange berichten die gebruik maken van inhoudsopgave-plugins.
De meeste thema’s gebruiken position: sticky of fixed voor navigatiebalken, die de bovenkant van de pagina overlappen. Als een gebruiker op een anchorlink klikt (zoals #faq of #pricing), dan scrollt de browser die sectie helemaal naar boven, recht onder de navigatiebalk.
Je kunt dit oplossen door de CSS property scroll-margin-top te gebruiken. Deze voegt ruimte toe boven de header, zodat deze niet vast komt te zitten onder de sticky navbar.
h2, h3 {
scroll-margin-top: 80px;
}Je kunt de waarde het beste afstemmen op de hoogte van je header. Als je sticky navbar 64px hoog is, gebruik dan scroll-margin-top: 64px of iets meer. Pas het toe op de headerniveaus die je gebruikt in anchorlinks – meestal h2 of h3.
2. Focussen op specifieke WordPress adminpagina’s met <body> klassen
Veel WordPress plugins maken de admininterface onoverzichtelijk met upsellberichten, banners of stijlloze elementen. Maar het is niet altijd praktisch om ze sitebreed te verwijderen of aan te passen, vooral niet als je alleen wijzigingen wilt aanbrengen op een specifieke pagina zoals WooCommerce instellingen of een custom post type editor.
WordPress voegt automatisch contextbewuste klassen toe aan de <body> tag op beheerpagina’s. Deze omvatten pagina slugs, berichttypes en menu-item referenties – en ze zijn ongelooflijk handig voor het schrijven van scoped CSS die alleen van toepassing is waar nodig.
Stel bijvoorbeeld dat je meldingen wilt verbergen op alleen de WooCommerce instellingenpagina.
body.toplevel_page_woocommerce .notice {
display: none;
}Om deze klassen te vinden, open je de WordPress admin, klik je met de rechtermuisknop en kies je Inspect (of druk je op Cmd+Option+I / Ctrl+Shift+I). Zoek naar de <body> tag – deze bevat verschillende handige klassen.
Dit kun je bijvoorbeeld uit een dashboardscherm halen:
<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">Enkele veelvoorkomende klassen die je zou kunnen zien:
post-type-product: WooCommerce product editoredit-tags-php: Categorie-/tagbeheersettings_page_yoast: Yoast SEO instellingentoplevel_page_woocommerce: Hoofdpagina WooCommerce instellingen
Om deze in je CSS te gebruiken, moet je een aangepast admin stylesheet enqueuen. Je kunt ze niet toevoegen via de Customizer – dat heeft alleen invloed op de front-end.
Voeg dit toe aan functions.php van je thema:
function my_custom_admin_styles() {
wp_enqueue_style(
'my-admin-css',
get_stylesheet_directory_uri() . '/admin.css'
);
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');Maak dan een bestand met de naam admin.css in je themamap en voeg daar je scoped stijlen toe.
3. Responsieve rasters maken zonder paginabouwer
Paginabouwers maken layout gemakkelijk, maar ze voegen ook bloat toe. Als je werkt met een klassiek thema (zoals Astra of GeneratePress) of zelfs je eigen bloktemplate maakt, kun je met CSS grids sneller en netter een responsieve layout maken.
Dit is vooral handig voor:
- Rasters voor blogartikel op home- of archiefpagina’s
- Aangepaste berichten zoals evenementen, teamleden of getuigenissen
- WooCommerce productlay-outs zonder overschrijven van templatebestanden
Je kunt dit eenvoudig toevoegen aan het stylesheet van je childthema (of enqueue via functions.php):
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}Wrap je loop dan in een container zoals deze:
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<div class="post-card">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; ?>
</div>Deze CSS maakt automatisch zoveel kolommen als er passen, zorgt ervoor dat elk item minstens 280px breed is en klapt in tot minder kolommen op kleinere schermen – geen media queries of plugin nodig.
4. Gebruiken van clamp() voor responsieve lettergroottes zonder media queries
Ontwerpen voor meerdere schermformaten betekent vaak jongleren met lettergroottes met media queries. Maar media queries kunnen rommelig worden, vooral als je te maken hebt met meerdere breekpunten of consistent wilt schalen op verschillende apparaten.
Dat is waar clamp() van pas komt, een moderne CSS-functie waarmee je een vloeiende waarde kunt definiëren tussen een minimale, gewenste en maximale grootte – allemaal in één regel.
Dit is de basisopmaak:
font-size: clamp(min, preferred, max);Het laat de browser de lettergrootte automatisch aanpassen op basis van de viewport breedte, zonder dat er aparte media queries nodig zijn.
De meeste WordPress thema’s (vooral blokthema’s) bevatten vloeiend ontwerp. Maar de Block Editor van Gutenberg geeft je niet altijd volledige controle over het schalen van lettertypen, vooral voor dingen zoals:
- Hoofdkoppen van herosecties
- Aanbevolen berichttitels
- Paginalayouts op volledige breedte
In plaats van het hardcoden van meerdere lettergroottes met media queries, biedt clamp() standaard schonere code, minder herhaling en betere responsiviteit. Je kunt het gebruiken voor koppen, knoppen, blokcitaten, enz. binnen aangepaste blokstijlen via theme.json of editor-style.css.
h1 {
font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}clamp() wordt ondersteund in alle moderne browsers. Het is veilig om te gebruiken op alle WordPress projecten, tenzij je je richt op extreem verouderde bedrijfsbrowsers (bijvoorbeeld Internet Explorer 11, die WordPress zelf niet meer ondersteunt).
5. De prestaties verbeteren op lange pagina’s met content-zichtbaarheid
Als je homepagina een lijst met blogberichten bevat, je winkelpagina tientallen producten laadt of je een aangepaste query gebruikt om getuigenissen te tonen, ben je waarschijnlijk al tegen prestatieproblemen aangelopen, vooral op mobiel. Die vertraging die je voelt bij het scrollen door een lange lijst? Dan doet de browser meer werk dan nodig is.
De CSS property content-visibility kan helpen door de browser te vertellen: “Geef dit element pas weer als het in beeld scrolt.”
.article-card {
content-visibility: auto;
contain-intrinsic-size: 400px;
}Het is als lazy-loading voor HTML-elementen, waardoor de layout- en paintingkosten voor content buiten het scherm worden verminderd. De contain-intrinsic-size geeft de browser een geschatte hoogte om ruimte te reserveren, zodat de layout niet verschuift als de inhoud wordt geladen.
Je kunt dit doen door een klasse zoals .article-card of .product-card toe te voegen aan elk loop-item bij het bewerken van een thema, en vervolgens de CSS in het stylesheet van je childthema te plaatsen of te enqueuen via functions.php.
Als je Gutenberg gebruikt, kun je een aangepaste klasse aan het blok toevoegen (in de Advanced settings) en deze vervolgens targeten in de sectie Additional CSS of je themabestand.
6. !important spaarzaam maar slim gebruiken bij het overschrijven van pluginstijlen
In de meeste WordPress projecten probeer je iets te stijlen, maar er gebeurt niets. Je schrijft de regel, controleert je selector, vernieuwt… en nog steeds winnen de oorspronkelijke stijlen van de plugin.
Dat komt omdat veel WordPress plugins stijlen toevoegen met:
- Hoge specificiteit (lange klassechains)
- Inline
styleattributen - Stylesheets die laden na de jouwe
In plaats van complexe selectors na te jagen, is de strakkere oplossing vaak om gewoon !important te gebruiken als dat gerechtvaardigd is.
Contact Form 7 gebruikt bijvoorbeeld specifieke klassen zoals .wpcf7-form-control, maar de standaard stijlen kunnen moeilijk te overschrijven zijn zonder !important.
Zo rond je de formulier-entries af:
input.wpcf7-form-control {
border-radius: 6px !important;
}Het is belangrijk om het bewust te gebruiken. In plaats van !important overal rond te strooien, isoleer je overrides in een speciale admin of plugin-fix stylesheet. Dit houdt de CSS van je hoofdthema schoon en voorkomt onbedoelde conflicten later.
Als je met sites van klanten werkt, helpt deze aanpak je om agressieve plugin-stijlen te temmen zonder dat je templates hoeft te forken of nog een plugin hoeft toe te voegen.
7. :where() gebruiken om blokstijlen te overschrijven zonder specificiteitsproblemen te krijgen
Als je ooit hebt geprobeerd om de standaard styling van Gutenberg blokken aan te passen, dan ken je de pijn: WordPress core en blokgebaseerde thema’s worden vaak geleverd met extreem specifieke selectors. Zelfs kleine veranderingen zoals het aanpassen van de marges van knoppen of het verwijderen van blokafstanden vereisen complexe overrides of veel trial and error.
Je kunt dit oplossen door gebruik te maken van de :where() pseudo-class, een CSS selector wrapper die altijd nul specificiteit heeft, ongeacht wat je erin zet.
:where(.wp-block-button) {
margin-bottom: 0;
}Dit past een stijl toe op .wp-block-button, maar in tegenstelling tot een normale selector “concurreert” het niet met andere CSS regels, waardoor het veilig en flexibel is.
Laten we zeggen dat je werkt aan een site met een blokthema (zoals Twenty Twenty-Four of Astra’s blokstarter). Je wilt extra marge onder knoppen verwijderen:
.wp-block-button {
margin-bottom: 0;
}Maar dit werkt misschien niet omdat WordPress core of het thema een meer specifieke regel kan hebben, zoals:
.entry-content .wp-block-button:not(.is-style-outline) {
margin-bottom: 1.5rem;
}Je kunt meer specificiteit toevoegen (fragile), !important gebruiken (heavy-handed) of :where() gebruiken om beter onderhoudbare CSS te schrijven die goed interacteert met de rest van je code.
8. Het inlogscherm van WordPress aanpassen zonder plugin
Wil je je logo toevoegen aan de inlogpagina? De achtergrondkleur veranderen? De lettertypen of knopstijlen aanpassen? Daar heb je geen plugin voor nodig. WordPress maakt het eenvoudig om het inlogscherm aan te passen met je eigen CSS. Alles wat je nodig hebt is één actiehook.
Je hoeft alleen maar een aangepast stylesheet te enqueuen met de login_enqueue_scripts hook:
function custom_login_styles() {
wp_enqueue_style(
'my-login-styles',
get_stylesheet_directory_uri() . '/login.css'
);
}
add_action('login_enqueue_scripts', 'custom_login_styles');Dan kun je in je login.css bestand stijlen als deze toevoegen:
body.login {
background-color: #f9f9f9;
}
.login h1 a {
background-image: url('/wp-content/uploads/your-logo.png');
background-size: contain;
width: 100%;
height: 80px;
}
.login #loginform {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}Dit geeft je site een professioneel tintje en voorkomt de zoveelste plugin die maar één ding doet.
9. Voorkomen dat afbeeldingen je layout verpesten
Het toevoegen van een afbeelding die te breed is voor de container kan een WordPress layout in de soep laten lopen, vooral bij klassieke thema’s of pagina’s/artikels. Als de afbeelding niet wordt beperkt door CSS, kan deze zijn bovenliggende element overlappen en horizontale scroll of verkeerd uitgelijnde secties veroorzaken.
Dit gebeurt meestal wanneer:
- Een inhoudseditor een afbeelding plakt zonder de uitlijning of grootte in te stellen
- Een thema geen standaard responsieve afhandeling van afbeeldingen heeft
- Je afbeeldingen toevoegt in aangepaste blokken of bestaande shortcodes
Om dit op te lossen moet je een maximale breedte instellen en het layoutgedrag resetten:
img {
max-width: 100%;
height: auto;
display: block;
}Dit is wat dit doet:
max-width: 100%: Zorgt ervoor dat de afbeelding nooit zijn container overlooptheight: auto: Behoudt de oorspronkelijke afbeeldingsverhoudingdisplay: block: Verwijdert onverwachte gaten onder afbeeldingen die worden veroorzaakt door inline layout standaardinstellingen
Je kunt hetzelfde patroon toepassen om video’s te beperken:
iframe {
max-width: 100%;
height: auto;
display: block;
}Of gebruik een wrapper met aspect-ratio als je thema moderne CSS ondersteunt.
Samenvatting
CSS lijkt op zichzelf misschien geen game-changer, maar in WordPress kunnen een paar goed geplaatste regels uren frustratie besparen.
Of je nu layouts aanpast, het admin dashboard opschoont of de prestaties van de voorkant verbetert, de tips in deze gids zijn bedoeld om je te helpen slimmer te werken, niet harder.
Maar zelfs met de meest geoptimaliseerde CSS kom je niet verder. Om je frontend verbeteringen echt te laten schitteren met snel ladende pagina’s, stabiele lay-outs en vloeiende interactiviteit, heb je ook een hostingplatform nodig dat gebouwd is voor prestaties.
Bij Kinsta is onze infrastructuur ontworpen om deze optimalisaties aan te vullen, met ingebouwde afbeeldingsoptimalisatie, edge caching, CDN-ondersteuning en prestaties die op serverniveau zijn afgestemd op WordPress.
Dus, terwijl deze CSS-trucs je helpen te bepalen hoe je site eruit ziet en aanvoelt, helpt Kinsta ervoor te zorgen dat hij laadt en presteert zoals je gebruikers verwachten.
