Hoe maak je een WordPress child theme?

Waarom een child theme gebruiken

Een child thema / subthema heeft als voordeel dat:

• het hoofdthema niet wordt gewijzigd en gewoon bijgewerkt kan worden met de rest in je WordPress onderhoud, zonder dat aanpassingen verloren gaan
• je aanpassingen kunt doen in je WordPress styling en layout zonder je hoofdthema aan te passen
• je functionaliteiten kunt toevoegen die niet in je originele thema zitten.

De systematiek van een hoofdthema en subthema is dat de bestanden van het hoofdthema worden gebruikt, tenzij er voor dat bestand één bestaat in het child thema. Enige uitzondering is het bestand functions.php in het child thema: dat bestand wordt aanvullend geladen in plaats van als vervangend bestand van het hoofdthema.

Hoe maak je een WordPress child theme

Aangekocht thema heeft al een child theme

Steeds vaker zie je dat een voor een WordPress website aangekocht thema op bijvoorbeeld ThemeForest al een child thema heeft. Na aankoop van een dergelijk thema zitten zowel hoofd- als child thema in het .zip bestand dat je gaat downloaden. Je kunt in dat geval het .zip bestand na downloaden uitpakken en zowel het hoofdthema als subthema installeren in je WordPress installatie. Het child thema wordt in dat geval geactiveerd, het hoofdthema hoeft alleen geïnstalleerd te worden en wordt niet geactiveerd.

Child theme maken met behulp van een WordPress plugin

Ben je wat huiverig om het handmatig te doen? Gebruik dan een plugin. Met de Child Theme Configurator maak je een child thema in een handomdraai. Op de plugin-pagina achter deze link vind je duidelijke video’s en uitleg over hoe het in zijn werk gaat.

Handmatig een child theme maken

Ga met behulp van een FTP verbinding of de File manager van je webhost naar de WordPress bestanden -> map wp-content -> themes

Als het goed is staat daar je hoofdthema al geïnstalleerd. In dit voorbeeld wordt hoofdthema Twenty Seventeen van WordPress gebruikt.
Maak een map aan met de naam van je child thema en voeg een nieuw bestand toe in deze map met de naam style.css. Dus op deze wijze:

In het bestand styles.css zet je de volgende regels bovenaan:

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://voorbeeld.nl/twentyseventeen-child/
Description: Twenty Seventeen Child Theme
Author: Petra Blankwaard
Author URI: https://www.indigowebstudio.nl
Template: twentyseventeen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyseventeen-child
*/

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

/* =Theme customization starts here
-------------------------------------------------------------- */

Je kunt deze regels aanpassen, zolang je ervoor zorgt dat ‘Theme Name’, ‘Template’ en de regel ‘@import url’ kloppen.

‘Template’ is de naam van de map van het hoofdthema. In dit geval is het hoofdthema: TwentySeventeen, dus het Template is twentyseventeen; dat is de naam van de map waarin het thema TwentySeventeen zich bevindt.

Verder zou ’twentyseventeen’ op de regel met ‘@import url’ vervangen moeten worden door de naam van de map van het hoofdthema als je de stylesheet van een ander hoofdthema wilt importeren.

De stylesheet van het subthema wordt geladen na het hoofdthema en de opmaakstijlen overschrijven die van het hoofdthema.

Om meer bestanden aan te passen en toe te voegen aan het subthema kun je de Codex van WordPress raadplegen voor verdere uitleg.

Child thema activeren

Als je klaar bent met het aanmaken van je child thema, ga je terug naar je WordPress Dashboard. In menu Weergave -> Thema’s kun je nu je child thema activeren.