Child theme
Je hebt een ideaal WordPress-thema gevonden, maar de kleuren en lettertypen zijn niet helemaal wat je wilt. Je zou deze daarom graag aanpassen, en om dit op een slimme manier te doen is het aanmaken van een child theme aan te raden. Hierdoor kun je het hoofdthema updaten – wat belangrijk is voor de veiligheid en nieuwe functies – terwijl je toch de aangebrachte wijzigingen behoudt. Wat is de beste aanpak hiervoor?
Een child theme biedt het belangrijkste voordeel dat alle wijzigingen die je aanbrengt behouden blijven wanneer je een update uitvoert op het hoofdthema, in tegenstelling tot directe aanpassingen in het hoofdthema die verloren kunnen gaan tijdens een update doordat de standaardbestanden van het thema worden hersteld. Het gebruik van een child theme voorkomt dit scenario.
Wanneer kies je voor een child theme?
Als je inhoudelijke wijzigingen wilt aanbrengen aan een thema, zoals het doorvoeren van stijlelementen in CSS over de hele website, dan is het kiezen van een child theme de juiste optie. Als ontwikkelaar van het child theme kun je de wijzigingen zo eenvoudig of uitgebreid maken als je wilt.
Hoewel er enige technische kennis vereist is, kun je deze gemakkelijk opdoen via (online) cursussen en communities waar je vragen kunt stellen. Wanneer je scripts gaat aanpassen of aanvullen, dan ben je zelf verantwoordelijk voor de werking en veiligheid ervan. Dit is echter niet van toepassing wanneer je alleen CSS aanpast.
De voordelen van child themes
- Vrijheid: De kunt jouw website volledig naar eigen wens stijlen. En het is handig voor zowel kleine als grote aanpassingen.
- Zekerheid: wijzigingen die je aanbrengt blijven behouden, zelfs na het updaten van je hoofdthema, zodat kostbare aanpassingen niet verloren gaan.
- Tijdswinst: je kunt je website baseren op een bestaand thema en dit aanpassen, waardoor je niet zelf een volledig thema hoeft te maken.
- Kennis: je raakt beter bekend met de werking van thema’s en WordPress, wat helpt bij het verder personaliseren van je website.
Hoe kun je een child theme maken?
Dit voorbeeld gaat over het maken van een child theme voor het Twenty Twenty-one thema, dat momenteel standaard wordt geleverd bij elke nieuwe WordPress-installatie. Als je een child theme wilt maken voor een ander WordPress-thema, kun je nog steeds gebruikmaken van dit artikel. Je moet dan alleen de naam van het thema aanpassen dat je gebruikt.
1. Maak een map aan voor je child theme
Om te beginnen, log in en navigeer naar /wp-content/themes/. Hier vind je alle geïnstalleerde thema’s op jouw WordPress-website. Zoek de map “twentytwentyone” (of de naam van jouw thema) en maak vervolgens een nieuwe map aan in de /wp-content/themes/ map met de naam twentytwentyone-child. Open nu een tekstbewerker op je computer.
2. Maak een Style.css-bestand aan
Plak deze code in een nieuw bestand:
/*
Theme Name: jouw thema-naam (bv.Twenty Twenty-one Child)
Theme URI: De url van je website waarvoor je het thema gebruikt (bv. https://www.icsolutions.be)
Description: omschrijving van je thema (bv. Twenty Twenty-one Child Theme)
Author: De ontwikkelaar van het thema (bv. je eigen naam)
Author URI: De URL van de ontwikkelaar (bv. https://www.icsolutions.be)
Template: Dit is de naam van de map waar je hoofdthema staat (bv.twentytwentyone)
Version: 1.0.0
Tags: plaats, hier, jouw, tags, gescheiden, door, kommas
Text Domain: De naam van de map van je child theme (bv.twentytwentyone-child)
*/
/* =Eigen CSS hier beneden plaatsen
————————————————————– */
Indien nodig kun je de “Theme Name”, “Description”, “Author” en URL’s aanpassen naar eigen wens.
-> Het “template” moet overeenkomen met de naam van de hoofdthema-map.
In dit geval is dat “twentytwentyone”, maar als je bijvoorbeeld Elegant Themes’ Divi gebruikt, moet dit “divi” zijn.
-> Bij “Text Domain” vul je de map in van je child theme. In ons voorbeeld is dat “twentytwentyone-child”.
Bewaar dit bestand nu als “style.css” en open een nieuw bestand in je teksteditor.
3. Style.css van het hoofd-theme inladen
In het 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 behulp van deze PHP-code kun je een functie creëren waarmee het style.css-bestand van het hoofdthema kan worden geïmporteerd. Voorheen werd dit gedaan door middel van een @import in het style.css-bestand van het kindthema, maar tegenwoordig wordt het aanbevolen om dit via het functions.php-bestand te doen. Vergeet niet om het bestand op te slaan onder de naam functions.php.
4. Bestanden uploaden
Keer terug naar WordPress en navigeer naar de map die je hebt aangemaakt voor je child theme. Als voorbeeld gebruiken we hier de map ’twentytwentyone-child’. Upload nu de twee bestanden die je hebt gemaakt (style.css en functions.php) naar deze map. Je child theme is nu gereed voor gebruik. Na het inloggen in WordPress en navigeren naar Weergave > Thema’s, zul je jouw nieuwe child theme in de lijst zien staan.
Nu kun je jouw child theme activeren. Op dit moment importeert jouw child theme alleen het hoofdthema (Twenty Twenty-one), dus er zullen geen wijzigingen zichtbaar zijn op jouw website nadat je het child theme hebt geactiveerd.
Voor alle wijzigingen in de CSS-code moet je nu het style.css-bestand van jouw child theme aanpassen.
Optioneel: Een afbeelding aan je child theme toevoegen
Zoals te zien is in de screenshot hierboven, wordt er momenteel geen afbeelding weergegeven bij jouw child theme. Gelukkig is dit heel eenvoudig op te lossen door simpelweg een afbeelding toe te voegen aan de map van jouw child theme. Maak een afbeelding van 1200×900 pixels en noem deze ‘screenshot.png’. WordPress zal deze afbeelding vervolgens automatisch tonen bij jouw child theme. Houd er rekening mee dat dit alleen zichtbaar is voor gebruikers in WordPress en geen invloed heeft op de bezoekers van jouw website.
