Les 4: Child themes in Divi 5

Child themes werken in Divi 5 anders dan in Divi 4. De structuur is vereenvoudigd en sluit dichter aan bij de WordPress-standaard. In deze les leer je een Divi 5 child theme aanmaken en begrijp je de verschillen met Divi 4.

Divi 5 child theme structuur

Een Divi 5 child theme heeft een vergelijkbare basisstructuur als elk WordPress child theme, maar er zijn belangrijke verschillen ten opzichte van Divi 4.

In Divi 4 laadde het child theme de parent CSS via een @import regel in style.css. In Divi 5 gebruik je functions.php om de parent stylesheet correct te laden:

/*
Theme Name:  Divi 5 Child
Template:    Divi
Version:     1.0.0
*/

En in functions.php:

<?php
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'divi-parent-style',
        get_template_directory_uri() . '/style.css'
    );
});

CSS toevoegen in Divi 5

Voeg je eigen CSS toe aan style.css van het child theme, ná de theme header. Divi 5 genereert zijn stijlen via het Design System en als aparte CSS-bestanden — je eigen CSS in het child theme laadt daarna en kan die overschrijven.

Handige aanpak: gebruik CSS custom properties (variabelen) die Divi 5 definieert in zijn Design System, zodat jouw aanpassingen meebewegen met de globale stijlen:

/* Gebruik Divi 5's eigen CSS-variabelen */
:root {
    --et-primary-color: #0070c9;
}

/* Eigen aanpassingen */
.et_pb_section {
    /* Aanpassing hier */
}

Divi 4 vs Divi 5 child themes: niet uitwisselbaar

Een Divi 4 child theme werkt niet op een Divi 5-installatie en vice versa. De thema-architectuur is fundamenteel anders. Als je een bestaand Divi 4 child theme project naar Divi 5 wilt migreren, moet je het child theme opnieuw opbouwen.

Toewijzing voor bestaande klanten: controleer altijd welke Divi-versie op de site draait voordat je CSS-aanpassingen maakt — Divi 4 en Divi 5 gebruiken andere selectors.

Template overrides

Net als in Divi 4 kun je PHP-template-bestanden van Divi overschrijven in je child theme. Kopieer het bestand van wp-content/themes/Divi/ naar wp-content/themes/divi-child/ met dezelfde mappenstructuur. WordPress gebruikt automatisch de child theme-versie.

Gebruik dit spaarzaam — templateoverschrijvingen kunnen breken na een Divi-update als de structuur van het originele bestand verandert.

Opdracht

Maak een Divi 5 child theme aan met de juiste style.css en functions.php. Activeer het en controleer of de site er nog hetzelfde uitziet. Voeg drie CSS-aanpassingen toe en controleer of ze bewaard blijven na het klikken op “Nu updaten” bij een beschikbare Divi-update.