Wanneer gebruik je een Child thema?

Datum aanpassing 1 april 2023 

waarom een Child themE

Als je niet wilt dat bij een update je wijzingen van het hoofdthema overschreven worden, zet dan een Child theme in. Dit zijn wijzigingen die niet via de gebruikelijk panelen in de customizer van het thema zijn aangepast, maar via css en php code; de bronbestanden.

Wat is eigenlijk een thema (theme)?

Een WordPress website maakt gebruik van een thema (theme). Een thema is de uitstraling / vormgeving, zeg maar het jasje van de website. Denk daarbij vooral aan de lay-out (vlakken indeling) en de breedte van de website, maar ook aan lettertypen, kleuren, randen, schaduwen en andere effecten.

Met de meeste WordPress thema’s komt ook een Cascading Style Sheets (CSS) mee, waar het thema gebruikt van maakt.

Heb je een thema geïnstalleerd van bijvoorbeeld DIVI of Generate Press, dan kun je het dit makkelijk aanpassen naar je eigen voorkeur.

Wat is een Child thema?

Een child thema is als het ware een kopie van het hoofdthema inclusief de wijzigingen die je ooit heb gemaakt. Het verschil is met het hoofdthema dat na een update niet al je aanpassingen verloren gaan.

In principe kun je alle thema bestanden van een parent thema overzetten naar Child Thema.  Je maakt hierin wijzigingen die bewaard blijven bij een update van je thema. Anders is je werk voor niets geweest. Voorbeelden van deze themabestanden zijn:

  • style.cs
  • functions.php (hier staan de functies, hooks en methoden)
  • header.php
  • footer.php
  • taalbestanden

Wat gebeurt er bij het Updaten van een thema (theme)?

Bij het updaten van een thema verwijdert WordPress de map en uploadt een nieuwe map. Alle wijzigingen die je in de bovenliggende themabestanden hebt aangebracht, worden weggegooid en vervangen door de nieuw bijgewerkte bestanden.

Thema customizen

Zoals gezegd, jouw aanpassingen aan het thema kunnen na het updaten kwijt zijn. Daarom is in veel gevallen een Child Thema van belang, zodat deze wijzigingen niet overschreven worden.

Maar waar pas je het thema aan? Wijzigingen vind je bij:

  • weergave
  • customizer

Als je specifieke wijzigingen wilt aanbrengen en je vind dit niet direct terug in de customizer, plaats dit dan via CSS van je thema en bijvoorbeeld niet via een code snippets plugin. Zo heb je ook alles mooi bij elkaar.

/*
Theme Name: Ask idots Child
Theme URI: https://generatepress.com
Template: generatepress
Author: idots
Author URI: https://tipperz.nl
Description: WordPress Helpdesk. Stel je vraag online!
Version: 3.1.0.1638882261
Updated: 2021-12-07 13:04:21
*/

/* Vanaf hieronder kun je CSS plaatsen
-------------------------------------- */

De bovenstaande regels kun je aanpassen c.q. sommige kun je ook achterwege laten. Theme Name en Template zijn wel verplicht:

  • Theme name – unieke naam voor je child theme.
  • Template – mapnaam van het hoofdthema

een child theme op je website plaatsen (ook achteraf)

child theme configurator plugin

Als je al aanpassingen in de parent theme (hoofdthema) hebt verricht en achteraf bedenkt dat je toch een child theme wilt gebruiken, dan kun je dit bij de child theme configurator plugin makkelijk aangeven. Bij stap 8 zet je een vinkje dat de menu’s, widgets en customizer settings van het hoofdthema moet worden overgenomen.

GeneratePress

Bij gebruik van een child-thema zal GeneratePress automatisch de benodigde style.css-bestanden in de wachtrij plaatsen. Je hoeft de CSS-bestanden van het bovenliggende of onderliggende thema niet in je functions.php-bestand te plaatsen.

Als je alleen de thema-opties in de Customizer hebt gebruikt, gaan je wijzigingen niet verloren.

De enige keer dat je risico loopt wijzigingen te verliezen, is wanneer je ze aanbrengt in de bovenliggende themabestanden of wanneer je het veld Extra CSS van WordPress gebruikt.

Als je al via customize in het hoofdthema (Parent Theme) van Generate Press nieuwe stylen hebt opgenomen dan kun je ook nog achteraf een child theme toevoegen. Wel zul je hoogst waarschijnlijk de volgende onderdelen nog een keer moeten uitvoeren:

  • reload logo
  • voeg opnieuw toe, je Copyright (Customize > Layout > Footer). Omdat dit in een aparte database onderdeel is opgeslagen.