Child theme: je maatwerk overleeft elke update

Er is een scenario dat elke websitebouwer kent. Een klant belt en zegt dat zijn site er ineens anders uitziet. Kleuren kloppen niet meer, de opmaak is terug naar de standaard. Er is niets gehackt en niemand heeft iets fout gedaan. Er is alleen een update uitgevoerd.

De oorzaak is bijna altijd hetzelfde. Iemand heeft direct in de themabestanden aanpassen van het originele thema gewerkt.

Bij Ergotherapie West-Friesland kon dat niet gebeuren. Ik maakte daar het logo, de huisstijl, het drukwerk en de website. De huisstijl vroeg om afwijkende kleuren, koppen en formulierstijlen.

Al dat maatwerk staat in een child theme. Het hoofdthema krijgt gewoon zijn updates, met alle beveiligingsfixes erbij. De huisstijl blijft staan waar hij staat. Ik hoef na een update niets opnieuw in te stellen.

Child theme uitgelegd in het webdesign woordenboek van Project Direct
Een child theme houdt jouw maatwerk los van het originele thema.

Wat is een child theme?

Een child theme is een klein, apart thema. Het draait bovenop een bestaand thema, het ouderthema. Alle functies en opmaak komen van dat hoofdthema. Alleen wat jij zelf toevoegt, komt uit het child theme.

Zie het als een doorzichtig vel over een tekening. De tekening blijft zoals hij is. Jouw aantekeningen staan op het vel erboven.

Waarom een update alles wist

Bij een thema-update wordt de hele themamap vervangen door de nieuwe versie. Alles wat jij daarin had veranderd, verdwijnt. Er komt geen waarschuwing en er is geen ongedaan maken.

Met een child theme raak je die map niet aan. Daardoor blijft maatwerk behouden vanzelfsprekend, ook na jaren updates.

Waar bestaat hij uit?

Technisch is het verrassend klein. Twee bestanden volstaan voor de basis.

  • Een stijlbestand met een kopregel die het ouderthema benoemt.
  • Een functions.php voor je eigen functies en aanpassingen.
  • Optioneel losse sjabloonbestanden die je wilt overschrijven.

Wil je een sjabloon aanpassen, dan kopieer je dat bestand naar je child theme. Het CMS gebruikt dan jouw versie in plaats van het origineel.

Wanneer heb je er een nodig?

Wel

Zodra je iets aan de code van je thema wilt veranderen. Een eigen sjabloon, een extra functie, of opmaak die de themabeheerder niet aanbiedt.

Niet altijd

Wil je alleen een kleur of lettertype wijzigen? Dan kan dat vaak in de themabeheerder zelf. Ook een blokje eigen CSS in de aanpasser blijft bewaard bij updates. Een child theme is dan overbodige complexiteit.

Functies horen er soms niet in

Dit is de fout die ik het vaakst herstel. Mensen stoppen alles in het functiebestand van hun child theme. Ook zaken die niets met het uiterlijk te maken hebben.

Wissel je ooit van thema, dan is dat allemaal weg. Denk aan een aangepast berichttype of een koppeling. Dat hoort in een plugin, niet in je thema.

Vertraagt het je site?

Praktisch niet. Er wordt een extra stijlbestand geladen, meer niet. Dat is verwaarloosbaar naast je afbeeldingen en scripts.

Wat wel vertraagt is een child theme vol oude code. Na jaren sleutelen staan er soms honderden regels in die niemand meer gebruikt. Ik ruim dat op tijdens onderhoud.

Zo pak ik het aan

Bij elke nieuwe site in WordPress begin ik met een child theme. Ook als er nog geen maatwerk is. Dat kost tien minuten en voorkomt later een verbouwing.

Ik zet er commentaar bij wat elk stuk doet. Ik test elke wijziging eerst buiten de live site om.

Vier dingen die ik altijd vastleg

  • Commentaar boven elk stuk code, zodat de bedoeling duidelijk blijft.
  • Een notitie welk ouderthema erbij hoort en welke versie.
  • Een kopie van het child theme in de back-up van de site.
  • Een test op een kopie voordat er iets live gaat.

Werkt er later iemand anders aan je site, dan kan die meteen door. Meer over de omgeving waarin dit alles draait lees je bij backend. Zo blijft veilig aanpassen echt veilig, ook als iemand anders het later overneemt.

Meer vragen over Child theme

Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.

  • Wat is een child theme?
  • Waarom raak je aanpassingen kwijt na een update?
  • Wanneer heb je een child theme nodig?
  • Hoe maak je een child theme aan?
  • Wat is het verschil tussen een child theme en een plugin?
  • Kan een child theme je website vertragen?
Omdat een update de hele themamap vervangt door de nieuwe versie. Alles wat jij in die map had veranderd, verdwijnt daarbij. Er komt geen waarschuwing en er is geen ongedaan maken. Dit is het scenario dat elke bouwer kent. Een klant belt dat zijn site er ineens anders uitziet. Kleuren kloppen niet meer, de opmaak is terug naar standaard. Er is niets gehackt en niemand heeft iets fout gedaan. De verleiding om direct in het thema te werken is groot. Het bestand staat er, je opent het en past een regel aan. Het werkt meteen, dus het voelt goed. Tot de volgende update. Dan is het weg, samen met alle uren die je erin stopte. Met een child theme raak je die map nooit aan. Je hoofdthema krijgt gewoon zijn updates, inclusief beveiligingsfixes. Jouw maatwerk blijft staan waar het staat. Vraag je bouwer of dit bij jou goed staat. Een antwoord daarop kost hem twee minuten en jou mogelijk een verbouwing.
Een child theme is een klein, apart thema dat bovenop een bestaand thema draait. Dat bestaande thema noemen we het ouderthema. Alle functies en opmaak komen daaruit. Alleen wat jij zelf toevoegt, staat in het child theme. Zie het als een doorzichtig vel over een tekening. De tekening blijft precies zoals hij is. Jouw aantekeningen staan op het vel erboven. Technisch is het verrassend klein. Twee bestanden zijn genoeg voor de basis. Een stijlbestand met een kopregel die het ouderthema benoemt, en een functiebestand voor je eigen code. Wil je een sjabloon aanpassen, dan kopieer je dat bestand naar je child theme. Het systeem gebruikt dan jouw versie in plaats van het origineel. Het origineel blijft ongemoeid. Het nut zit hem in updates. Die vervangen de map van het ouderthema volledig. Jouw map blijft daarbij buiten schot. Meer over de techniek eronder lees je bij CSS. Het klinkt technisch, maar het is vooral een kwestie van scheiden. Wat van jou is, houd je apart van wat van de themabouwer is.
Zodra je iets aan de code van je thema wilt veranderen. Denk aan een eigen sjabloon, een extra functie of opmaak die de themabeheerder niet aanbiedt. Maar niet elke wens vraagt erom. Wil je alleen een kleur of een lettertype wijzigen? Dat kan bijna altijd gewoon in de instellingen van je thema. Ook een blokje eigen opmaak in de aanpasser blijft bewaard bij updates. Voor kleine kosmetische wijzigingen is een child theme dus overbodige complexiteit. Er is nog een grens waar mensen overheen gaan. Alles wat niets met uiterlijk te maken heeft, hoort er niet in. Een aangepast berichttype, een koppeling of een shortcode bijvoorbeeld. Wissel je ooit van thema, dan is dat allemaal weg. Zulke zaken horen in een plugin. Die blijft werken, ongeacht welk thema je gebruikt. Twijfel je? Begin dan zonder. Een child theme toevoegen kan altijd nog, en dat is eenvoudiger dan hem later opruimen. Zo blijft je thema overzichtelijk en je site beheersbaar.
Je maakt een nieuwe map aan in je themamap. Geef die een duidelijke naam, bijvoorbeeld de naam van het ouderthema met child erachter. In die map zet je een stijlbestand. Bovenin plaats je een blok met commentaar waarin de naam staat en welk ouderthema erbij hoort. Die verwijzing moet exact overeenkomen met de mapnaam van het origineel. Daarnaast maak je een functiebestand aan. Daarin zorg je dat het stijlbestand van het ouderthema netjes wordt ingeladen. Vergeet je dat, dan valt je hele opmaak weg. Daarna activeer je het child theme in je beheeromgeving. Je site ziet er dan precies hetzelfde uit als daarvoor. Dat is het teken dat het goed staat. In WordPress zijn er ook plugins die dit voor je doen. Handig als je niet met bestanden wilt werken. Test het altijd eerst buiten je live site om. Zet er meteen commentaar in bij elk stuk dat je toevoegt. Je toekomstige zelf is daar over twee jaar erg blij mee.
Praktisch niet. Er wordt een extra stijlbestand ingeladen, meer niet. Dat is verwaarloosbaar naast je afbeeldingen en je scripts. Wat wel vertraagt is een child theme dat jarenlang is volgestopt. Ik kom bestanden tegen met honderden regels die niemand meer gebruikt. Oude campagnestijlen, code van een plugin die er al lang af is. Al die regels worden bij elk bezoek meegeladen. Individueel stelt het weinig voor, maar samen telt het op. Daarom ruim ik dit standaard op tijdens onderhoud. Ik zet er commentaar bij zodat duidelijk is wat elk stuk doet. Dan weet een volgende bouwer wat hij veilig kan weghalen. De echte snelheidswinst zit ergens anders. Kijk eerst naar je afbeeldingen en je plugins. Een child theme staat vrijwel nooit in de top drie van je vertragers. Kijk bij traagheid dus eerst ergens anders. Je afbeeldingen en je plugins staan bijna altijd hoger in de lijst. Meet dat eerst, voordat je aan je thema gaat sleutelen.
Ben je bang dat je maatwerk verdwijnt bij de volgende update? Stuur me je website via het formulier hieronder. Ik kijk of er direct in je thema is gewerkt en wat daar het risico van is. Zo weet je waar je aan toe bent voordat er iets misgaat. Vermeld je plaats, dan weet ik meteen waar je zit.

Waar kan ik je mee helpen?