Een child-theme gebruiken in WordPress

Ik kom het helaas nog steeds vaak tegen: WordPress websites die geen child template gebruiken. “Ok, wat is een child-theme?” hoor ik je denken, en waarom zou – nee moet je het gebruiken?

Wat is een child-theme in WordPress?

Een child-theme (of child-template) is een template dat van een ander template gebruik maakt. Het is geen kopie, maar het overerft alle eigenschappen van het parent-theme.

Waarom moet je een child-theme gebruiken?

Als een child-theme eigenlijk een kopie is van het parent-theme waarom moet ik het dan gebruiken?

• update het parent template zonder je aanpassingen kwijt te raken
• houdt je aanpassingen overzichtelijk en herbruikbaar
• bespaar ontwikkeltijd
• leer template ontwikkeling

Als je een template geïnstalleerd hebt dan zal over kort of lang een update beschikbaar zijn zodat het template met een nieuwere WordPress versie beter samen kan werken of dat er nieuwe functionaliteiten zijn of dat er bugfixes zijn. Als je dan het template updatet worden alle – ALLE – bestanden van het template overschreven. Heb je nu aanpassingen gedaan in de bestanden (ook is het maar wat vormgeving in style.css) dan raak je die kwijt.

Ja, maar ik rommel nooit in de bestanden, ik zou niet weten hoe!

Beginners installeren vaak een template (of 10 zelfs, lekker testen…) en maken de enige aanpassingen in de template configuratie en in de WordPress customizer. Dat lijkt in eerste instantie prima te werken en een child-theme overbodig.

Toch komt het moment dat  je net iets aan moet passen wat niet in het template zelf kan. Je zoekt iets op en dan vind je het script dat precies doet wat jij wilt. Yeah! Bij het script staat: plaats dit script in de functions.php file van je template. Je hebt geen idee wat dit voor een bestand is maar dat doe je dan maar. En bij de volgende update van het template is die functionaliteit dan weer overschreven, weg, foetsie. Misschien valt het je eerst niet op dat die functionaliteit weg is, pas later krijg je het door. “Damn, wat was die code ook alweer? Waar moest ik die plaatsen?” Om die ergernis en dubbel werk te voorkomen moet je dus een child-theme gebruiken, altijd! Leer het je aan, het kost maar een minuut extra maar is een lifesaver!

Hoe maak je een child-theme?

Als je een template gekocht hebt dan wordt daar standaard een child-theme meegeleverd. Installeer eerst het parent-theme, daarna het child-theme en activeer dan het child-theme. Moeten bepaalde plugins geïnstalleerd worden voor het parent-theme dan laat het child-theme je dat ook weten, in principe wordt gewoon het parent-theme uitgevoerd, maar dan met eventuele uitbreidingen.

Heb je een template uit de WordPress directory geïnstalleerd dan zit daar geen child-theme erbij. Die maak je makkelijk zelf.

Een child-theme middels een plugin maken

Jep, voor alles is er een plugin 😉 Er zijn echt talloze plugins die het voor je doen, je kunt het proberen met Child Theme Configurator of Child Theme Generator.

Een child-theme zelf maken

Deze optie is voor iemand die al wat technischer is ingesteld, maar heel ingewikkeld is het ook weer niet.

Templates staan in de map /wp-content/templates/. Daar vind je als het goed is de standaard WordPress templates zoals TwentyTwentyOne en het template dat je wilt gebruiken, ik noem het maar AwesomeTemplate.

Nu maak je in de map /wp-content/templates/ de map /awesometemplate-child/ aan. Dit wordt dus je child theme voor het AwesomeTemplate. De naam doet er niet aan toe, je kunt de map ook /besteappeltaartrecept/ noemen, maar /awesometemplate-child/ is wel zo duidelijk en sorteert ook lekkerder.

In deze map plaats je een aantal bestanden:

• style.css
• functions.php

style.css van je child-theme

Technisch gezien is dit een stylesheet bestand en kun je de opmaak van je website er mee aanpassen. In WordPress staat in dit bestand ook belangrijke informatie over het template zelf. Hier kun aangeven hoe het template heet, wie het template geschreven heeft, of er een bepaalde licentie op zit, wat je text-domain is maar ook wat het parent-theme is als het een child-theme is.

Voorbeeld (basis):

/* 
Theme Name: Awesometheme Child 
Template: awesometheme 
*/

Met Theme Name geef je gewoon een naam aan het template, dit kan je vrij kiezen.

Met Template geef je aan van welk template dit een child-theme is, gebruik de naam van de map en niet de naam die je in de WordPress backend ziet. Voor het WordPress template Twenty Fifteen voer je hier dus “twentyfifteen” in en niet “Twenty Fifteen” (zonder aanhalingstekens).

functions.php van je child-theme

In de functions.php file komen alle programmeertechnische aanpassingen die niet via het template zelf geregeld kunnen worden.

Een aantal voorbeelden:

• geen adres hoeven op te geven als in je webshop een digitaal product (bv. PDF, aanmelding voor een cursus) gekocht wordt
• het (voorwaardelijk) laden van css- of js-bestanden
• het limiteren van de zoekfunctie op alleen producten en pagina’s
• het aanpassen of uitbreiden van plugins
• het maken van eigen shortcodes

Voorbeeld:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}

Met deze code wordt het stylesheet van het parent theme geladen. Als daar geen opmaak in staat kan je dit ook leeg laten, maar het bestand (functions.php) moet je wel plaatsen, anders is het template niet volledig en kan het niet geactiveerd worden.

Optionele bestanden van je child-theme

Naast deze twee bestanden kan je ook nog een afbeelding selecteren die je in de WordPress backend bij het overzicht van de templates ziet. Gebruik een plaatje van 1200×900 pixel en sla dit op als screenshot.png of screenshot.jpg.

Bestanden van het parent-theme aanpassen

Ok, we hebben nu een child-theme, maar hoe pas ik nu een bestand van het parent-theme aan als ik het niet in het parent-theme mag doen?

Simpel: je kopieert het bestand en zet het op dezelfde plek in het child-theme neer. Als je het bestand header.php uit je template wilt aanpassen kopieer dan het bestand /wp-content/themes/awesometheme/header.php naar /wp-content/themes/awesometheme-child/header.php.

Noteer goed wat je hebt aangepast en waarom. Als je namelijk het parent-theme updatet kan het zijn dat je dit bestand ook moet updaten (om compatibel met de nieuwe versie te zijn) en de wijzigingen opnieuw moet invoeren.