WordPress Child theme maken

Het gebruik van een child theme biedt grote voordelen. Een child theme neemt namelijk alle mogelijkheden en opmaak over van het hoofdthema en combineert dit met de mogelijkheid om individuele punten aan te passen. Zo kun je bijvoorbeeld in een child theme een aparte stylesheet aanmaken voor de opmaak van je thema en tegelijkertijd gebruik blijven maken van alle functies en het stramien van het bovenliggende thema.

Wil je extra functies? Dan voeg je bijvoorbeeld die toe in je functions.php. Wil je geen reactie mogelijkheid? Dan kun je bijvoorbeeld in je single.php bestand de regel weghalen die de comments inlaadt.

In bovenstaande schets hebben we drie bestanden aangepast, in dit geval in een child theme. Immers:

• style.css
• functions.php
• single.php

Normaliter als je het thema dat je gebruikt zou bijwerken worden alle aanpassingen overschreven en dus ongedaan gemaakt op het moment dat het thema een update krijgt. Dat willen we natuurlijk niet en hier komt direct het voordeel van het child-theme naar voren. Omdat we in het child theme onze drie aangepaste bestanden hebben, blijven die bestaan. Immers, we updaten alleen het hoofdthema. Onze aangepaste bestanden blijven bij het updaten van het hoofdthema buiten schot.

De werking van een hoofd- en child theme is dat alle bestanden van het hoofdthema worden ingeladen, tenzij er voor dat bestand één bestaat in het child theme. Ónze single, functions en style.css blijven dus ingeladen worden, ook na de update. Onze aanpassingen zijn dus nog steeds van kracht, terwijl je wel beschikt over de meest recente versie van het hoofdthema. Twee vliegen in één klap.

We gaan beginnen met het maken van een child theme en doen dit op basis van WordPress' meest recente thema "Twenty Twenty-Three". Je kunt deze stappen natuurlijk ook doorlopen en uitvoeren bij een ander thema. Houd er dan wel rekening mee dat je de benaming, straks, in je style.css aanpast aan het thema dat je gebruikt.

Ik ga er in deze handleiding van uit dat je WordPress hebt geïnstalleerd en toegang hebt tot je website via een FTP verbinding. Mocht je hier niet zeker van zijn dan kun je de handleiding WordPress installeren doornemen.

Zodra je bent ingelogd via FTP op je WordPress omgeving, navigeer je naar de wp-content folder en klik je vervolgens op themes. Hier vindt je de thema-folder die je momenteel gebruikt, in ons geval “twentytwentythree”. We maken nu een nieuwe map aan en noemen die "twentytwentythree-child". De eerste stap van het child theme is hiermee gezet.

Dit bestand is het belangrijkste bestand in een child-theme. Niet alleen om stijling to te kunnen voegen, maar ook omdat WordPress een nieuwe thema niet herkent wanneer deze geen child-theme bevat. We maken dus een nieuw bestand aan en noemen deze zoals gebruikelijk style.css. Hierin komen een aantal zaken naar voren. Zie onderstaande code:

Theme Name:   Twenty Twenty-Three Child Theme
Theme URI:    http://www.jouwdomein.nl/
Description:  Child theme gebaseerd op Twenty Twenty Three
Author:       Tussendoor B.V.
Author URI:   https://tussendoor.nl/
Template:     twentytwentythree
Version:      1.0
Tags:         tags, twentytwentythree, child-theme
Text Domain:  twentytwentythree-child
*/

@import url("../twentytwentythree/style.css");

Zoals je in bovenstaande css-code kunt zien zijn een aantal zaken voor de hand liggend. Zo heb je een thema naam, URI (url), omschrijving en auteur-informatie. Direct daaronder komt de informatie die van enorm belang is, namelijk "Template". Deze koppelt ons thema, child-theme, aan de naam van de template die wij invoeren. Dat is in ons geval "twentytwentythree", maar in jouw geval kan dat dus een ander thema zijn. Voer hier altijd de naam in van het thema waarmee jij het child theme wilt koppelen.

Via de regel @import url laden we de volledige stijl in van het hoofdthema, direct ónder die regel kun je je eigen opmaak / css kwijt.

Wil je naast de opmaak zorgen dat er wijzigingen plaatsvinden in de nieuwsberichten, ingeladen via single.php, kopieer deze dan uit het hoofdthema en plak deze vervolgens in je child theme. Je kunt hierna de aanpassingen in je child theme doorvoeren. Dit geldt voor alle bestanden.

Nu we het child theme hebben aangemaakt en hebben voorzien van de benodigde bestanden, wordt het tijd om het child theme te activeren. We loggen hiervoor in in onze Wordpress site en navigeren naar Weergave → Thema's. Je ziet nu, naast het twentytwentythree thema, ook het child theme dat net is aangemaakt. Je activeert deze zoals je gewend bent, door op activeren te drukken.

Het child theme is nu in gebruik. Waarschijnlijk zul je vrijwel geen wijzigingen zien, omdat we die nog niet doorgevoerd hebben (in zowel de stylesheet als de single), maar zodra je aanpassingen doorvoert binnen je child theme map, zijn deze direct zichtbaar.

Belangrijk om te weten is dat wijzigingen in je functions.php anders werken dan de andere bestanden in een child- en hoofdthema. De twee functions.php bestanden (hoofd- en child theme) worden namelijk samengevoegd. Dit is het enige bestand dat wordt samengevoegd, andere bestanden worden namelijk overschreven (child theme boven hoofdthema). Wil je dus extra toevoegingen via een functions.php bestand inbouwen, dan hoef je alleen die specifieke code te plaatsen. Het is niet nodig om de hele functions.php hiervoor de kopiëren / plakken.

Wil je specifieke bestanden aanroepen uit je hoofdthema, dan kan dat uiteraard ook. Je gebruik hiervoor onderstaande functie

require_once( get_stylesheet_directory() . '/file.php' );

Je dient hierbij natuurlijk file.php te veranderen in het bestand dat je daadwerkelijk aanroepen wilt.