Een child theme maken voor je WordPress-thema

Pas je bestanden van een thema direct aan, dan is je werk weg bij de volgende update van dat thema. Een child theme voorkomt dat. Het is een klein thema dat alles overneemt van een ander thema, het parentthema, behalve wat je er zelf in zet. Het parentthema blijf je gewoon bijwerken. Hier lees je wanneer je een child theme nodig hebt en hoe je er een maakt met Bestandsbeheer in DirectAdmin.

Heb je het nodig?

Gebruik je een blokthema? Probeer het dan eerst in de Site-editor. Wil je je aanpassingen uit de Site-editor in bestanden vastleggen, dan kan de officiële plugin Create Block Theme een child theme voor je maken.

Stap 1: zoek de map van je parentthema

1. Open in DirectAdmin Bestandsbeheer. Zie Bestandsbeheer openen: de mappen in je pakket.
2. Ga naar domains/example.com/public_html/wp-content/themes.
3. Noteer de precieze naam van de map van je thema, bijvoorbeeld hoofdthema. Het gaat om de mapnaam, niet om de naam die je in WordPress ziet.

Stap 2: maak de map en style.css

1. Klik in de map themes op Nieuwe Map en maak bijvoorbeeld hoofdthema-child.
2. Open die map, klik op Nieuw Bestand en maak style.css.
3. Klik met de rechtermuisknop op het bestand, kies Bewerken, plak de kop hieronder en klik op Opslaan.

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Eigen aanpassingen voor example.com
Version:      1.0.0
*/

/* Je eigen CSS komt hieronder. */

De regel Template: is de belangrijkste. Daar moet precies de mapnaam van het parentthema staan, met dezelfde hoofdletters en streepjes. Klopt die niet, dan meldt WordPress dat het parentthema ontbreekt.

Stap 3: functions.php of theme.json

Klassiek thema: maak in dezelfde map een functions.php die je stylesheet laadt:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Of het parentthema zijn eigen stylesheet zelf laadt, verschilt per thema. Kijk in de documentatie van je thema. Ziet je site er na het activeren kaal uit, dan moet je de stylesheet van de parent ook laden, met get_template_directory_uri() . '/style.css'. De functions.php van het child vervangt die van de parent niet: beide worden geladen, het child eerst. Kopieer daarom nooit functies uit de functions.php van de parent, want dubbele functienamen geven een kritieke fout.

Blokthema: een functions.php is meestal niet nodig. Wil je bijvoorbeeld het kleurenpalet anders, maak dan een eigen theme.json. WordPress voegt die samen met die van de parent, dus je zet er alleen in wat je wilt wijzigen.

Wil je een sjabloon aanpassen, kopieer dan alleen dat ene bestand van de parent naar dezelfde plek in je child en pas de kopie aan. WordPress kijkt eerst in het child en daarna in de parent. Kopieer niet alles, anders krijg je verbeteringen van de parent niet meer.

Stap 4: activeren

1. Ga in WordPress naar Weergave > Thema's. Je child theme staat erbij. Klik op Activeren.
2. Bekijk je site: kop, menu's, widgets en kleuren. Zet zo nodig menu's en Customizer-instellingen opnieuw.
3. Laat het parentthema staan en houd het bijgewerkt. Zonder parent werkt het child niet.

Maak je het child theme liever op je eigen computer? Pak dan de map in als zip en upload hem in WordPress bij Weergave > Thema's met de knop Thema toevoegen en daarna Thema uploaden. Of upload de map met Bestandsbeheer of SFTP naar wp-content/themes, zie Bestanden uploaden en downloaden.

Terug naar het oude thema

Activeer bij Weergave > Thema's weer het parentthema. Kom je door een fout in je child niet meer in het beheer, hernoem dan in Bestandsbeheer de map van het child, bijvoorbeeld naar hoofdthema-child-uit. WordPress valt dan terug op een standaardthema, als dat nog is geïnstalleerd. Meer daarover in Fout 500 of "kritieke fout" op je website (ook na een WordPress-update).

Verder lezen

• Child themes op developer.wordpress.org (Engels)

Meer leren? Volg de gratis WordPress-cursus, les 5.2 Een child theme maken.