Een WordPress child theme maken is heel makkelijk en het bespaart je een hoop werk. In dit artikel vertel ik je waarom je een child theme zou moeten gebruiken, wat het is, en hoe je er simpel een aanmaakt.
We behandelen de volgende onderwerpen:
Wat is een WordPress child theme?
Een Child Theme is een soort lichte versie van een bestaand thema. Je neemt dus een bestaand thema als uitgangspunt, je veranderd hier wat aan de vormgeving en mogelijk ook aan bepaalde functionaliteit van de template, maar de meeste bestanden van het originele thema laat je as-is bestaan.
De voordelen zijn dat je snel wat wijzigingen kan aanbrengen zonder helemaal vooraf aan te beginnen.
In simpelere woorden is een child thema een speciaal thema dat de functies en de look&feel van een ander thema overneemt.
Je vraagt je nu mogelijk af wat waarom je dit zou doen. De belangrijkste reden (en tevens het grootste voordeel) om een child theme te gebruiken is om te voorkomen dat je de wijzigingen die je maakt kwijtraakt bij een update van het thema of van de WP core.
Daarnaast is het ook een handige manier om dingen uit te testen zonder de originele code aan te passen in het hoofd thema en kun je natuurlijk ook de functies rustig testen en uitbreiden als je hier behoefte aan hebt.
Kort gezegd kun je dus een wijzigingen aanbrengen in het hoofd thema zonder dat deze wijzigingen verloren gaan bij een update van het thema. Het bespaart jou dus ook een hoop tijd omdat je de veranderingen niet telkens opnieuw hoeft door te voeren.
Wat zijn dan de nadelen van een child theme?
Er zijn eigenlijk niet heel veel nadelen aan het gebruik van een child theme. Het grootste nadeel is dat je voldoende kennis en liefst enige ervaring moet hebben om dingen aan te passen in de code. Een ander minder positief punt is dat weleens voorkomt bij bepaalde thema’s is dat je niet alle bestanden uit het hoofd thema kunt overschrijven met bestanden. Het gaat in dit geval vaak om bestanden die in een map zitten in de map van het hoofd thema. Je moet hierdoor alsnog de originele handmatig bestanden aanpassen, maar dit komt meestal niet voor.
Waarom child themes gebruiken?
Het werken met een child theme is vooral ideaal om wijzigingen te kunnen maken aan de template die je gebruikt. Je kunt deze aanpassingen dan hierin doen, zodat je het hoofd-template niet hoeft aan te passen. De reden dat je de master template niet wilt aanpassen is dat deze veranderingen dan verloren zullen gaan wanneer er een update of nieuwe versie beschikbaar komt voor dat thema. De makers van WordPress adviseren ook om dit te gebruiken voor het maken van aanpassingen aan je site.
Veel aanbieders van betaalde Templates (zoals Themeforest en Monster) leveren standaard out of the box ook een child thema bij hun templates. In deze kun je dan veranderingen in doorvoeren die niet verloren gaan wanneer er een nieuwe versie wordt uitgebracht van het thema dat je gebruikt.
Zelf een child theme maken is makkelijk
In dit stappen plan gaan we er vanuit dat je een child theme wilt aanmaken voor het Twenty Seventeen-theme. Dit is een bekende template die standaard word meegeleverd bij iedere installatie. Dit noemen we ook wel het parent theme. Je kan natuurlijk ook een ander thema kiezen om aan te passen, maar dat is aan jou
Log nu via FTP in op je hosting en ga naar de directory /wp-content/themes/. (dit noemen we ook wel de wordpress child theme url of map) Hier vind je de themas die op jouw site actief zijn. Als het goed is staat hier de folder “twentyseventeen” (of de naam van jouw template). Maak nu in de /wp-content/themes/ folder een nieuwe folder (create new folder optie) aan genaamd twentyseventeen-child. Open nu op je computer een tekstbewerker. Voor Windows gebruik ik altijd Notepad of voor Mac is Textwrangler een aanrader.
Style.css-bestand aanmaken of aanpassen
De opmaak van een wordpress theme komt uit de CSS. Deze moeten we dus aanmaken.
Plak de volgende code in een nieuw bestand:
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wphandleiding.nl
Description: Twenty Seventeen Child Theme
Author: Jouw naam
Author URI: https://wphandleiding.nl/
Template: twentyseventeen
Version: 1.0.0
Tags: plaats, hier, jouw, tags, gescheiden, door, komma’s
Text Domain: twentyseventeen-child
*/
/* =Eigen CSS hier beneden plaatsen (ook wel custom css genoemd)
————————————————————– */
Deze “template” zou gelijk moeten zijn aan de naam van de folder van het hoofd-theme. In dit geval is dat dus “twentyseventeen”, maar als je bijvoorbeeld Divi van Elegant Themes gebruikt zou dit “divi” moeten zijn. Bij Text Domain vul je de folder in van je child theme (in ons voorbeeld is dat twentyseventeen-child).
Sla dit bestand nu op met de naam style.css en open een nieuw bestand in je tekstbewerker.
De style.css van het hoofd-thema inladen met functions.php
In dit nieuwe bestand gaan we de style.css van het hoofd-theme importeren. Plak de volgende code in dit nieuwe bestand:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
Met bovenstaande PHP-code maak je een functie aan waarmee het style.css van het hoofd-theme automatisch wordt geïmporteerd. In het verleden werd dit nog gedaan met een @import in het style.css van het child theme, maar tegenwoordig is het de bedoeling dat je het via het functions.php-bestand doet. Sla daarna dit bestand op met de naam: functions.php.
Bestanden uploaden
Ga terug naar jouw FTP-client of file browser online en open de folder die je hebt aangemaakt voor het child theme. In dit voorbeeld heet de map twentyseventeen-child. Upload nu de 2 bestanden die je hebt aangemaakt (style.css en functions.php) naar deze folder. Alles staat nu klaar voor het eerste gebruik. Wanneer je inlogt op jouw WordPress backend ga je naar Weergave > Thema’s. Hier zul je vervolgens het nieuwe thema zien staan.
Child theme activeren
Je kunt het door jou gemaakte child theme nu activeren. Het enige dat je op dit moment nog doet is het importeren van het hoofd-theme (Twenty Seventeen). Er zal nu nog niks veranderen op je site als je deze activeert.
Wijzigingen in de CSS-code dien je dus vanaf nu te maken in het style.css-bestand van je child theme!
Optionele stap: Een foto aan toevoegen
Zoals je in de screenshots kunt zien wordt er nog geen foto getoond bij de template. Deze kun je makkelijk zelf aanmaken.Het enige dat je hoeft te doen is een afbeelding te uploaden naar de map van het betreffende child theme. Maak een afbeelding van 1200×900 pix en hernoem deze afbeelding screenshot.png. WordPress zal deze afbeelding nu vanzelf tonen bij je template. Dit is alleen zichtbaar voor gebruikers in de admin van WordPress, het maakt voor je sitebezoekers dus niks uit of je een screenshot toevoegt, maar het staat wel zo mooi ?
Automatisch een child theme maken
Te veel stappen? Ja dat kan makkelijker met een wat oudere plugin: One-Click Child Theme. Deze plugin wordt al enige tijd niet meer bijgewerkt maar doet het nog prima. Maak wel eerst een backup van je hele site natuurlijk.