Een child theme maken

Module 5: Thema's en plugins · Leestijd: 9 minuten

Leerdoel: Na deze les kun je een child theme maken en weet je wanneer je er een nodig hebt en wanneer niet.

Kernbegrippen: child theme, parentthema, Template: in style.css, functions.php, wp_enqueue_style, sjabloon overschrijven, theme.json in een child, Create Block Theme

Het probleem dat een child theme oplost

Stel: je wilt de kop van je klassieke thema iets anders, en je past daarvoor header.php in de themamap aan. Het werkt. Drie weken later komt er een update van het thema, die je automatisch laat installeren (zoals het hoort, les 7.2). De update vervangt alle bestanden van het thema, en je aanpassing is weg.

Een child theme is een klein thema dat zegt: "gebruik alles van dat andere thema (het parentthema), behalve wat ik zelf heb." Je zet je aanpassingen in het child theme. Het parentthema blijf je gewoon bijwerken, en je aanpassingen blijven staan.

Wanneer wel en wanneer niet

Je hebt een child theme nodig als je bestanden van een thema wilt aanpassen of aanvullen:

• een sjabloon (bij een klassiek thema een PHP-bestand, bij een blokthema een HTML-sjabloon) anders wilt;
• eigen CSS wilt die te groot is voor het CSS-vakje;
• eigen PHP-code wilt die bij de vormgeving hoort (een extra afbeeldingsformaat, een extra menulocatie).

Je hebt geen child theme nodig als:

• je een blokthema aanpast in de Site-editor: die aanpassingen staan in de database en overleven een update (les 5.1);
• je alleen een beetje CSS toevoegt via Extra CSS (in de Customizer bij een klassiek thema, of bij Stijlen in de Site-editor);
• je een functie wilt toevoegen die niets met de vormgeving te maken heeft (een formulier, een koppeling). Die hoort in een plugin, zodat hij een themawissel overleeft.

Een child theme voor een klassiek thema

Een child theme is een map in wp-content/themes/ met minstens één bestand: style.css. Stel je parentthema staat in wp-content/themes/hoofdthema/. Maak dan een map wp-content/themes/hoofdthema-child/ met dit style.css:

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

/* Je eigen CSS komt hieronder. */
.site-header { border-bottom: 3px solid #e8a33d; }

De belangrijkste regel is Template:. Daar staat de naam van de map van het parentthema (niet de naam die je in het beheer ziet). Klopt die niet precies (hoofdletters, streepjes), dan meldt WordPress bij Weergave > Thema's dat het parentthema ontbreekt.

Daarnaast maak je een functions.php om de stylesheets te laden. De nette manier:

<?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 parentthema; sommige vragen je in het child ook de stylesheet van de parent te laden met get_template_directory_uri() . '/style.css'. Werkt je site na het activeren zonder opmaak, dan wordt de stylesheet van de parent niet geladen.

Wil je een sjabloon aanpassen, kopieer dan dat ene bestand (bijvoorbeeld header.php) van de parent naar je child en pas de kopie aan. WordPress kijkt eerst in het child, dan in de parent. Kopieer niet alle bestanden: dan krijg je de verbeteringen van de parent niet meer.

functions.php van het child vervangt die van de parent niet, maar wordt er vóór geladen. Beide worden uitgevoerd.

Een child theme voor een blokthema

Bij een blokthema werkt het hetzelfde, met blokbestanden:

• style.css met dezelfde kop en Template:;
• eventueel een eigen theme.json: die wordt samengevoegd met die van de parent, dus je zet er alleen in wat je wilt wijzigen (bijvoorbeeld het kleurenpalet);
• eventueel sjablonen in templates/ en parts/ die die van de parent vervangen.

Een functions.php is bij een blokthema vaak niet nodig, omdat WordPress de stijlen uit theme.json zelf laadt.

Er is een officiële plugin, Create Block Theme, die vanuit de Site-editor een child theme voor je maakt, inclusief je aanpassingen in de database. Handig als je een blokthema hebt aangepast en die aanpassingen in bestanden wilt vastleggen (bijvoorbeeld om ze naar een andere site mee te nemen).

Zo zet je het op je site

1. Maak de map en de bestanden op je eigen computer en controleer de map van het parentthema.
2. Upload de map naar wp-content/themes/ met Bestandsbeheer of via SFTP. Of pak de map in als zip en upload hem bij Weergave > Thema's > Nieuw thema > Thema uploaden.
3. Ga naar Weergave > Thema's. Je child theme staat erbij. Activeer het.
4. Controleer je site: menu's en widgets kunnen bij het wisselen naar een child opnieuw gekoppeld moeten worden; instellingen uit de Customizer gelden per thema, dus die zet je opnieuw of je exporteert ze met een plugin.
5. Het parentthema moet blijven staan. Verwijder het niet; het child werkt niet zonder.

Doe dit liefst eerst in een staging-omgeving (les 8.3), want het wisselen van thema op een drukke live site kan even rommelig zijn.

Samenvatting

• Een child theme bewaart je aanpassingen aan themabestanden buiten het parentthema, zodat updates ze niet overschrijven.
• Je hebt het niet nodig voor aanpassingen in de Site-editor of een beetje Extra CSS; functies horen in een plugin.
• Minimaal: een map met style.css waarin Template: precies de map van het parentthema noemt.
• Kopieer alleen de sjablonen die je echt aanpast; functions.php van het child komt naast die van de parent.
• Het parentthema blijft staan en blijft bijgewerkt worden.

Quiz

Opdracht

Opdracht A5.2: Je child theme controleren. Maak een child theme voor je thema, op je testsite of in staging (les 8.3), en activeer het. Vul het adres van de site en de mapnaam van het child theme in. Het programma vraagt wp-content/themes/<map>/style.css op en controleert: het bestand bestaat, er staat een Theme Name: en een Template: in, de style.css van de parent in die map bestaat ook, en de homepage verwijst naar het child theme (het is dus actief).

Opdracht D5.2: Wat heb je aangepast en waarom? Noteer welke bestanden er in je child theme staan, wat je in elk bestand hebt aangepast en waarom dat niet in de Site-editor, in Extra CSS of in een plugin kon. Vink aan dat het parentthema nog geïnstalleerd is en automatische updates heeft.

Verder lezen

Deze artikelen beschrijven de stappen in de panelen van WebOké; in andere panelen werken ze vergelijkbaar.

• DirectAdmin handleiding 11.1: Bestandsbeheer openen: de mappen in je pakket
• DirectAdmin handleiding 11.2: Bestanden uploaden en downloaden
• DirectAdmin handleiding 11.7: Verbinden met FileZilla (FTP, FTPS en SFTP)
• Child themes (developer.wordpress.org, Engels): https://developer.wordpress.org/themes/advanced-topics/child-themes/