Hoe voeg je een aangepaste body-klasse toe aan specifieke pagina’s met Astra Pro

Wil je unieke CSS-stijlen toepassen op specifieke pagina’s van je WordPress-site?
De schoonste methode is het toevoegen van een aangepaste klasse aan de <body>-tag — zo kun je die pagina’s precies targeten met CSS.
Door de onderstaande stappen te volgen, kun je met de functie Custom Layouts van Astra Pro een aangepaste body-klasse toevoegen aan elke pagina (of groep pagina’s) — zonder enige programmeerkennis.

Overzicht

WordPress voegt al automatisch enkele klassen toe aan de body (zoals page-id-42), maar soms heb je een
schone, betekenisvolle klasse zoals special-page nodig die je zelf beheert.
De Custom Layouts-functie van Astra Pro stelt je in staat een klein JavaScript-fragment in specifieke pagina’s te injecteren,
dat je aangepaste klasse toevoegt aan de body bij het laden van de pagina.

Werkstroom:

[Astra Pro → Custom Layouts] → [JavaScript-fragment] → [Geïnjecteerd via wp_head hook] → [Body-klasse toegevoegd bij DOMContentLoaded]

Stap 1. Custom Layouts openen in Astra Pro

1. Log in op het WordPress-beheerdashboard.
2. Ga naar Weergave → Astra Options.
3. Zoek de module Custom Layouts en klik op Settings.
4. Klik op Add New.

Als je Custom Layouts niet ziet, moet het mogelijk eerst worden ingeschakeld.
Ga naar Weergave → Astra Options → Astra Addons en zet de schakelaar voor Custom Layouts aan.

Stap 2. Het Custom Layout configureren

Je ziet nu een nieuw bewerkingsscherm. Vul het volgende in:

1. Voeg een Titel toe als eigen referentie (bijv. Body Class - Speciale Pagina's).
2. Klik in de editor op het tabblad Code en plak het volgende fragment:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Vervang special-page door de gewenste klassenaam.

Stap 3. De Hook instellen

Scroll naar beneden om het paneel Layout Settings te vinden en configureer:

Layout → Hook
Action → wp_head
Priority → 10

Belangrijk: Hoewel het script wordt geïnjecteerd in de <head>,
wordt het pas uitgevoerd als de DOM volledig is geparseerd — omdat we het hebben ingepakt in
document.addEventListener('DOMContentLoaded', ...).
Dit garandeert dat document.body bestaat wanneer de klasse wordt toegevoegd,
en het wordt eerder uitgevoerd dan wp_footer, waardoor een flits van niet-gestijlde inhoud wordt voorkomen.

Stap 4. Weergavevoorwaarden instellen

Zoek nog steeds in het paneel Layout Settings naar Display On en selecteer de pagina’s
waarop je de body-klasse wilt laten verschijnen.

Je kunt kiezen uit voorwaarden zoals:

Specific Page — richt zich op een of meer afzonderlijke pagina’s op naam
All Pages — van toepassing op alle pagina’s van de site
Front Page — alleen de startpagina
Page Template — alle pagina’s die een specifieke sjabloon gebruiken

Je kunt meerdere pagina’s tegelijk toevoegen in één Custom Layout,
wat veel efficiënter is dan voor elke pagina een apart layout te maken.

Stap 5. Publiceren

Zodra de hook-instellingen en weergavevoorwaarden zijn ingesteld, klik je op Publish in de rechterbovenhoek.

Stap 6. Controleren of het werkt

Bezoek een van de pagina’s die je hebt geselecteerd bij Display On.
Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren (of druk op F12).
Zoek op het tabblad Elements de <body>-tag.
Bevestig dat je aangepaste klasse verschijnt in de klassenlijst:

<body class="home page-template-default ... special-page">

Let op: Gebruik niet Paginabron bekijken om te controleren —
dat toont de onbewerkte HTML voordat JavaScript wordt uitgevoerd, dus de klasse verschijnt daar niet.
Gebruik altijd Element inspecteren om de live DOM te zien na de uitvoering van JavaScript.

Gebruik het in je CSS

Je kunt die pagina’s nu specifiek targeten in je CSS:

/* Alleen van toepassing op pagina's met de body-klasse special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Voeg dit toe via Weergave → Aanpassen → Aanvullende CSS of in het stylesheet van je child-thema.

Probleemoplossing

Klasse verschijnt niet? Zorg ervoor dat je controleert met Element inspecteren, niet met Paginabron bekijken.
Werkt het nog steeds niet? Wis de browsercache en de cache van eventuele cachingplugins, en laad dan opnieuw.
Gebruik je Cloudflare? Verwijder ook de Cloudflare-cache voor die pagina.
Klasse verschijnt op verkeerde pagina’s? Controleer nogmaals de Display On-voorwaarden in het Custom Layout.

Conclusie

Je hebt nu een eenvoudige en betrouwbare manier om een aangepaste body-klasse toe te voegen aan specifieke WordPress-pagina’s
met Astra Pro — zonder functions.php aan te raken of aangepaste paginasjablonen te maken.

Procesoverzicht:
Custom Layouts → JavaScript-fragment → wp_head hook → Weergavevoorwaarden → Aangepaste body-klasse ✅

Deze aanpak is vooral handig wanneer je unieke stijlen wilt toepassen op een groep pagina’s
zonder de rest van je site te beïnvloeden. Schoon, gericht en eenvoudig te beheren.