Een WordPress child theme is als het ware een kopie van je bestaande thema (parent theme). Alle functionaliteiten van het parent theme worden overgenomen in het child theme. Daarnaast worden wijzigingen aan bijvoorbeeld de CSS via het child theme verwerkt op je website.

Het gebruiken van een child theme is veruit de veiligste manier om aanpassingen te doen aan je huidige WordPress thema.

Waarom een Child Theme gebruiken voor WordPress?

Ieder thema heeft van tijd tot tijd updates. Op het moment dat jij aanpassingen doet in het parent theme en je installeert zo’n update zijn al je inspanningen voor niks geweest. De update overschrijft namelijk het door jouw aangepaste parent theme. Om dit soort ellende te voorkomen is het verstandig om gebruik te maken van een child theme. De wijzigingen die je hierin aanbrengt worden nooit overschreven bij een eventuele update.

Een ander voordeel is dat je eenvoudig kunt nakijken wat voor aanpassingen je zelf hebt gedaan aan het thema. Iedere wijziging staat namelijk in het child theme. Zeker als WordPress beginner is dit erg handig. En ook niet geheel onbelangrijk: mocht je echt een fout maken… dan je hebt de originele code tenminste nog 🙂

Hoe maak ik een WordPress Child Theme?

Wil jij zelf een child theme maken? Hieronder vind je een eenvoudig stappenplan om er zelf één te maken. In het onderstaande voorbeeld laat ik je zien hoe het werkt aan de hand van een standaard WordPress thema.

Allereerst moet je ingelogd zijn op je FTP om bij het mapje van je thema te kunnen komen. Je gaat naar WP Content -> Themes en daar zie je de thema’s staan. Je maakt hier een nieuwe map aan die je de naam <naam thema>-child geeft. Het is ook mogelijk om een hele andere naam te kiezen.

Voorbeeld WordPress child theme op de FTP

WordPress Child Theme aanmaken op de FTP

In het aangemaakte mapje maken we een nieuw bestand aan die we de naam style.css geven. In dit CSS bestand plaatsen we de volgende code bovenaan:

/*
 Theme Name: Twenty Seventeen Child
 Theme URI: https://jouwdomein.nl/
 Description: Twenty Seventeen Child Theme
 Author: Je naam
 Author URI: https://jouwdomein.nl/
 Template: twentyseventeen
 Version: 1.0.0
 Tags: plaats, hier, jouw, tags, gescheiden, door, kommas
 Text Domain: twenty-seventeen-child
*/
 
@import url("../twentyseventeen/style.css");
 
/* =Hier beneden kun jij je eigen CSS plaatsen
-------------------------------------------------------------- */

De bovenstaande code is vrijwel identiek aan het CSS bestand van je bestaande thema. Het enige dat je toevoegt is de regel

Template: twentyseventeen

en de import URL:

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

Vervolgens kun je in het CSS bestand alles aanpassen wat je maar wilt: kleuren, tekstgrootte, buttons, noem maar op. Alles wat je toevoegt in dit CSS bestand zal het parent theme overschrijven.

WordPress Child Theme activeren

Voordat je definitief gebruik gaat maken van dit Child Theme is het nog wel zaak dat je het thema activeert in WordPress. Je doet dit onder weergave -> Thema’s.

Als je Child Theme geactiveerd is en je CSS bestand alleen bovenstaande code bevat moet de pagina er exact hetzelfde uit zien als daarvoor.

Andere bestanden aanpassen

Naast de style kun je ook andere delen aan het template aanpassen. Bijvoorbeeld de bestanden header.php of archive.php. Voordat je de bestanden gaat aanpassen plaats je eerst een kopie van dit bestand in je map waar ook het style.css bestand staat. De naam moet exact hetzelfde blijven.

Functions.php aanpassen

Het Functions.php bestand is een uitzondering op de andere PHP bestanden. Dit bestand wordt nooit overschreven. Ga je aan de slag met een eigen functions.php zullen de twee bestanden naast elkaar draaien.