WordPress Child Theme Maken: Stap-voor-Stap Handleiding [2025]

Wil je aanpassingen maken aan je WordPress thema zonder het risico dat deze verloren gaan bij een update? Dan heb je een child theme nodig. In deze uitgebreide handleiding leer je precies wat een child theme is, waarom je er een nodig hebt, en hoe je er zelf een maakt.

Wat is een WordPress Child Theme?

Een child theme is een thema dat de functionaliteit en styling van een ander thema (het parent theme) overneemt, maar je eigen aanpassingen toestaat zonder het originele thema te wijzigen.

Hoe Werkt het?

Het child theme "erft" alles van het parent theme
Aanpassingen in het child theme hebben voorrang
Bij een update van het parent theme blijven je aanpassingen behouden
Je hoeft alleen de bestanden te maken die je wilt aanpassen

Waarom Heb Je een Child Theme Nodig?

Update-veiligheid: Wanneer je het parent theme direct aanpast en er komt een update, worden al je wijzigingen overschreven. Met een child theme blijven je aanpassingen behouden.

Georganiseerde code: Al je aanpassingen staan op één plek, gescheiden van de originele themabestanden.

Makkelijk terugdraaien: Gaat er iets mis? Deactiveer het child theme en alles is weer zoals het was.

Leren en experimenteren: Je kunt veilig experimenteren zonder het originele thema te beschadigen.

Benodigdheden

Voordat je begint, zorg dat je het volgende hebt:

FTP-toegang of toegang tot je hostingpanel (bestandsbeheer)
Een teksteditor (VS Code, Notepad++, of zelfs Kladblok)
Het parent theme geïnstalleerd en geactiveerd
Basiskennis van CSS is handig maar niet vereist

Stap 1: Maak de Child Theme Map

Navigeer naar /wp-content/themes/ in je WordPress installatie en maak een nieuwe map aan.

Naamgeving

De conventie is: [parent-theme-naam]-child

Voorbeelden:

Voor Astra: astra-child
Voor GeneratePress: generatepress-child
Voor Twenty Twenty-Four: twentytwentyfour-child

Stap 2: Maak style.css

In je nieuwe child theme map, maak een bestand style.css met de volgende inhoud:

/*
Theme Name: Astra Child
Theme URI: https://jouwwebsite.nl
Description: Child theme voor Astra
Author: Jouw Naam
Author URI: https://jouwwebsite.nl
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

Belangrijke Velden Uitgelegd

Theme Name: De naam die verschijnt in WordPress
Template: DE EXACTE mapnaam van het parent theme (hoofdlettergevoelig!)
Version: Jouw versienummer
Text Domain: Voor vertalingen

Let Op!

De Template waarde moet exact overeenkomen met de mapnaam van het parent theme. Check dit in /wp-content/themes/. Als het parent theme in de map astra staat, dan is Template: astra.

Stap 3: Maak functions.php

Maak een bestand functions.php in je child theme map:

<?php
/**
 * Astra Child Theme Functions
 */

// Laad parent en child theme stylesheets
function astra_child_enqueue_styles() {
    // Parent theme stylesheet
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Child theme stylesheet
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
}
[add_action](/kennisbank/wordpress-hooks-uitleg)('wp_enqueue_scripts', 'astra_child_enqueue_styles');

Waarom Deze Code?

get_template_directory_uri(): Verwijst naar het parent theme
get_stylesheet_directory_uri(): Verwijst naar het child theme
De afhankelijkheid array('parent-style') zorgt dat de parent stylesheet eerst laadt
Zo kunnen jouw CSS-regels de parent regels overschrijven

Stap 4: Activeer het Child Theme

Ga naar Weergave → Thema's in je WordPress dashboard
Je zou je child theme moeten zien
Klik op Activeren
Check of je website er nog goed uitziet

Geen Afbeelding?

Voeg een screenshot.png (1200x900 pixels) toe aan je child theme map voor een preview afbeelding.

CSS Aanpassingen Maken

Nu kun je veilig CSS toevoegen aan je child theme's style.css:

/*
Theme Name: Astra Child
... (header info) ...
*/

/* Jouw aanpassingen hieronder */

/* Voorbeeld: Verander de header achtergrondkleur */
.site-header {
    background-color: #2c3e50;
}

/* Voorbeeld: Grotere heading fonts */
h1, h2, h3 {
    font-family: 'Georgia', serif;
    font-weight: 700;
}

/* Voorbeeld: Aangepaste button styling */
.button, button, input[type="submit"] {
    background-color: #e74c3c;
    border-radius: 25px;
    padding: 12px 24px;
}

Template Bestanden Aanpassen

Wil je een template bestand aanpassen (zoals header.php)?

Stappen

Kopieer het bestand van het parent theme naar je child theme
Pas het gekopieerde bestand aan
WordPress gebruikt automatisch jouw versie

Voorbeeld: Om header.php aan te passen:

Kopieer wp-content/themes/astra/header.php
Naar wp-content/themes/astra-child/header.php
Pas het gekopieerde bestand aan

Functies Toevoegen of Overschrijven

In functions.php van je child theme kun je functies toevoegen:

<?php
// ... bestaande code ...

// Voeg een custom logo grootte toe
add_theme_support('custom-logo', array(
    'height'      => 100,
    'width'       => 300,
    'flex-height' => true,
    'flex-width'  => true,
));

// Voeg een nieuw widget area toe
function child_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'Extra Sidebar',
        'id'            => 'extra-sidebar',
        'description'   => 'Een extra sidebar voor speciale paginas',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'child_theme_widgets_init');

Veelgemaakte Fouten

Fout 1: Verkeerde Template Naam

De Template waarde in style.css moet exact de mapnaam zijn, niet de thema naam.

Fout: Template: Astra Theme Goed: Template: astra

Fout 2: Parent Stylesheet Niet Geladen

Als je website er gebroken uitziet, controleer of de parent stylesheet correct wordt geladen in functions.php.

Fout 3: PHP Syntax Errors

Een vergeten ; of } kan je hele website breken. Test lokaal of maak een backup.

Fout 4: Bestanden op Verkeerde Plek

Zorg dat alle bestanden in je child theme map staan, niet in het parent theme.

Best Practices

1. Maak Altijd een Backup

Voordat je begint met een child theme, maak een backup van je website.

2. Documenteer Je Wijzigingen

Voeg comments toe aan je code zodat je later weet wat je hebt aangepast:

/* Aangepast op 15-01-2025: Header kleur naar blauw per verzoek klant */
.site-header {
    background-color: #3498db;
}

3. Test Grondig

Na elke wijziging, test je website op:

Desktop en mobiel
Verschillende browsers
Verschillende pagina's

4. Gebruik Versiebeheer

Overweeg Git te gebruiken om je wijzigingen bij te houden.

Child Theme via Plugin

Geen zin om handmatig te werken? Er zijn plugins die het voor je doen:

Child Theme Configurator: Meest populaire optie
Generate Child Theme: Simpel en snel
One-Click Child Theme: Zoals de naam zegt

Hoewel deze plugins handig zijn, is het goed om te begrijpen wat er onder de motorkap gebeurt.

Veelgestelde vragen

Is dit geschikt voor beginners? Dit onderwerp kan technisch lijken, maar met de juiste aanpak en tools is het voor iedereen toegankelijk. Begin met de basis en bouw van daaruit verder.

Wat zijn de kosten? De kosten variëren sterk afhankelijk van je behoeften en gekozen oplossingen. Gratis opties bestaan, maar betaalde alternatieven bieden vaak meer features, support en betrouwbaarheid.

Hoe lang duurt implementatie? Van een paar minuten voor eenvoudige setups tot dagen of weken voor complexe implementaties. Plan realistisch en test grondig voordat je live gaat.

Wat als ik hulp nodig heb? De meeste providers bieden support via chat, e-mail of telefoon. Online communities en documentatie zijn ook waardevolle bronnen.

Best practices

Documenteer je configuratie zodat je later weet wat je hebt ingesteld en waarom. Dit versnelt troubleshooting en overdracht.

Test voordat je live gaat in een staging-omgeving. Voorkom onverwachte problemen voor je bezoekers.

Houd alles up-to-date voor de beste beveiliging en performance. Stel herinneringen in voor regelmatig onderhoud.

Maak backups voordat je grote wijzigingen doorvoert. Een goede backup bespaart je uren werk bij problemen.

Monitor je systemen zodat je problemen vroeg ontdekt. Uptime-monitoring en loganalyse zijn essentieel.

Volgende stappen

Na het implementeren van bovenstaande is het verstandig om:

Alles te testen via verschillende apparaten en browsers
Performance te meten met tools zoals GTmetrix of PageSpeed Insights
Documentatie bij te werken met je specifieke configuratie
Team te informeren over wijzigingen en nieuwe procedures
Monitoring in te richten voor proactief onderhoud

Meer informatie: WordPress.org documentatie

WordPress child theme maken: stap-voor-stap handleiding