Waarom een child theme aanmaken?
Aanpassingen zijn soms vereist om een thema netjes te laten passen bij een huisstijl, of om het thema functioneel uit te breiden. Wanneer je een thema update, worden oude versies van bepaalde bestanden overschreven. Dat betekent dat eventuele wijzigingen die je hebt toegepast, bijvoorbeeld in de opmaak van je thema, verloren gaan. Dit is niet het geval wanneer je een child theme gebruikt.
Wat is een child theme binnen WordPress?
Een child theme is een manier om wijzigingen toe te passen zonder de oorspronkelijke thema bestanden aan te passen. Je maakt namelijk een aparte set van bestanden aan die de inhoud van de oorspronkelijke bestanden overschrijven. Een simpel voorbeeld:
De opmaak van een thema
Elk thema bevat een CSS bestand genaamd style.css. Dit bestand vormt de basis voor de opmaak van het thema en bevat onder meer de naam van het thema welke WordPress zal herkennen. Een zogenoemde Cascading Style Sheet bepaalt bijvoorbeeld welk lettertype gebruikt wordt, welke kleuren een tekst of vorm heeft en hoe de inhoud van de website opgemaakt wordt.
Pas je style.css aan, dan kun je bijvoorbeeld de tekst een ander lettertype geven. Bij een update van je thema, wordt style.css echter weer overschreven met een nieuwe versie van het origineel. Zonde van je werk, zeker wanneer je geen backup beschikbaar hebt.
Hoe creëer je een child theme?
Het aanmaken van een child theme is vrij eenvoudig. Stel, je thema heet “Fancy WordPress Theme”. Dit thema vind je dan op de server terug via dit pad:
Waar vind je jouw WordPress thema op de server
jouw_site/wp-content/themes/fancy/
Binnen die map vind je onder andere style.css terug, waarin je deze inhoud zou kunnen terugvinden:
/*
Theme Name: Fancy
Theme URI: http://www.wordpress.org/themes/fancy-theme/
Description: Fancy WordPress Theme
Author: WordPress Example
Author URI: http://www.wordpress.org
Version: 1.0.0
*/
Van dit thema een Child Theme maken
Laten we nu een child theme creëren van dit thema. We maken binnen de map waarin alle WordPress thema’s staan een nieuwe map aan genaamd “Fancy-child”
jouw_site/wp-content/themes/fancy-child/
In deze map plaatsen we een nieuw CSS bestand met deze inhoud:
/*
Theme Name: Fancy Child Theme
Description: Child Theme van Fancy WordPress Theme
Template: Fancy
Version: 1.0.0
*/
@import url("../Fancy/style.css");
/* =Theme aanpassingen vanaf hier
------------------------------------------------------- */
Waar je op moet letten
Een aantal belangrijke punten waar je op moet letten bij het aanmaken van dit bestand:
- In de regel Template: Fancy zul je de naam van het oorspronkelijke thema moeten plaatsen. Dit is dezelfde naam als je terugvindt in je oorspronkelijke thema.
- De regel @import url(…) is een verwijzing naar het oorspronkelijke thema. Zorg dat je hierin netjes de mapnaam vervangt van je oorspronkelijke thema.
- De verwijzingen naar het oorspronkelijke thema zijn hoofdletter gevoelig. Zorg er dus voor dat wanneer een themanaam met een hoofdletter is omschreven, dat je deze overneemt.
Je child theme activeren en gebruiken
Log in op je WordPress installatie en navigeer naar WordPress > Eigenschappen (Appearance) > Thema’s (Themes). Hierin vind je, wanneer je het child theme correct hebt aangemaakt, een nieuw thema terug met de naam “Fancy Child Theme” of de naam van jouw keuze. Mocht het niet gelukt zijn om het child theme correct aan te maken vind je onderin dit scherm vaak feedback terug van wat er mis is gegaan. Kies voor Activeren (Activate) om het thema te gaan gebruiken.
Wijzigingen in de opmaak je child theme
Wanneer je nu de opmaak aanpast van het child theme in style.css, raak je deze aanpassingen nooit kwijt. Een update rol je namelijk uit over het oorspronkelijke thema, niet over je child theme. Voeg je CSS aanpassingen in onder deze regel:
/* =Theme aanpassingen vanaf hier
------------------------------------------------------- */
Wijzigingen in andere bestanden
Stel dat je in de header van je thema een regel wil invoegen, bijvoorbeeld een nieuw font wat je toe wil voegen. Kopieer dan header.php uit je oorspronkelijke thema en plaats dit zelfde bestand in je child theme.
jouw_site/wp-content/themes/fancy-child/header.php
Aanpassingen die je dan doet aan dit bestand worden niet overschreven door updates.
Hoe herkent WordPress dan welk bestand er gebruikt moet worden?
De WordPress code heeft een volgorde in het uitlezen van bestanden. Dit gaat binnen WordPress ‘vanzelf’. Wanneer je een child theme gebruikt, worden alle bestanden van het hoofdthema ingeladen. Wanneer er echter bestanden in je child theme aanwezig zijn met dezelfde naam als in het hoofdthema, worden deze bestanden ingelezen in plaats van de originele bestanden. Wanneer je dus in je header een font in wil voegen (header.php), of Google Analytics in je footer wil toevoegen (footer.php) kopieer je deze bestanden naar je child theme en voeg je de regels code toe in je child theme. Zo gaan je wijzigingen nooit verloren.
Wat als een bestand binnen je child theme verouderd raakt?
Soms kan het zijn dat een thema update vraagt om een nieuwe versie van het bestand wat je hebt aangepast. Hoe ga je daar dan mee om? Wat we je adviseren is om de aanpassingen in de code netjes te kenmerken met comments.
Dit doe je door in CSS een regel als deze toe te passen:
/* Dit zijn aanpassingen voor de header */
In PHP bestanden kun je dezelfde regel toevoegen:
/* Dit is een aanpassing in de code */
Wanneer je dan toch een nieuwe versie van het bestand wil verwerken in je child theme, kun je op deze manier altijd terugvinden waar je de aanpassingen in het bestand hebt toegevoegd. Kopieer de nieuwe versie van het bestand weer naar je child theme en voeg de aanpassingen toe aan de nieuwe versie van het bestand.
