Een WordPress child theme maken

28 augustus 2018 | Leestijd: 3 minuten

Wanneer je een website bouwt in WordPress kun je gebruik maken van talloze geweldige templates. Deze standaard templates zien er vaak erg goed uit, maar meestal wil je toch ergens een kleurtje veranderen of iets meer ruimte tussen een titel en tekst. Bij sommige templates kun je dit dan instellen via Weergave -> Customizer in het WordPress Dashboard (waar je terechtkomt wanneer je inlogt op je WordPress site). Wanneer dit niet mogelijk is kan een zogeheten ‘Child theme’ van pas komen.

Wat is een Child Theme?
Een Child Theme is een soort ‘laag’ die je kunt bouwen over je thema. Als je wijzigingen wilt aanbrengen aan je thema, zou je dit direct in de bestanden van je thema kunnen doen. Echter, hier kleven een aantal nadelen aan. Als je hoofdthema wordt geüpdatet door de uitgever van het thema, gaan je wijzigingen aan de themabestanden verloren. Bij een Child Theme gaan je wijzigingen niet verloren bij een update. Nog een voordeel van een Child Theme is dat al de wijzigingen die je aanbrengt allemaal op één plek staan.

Hoe werkt het?
Een Child Theme kun je aanmaken door naast het mapje van je thema een tweede map aan te maken met daarachter ‘-child’. Log in via FTP en ga naar /wp-content/themes. Hier staan alle thema’s die zijn geïnstalleerd. Het thema dat wij vaak gebruiken heet Divi. Bij Divi zou het Child Theme dus Divi-child heten. In het Child Theme zijn er twee bestanden die altijd moeten worden aangemaakt: style.css en functions.php. Open om style.css aan te maken een teksteditor en plak daarin het volgende (specifiek voor Divi, voor andere thema’s moet het aangepast):

/*
Theme Name:   Divi Child
Theme URI:    https://www.elegantthemes.com/
Description:  Divi Child Theme
Author:       Boris de Jong
Author URI:   https://www.webnexus.nl/
Template:     Divi
Version:      1.0.0
Tags:         divi, webnexus, child, theme
Text Domain:  Divi-child
*/

/* =Eigen CSS hieronder plaatsen
-------------------------------------------------------------- */

Daarnaast moet er een functions.php aangemaakt worden met daarin het volgende:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Dit zorgt ervoor dat de style.css van het Child Theme als een ‘laag’ over het hoofdthema wordt geladen.

Het Child Theme activeren
Wat je tenslotte nog te doen staat is het activeren van het Child Theme binnen het WordPress Dashboard. Dit kun je doen door naar Weergave > Thema’s te gaan en het thema dat (in dit geval) Divi-child heet te activeren.

Vanaf nu is je Child Theme geactiveerd en kun je in de style.css van je Child Theme css toevoegen om dingen binnen je thema te wijzigen. Bij updates van je thema zullen deze wijzigingen niet meer verloren gaan.