Een kind thema, of child theme, is een thema dat de functionaliteiten van een ander thema overneemt. Dit andere thema wordt ook wel ouder thema, of parent theme, genoemd. Het idee achter een child theme is dat je de functionaliteit van een bestaand thema kunt aanpassen, zonder dat deze later verloren gaat als het thema bijvoorbeeld een update krijgt.
Een voorbeeld
Stel dat je gebruik maakt van het standaard twenty fourteen thema van WordPress en je wilt de kleur van de titels boven de artikelen aanpassen. Je kunt dit doen door in de CSS bestanden van het thema aanpassingen te maken, maar bij een volgende update van het thema worden deze overschreven en is alles weer zoals het oorspronkelijk was. Nu is het misschien niet heel erg als je slechts een regel code hebt gewijzigd, maar wat als je het overgrote deel van het thema had aangepast?
Om te voorkomen dat dit jou gebeurt, kan je dus een child theme maken. Dit is een lichtgewicht thema waarvoor alleen een style.css bestand verplicht is. In het geval van een aantal kleuren aanpassen is dit ene bestandje al meer dan genoeg, maar voor de mensen die meer willen aanpassen: het is mogelijk om elk bestand uit het parent theme te overschrijven door het child theme. Alle aanpassingen die je in het child theme maakt, zullen niet worden overschreven wanneer er een wijziging, zoals een update, aan het parent theme wordt doorgevoerd.
Hoe maak je een child theme
Allereerst moet je toegang hebben tot je website bestanden op de server. Dit kan bijvoorbeeld met een FTP programma. Ga vervolgens naar de map “wp-content” en daarin naar de map “themes”.
Daar aangekomen moet je een map aanmaken voor het child theme dat je wilt maken. Het is gebruikelijk om het child theme hetzelfde te noemen als het parent theme met “-child” als achtervoegsel. In het voorbeeld gebruiken we het Twenty Fourteen thema en wordt de naam van de map “twentyfourteen-child”. Natuurlijk kan je er ook een andere naam aan geven, maar zorg er wel voor dat het voor jezelf herkenbaar blijft.
Mocht je niet weten welke map je huidige thema voorstelt, log dan in op het admin dashboard van je site en ga naar “Weergave > Thema’s”. Daar aangekomen kan je de naam zien van het actieve thema (bijvoorbeeld Twenty Fourteen). De map behorende bij het gevonden thema is dan de naam zonder spaties (dus twentyfourteen in dit geval).
Wanneer de map van het child theme is aangemaakt, gaan we hier een bestand aan toevoegen (het style.css bestand). Open hiervoor een tekst-bewerker, maak daarin een nieuw bestand aan en plak daar de volgende code in (of download het voorbeeld hier door middel van rechtermuisknop > opslaan als):
/* Theme Name: Twenty Fourteen Child Theme URI: http://www.wpsitemaken.nl/ Description: Twenty Fourteen Child Theme Author: WPsitemaken Author URI: http://www.wpsitemaken.nl Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-child */ @import url("../twentyfourteen/style.css");
Voordat we verdergaan, lopen we eerst kort langs wat de code precies inhoudt. Let er wel op dat bovenstaand voorbeeld alle opties bevat die mogelijk zijn om informatie over je child theme te beschrijven, maar dat alleen “theme name” en “template” verplicht zijn. De verdere regels kun je dus weghalen als je dat wilt.
Theme name: De naam die je je child theme geeft. Hier kun je alles invullen, maar zorg ervoor dat het voor jezelf duidelijk is om welk child theme het gaat. Deze naam wordt ook weergegeven in het admin dashboard van je website.
Theme URI: De link naar de website waarop het thema als voorbeeld te zien is of meer uitleg over wordt gegeven. Dit is voornamelijk bedoeld voor wanneer je het thema door anderen wilt laten gebruiken en ze een live voorbeeld wilt laten zien.
Description: Indien gewenst kan je hier een korte beschrijving van het thema opgeven.
Author: De auteur die dit child theme heeft gemaakt. Omdat je dit zelf maakt kan je hier je eigen naam invullen.
Author URI: De website van de auteur.
Template: Hier moet je de naam van de map van het parent theme neerzetten. Let er goed op dat je naam van de map exact overneemt. Als hier namelijk een fout in zit zal het thema later niet werken.
Version: Het versienummer van het thema.
Tags: De tags waaronder het thema gevonden kan worden. Dit is alleen nodig als het thema op WordPress.org wordt geplaatst.
Text Domain: Dit heeft te maken met het vertaalbaar maken van je thema.
Wanneer je dit hebt toegevoegd, hebben we nog de import regel. Dit stukje code geeft aan waar het originele style.css bestand van je parent theme te vinden is. Vervang “twentyfourteen” hierin wel door de naam van de map van je parent theme.
De import regel is alleen nodig wanneer je parent theme niet gebruik maakt van de wp_enqueue_style() methode in het functions.php bestand. Als je niet weet of hiervan gebruik gemaakt wordt, dan kan je de import regel gewoon toevoegen zonder dat het problemen zal veroorzaken.
Nu we de benodigde code hebben geschreven, kan je het bestand opslaan als “style.css” en uploaden naar je server (in de eerder aangemaakte map). Wanneer je nu naar je admin dashboard op je website gaat, zal je onder Weergave > Thema’s je child theme zien en kunnen activeren. Wanneer je het child theme activeert, en alles goed gegaan is, zal er op je website geen grote verschillen moeten zijn tussen je eerdere thema en nu; er is namelijk nog niks aangepast. Wel is het mogelijk dat een aantal thema aanpassingen die via het “Weergave” menu in het admin dashboard zijn toegepast, teruggezet zijn. In dat geval dien je deze aanpassingen opnieuw in te stellen.
Child theme aanpassen
Nu het child theme werkt, kunnen we beginnen met het aanpassen ervan. In het aangemaakte style.css bestand is het mogelijk om de weergave van het parent theme te overschrijven met je eigen CSS. Hierbij dien je de nieuwe CSS regels onder de @import regel te plaatsen.
Bij het overschrijven van de CSS hoef je enkel de aangepaste regels in het nieuwe style.css bestand te plaatsen. Je hoeft dus niet de bestaande CSS vanuit je parent theme te kopiëren en hier opnieuw in te plakken.
Template bestanden overschrijven
In het child theme is het ook mogelijk om andere bestanden te overschrijven, en dus niet alleen het CSS bestand. Om dit voor elkaar te krijgen, hoef je enkel het bestand dat je wilt overschrijven in je child theme map te plaatsen. Als voorbeeld: stel dat je de PHP code van je header wilt aanpassen in het child theme. Het enige wat je dan hoeft te doen is de header.php te kopiëren vanuit je parent theme en deze in je child theme map te plaatsen. Vervolgens kun je dan in de header.php in je child theme de gewenste wijzigingen aanbrengen.
Overschrijven van functions.php
Het functions.php bestand wordt in het child theme niet overschreven, zoals bij de andere bestanden wel het geval was. Daarentegen wordt het als aanvulling op de functions.php uit het parent theme gezien (het wordt wel geladen voor het parent theme). Om dus een extra methode toe te voegen aan de huidige functions.php van je parent theme, moet je een functions.php bestand creëren in je child theme map met daarin de nieuwe methodes.
De structuur van het functions.php bestand is als volgt: je begint met de standaard PHP opening tag (<?php) en daaronder je PHP code (de WordPress standaard is dat een PHP sluit tag (?>) niet nodig is). Je kunt hierin zoveel, of zo weinig, nieuwe methodes plaatsen als je zelf wilt. Zorg er wel voor dat je niet de code van de functions.php uit het parent theme kopieert naar dit bestand, want dat kan voor problemen zorgen.
Laat een reactie achter