De woorden “WordPress child theme” klinken in eerste instantie misschien wat vreemd als je ergens leest dat je dit moet maken voor het thema dat je gebruikt op je website.
Moet je nou een compleet nieuw thema maken terwijl je alleen een klein dingetje wilt aanpassen aan je huidige thema?
Ik kan je verzekeren dat het echt allemaal wat ingewikkelder klinkt dan het daadwerkelijk is.
In dit artikel zal ik je vertellen wat een WordPress child theme is, waarom het handig is om het te gebruiken en hoe je een child theme kunt maken.
Wat is een WordPress child theme?
In eenvoudige woorden is een WordPress child theme een speciaal thema dat de functionaliteiten en design van een ander WordPress thema (hoofd thema) kopieert.
Je vraagt je nu misschien af wat het nut hiervan is, je hebt dan toch gewoon hetzelfde thema? Klopt, maar de belangrijkste reden (en tevens voordeel) om een child theme te gebruiken is om te voorkomen dat je de wijzigingen die je maakt kwijtraakt.
Dit komt namelijk regelmatig voor bij mensen die wijzigingen in de code aanbrengen in het hoofd thema. Bij een thema update worden alle bestanden overschreven, dus ook de aangepaste bestanden, en moeten de wijzigingen opnieuw doorgevoerd worden.
Het is geen pretje om keer op keer de wijzigingen opnieuw door te moeten voeren. Zeker niet als je dit na een half jaar moet doen en je niet genoteerd hebt welke wijzigingen je allemaal gedaan had.
Verder is een child theme ook een mooie manier om dingen uit te testen zonder de originele code aan te passen in het hoofd thema en kun je natuurlijk ook de functionaliteiten uitbreiden als je hier behoefte aan hebt.
Kort gezegd kun je dus met een child theme wijzigingen aanbrengen in het hoofd thema zonder dat deze wijzigingen verloren gaan bij een update van het thema. Het bespaart je dan ook tijd omdat je de wijzigingen niet telkens opnieuw hoeft door te voeren.
Wat zijn de nadelen van een child theme?
Er zijn eigenlijk niet heel veel nadelen te verzinnen bij het gebruik van een child theme. Het grootste nadeel is dat je voldoende kennis moet hebben om dingen aan te passen in de code om te bereiken wat je wilt bereiken. Wanneer je niets hoeft aan te passen heb je tenslotte geen child theme nodig.
Een ander nadeel dat weleens voorkomt bij bepaalde thema’s, is dat je niet alle bestanden uit het hoofd thema kunt overschrijven met bestanden in je child theme. 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 bestanden aanpassen. Gelukkig komt dit steeds minder vaak voor.
Hoe kun je een WordPress child theme maken?
Een WordPress child theme kun je op verschillende manieren maken. Het is mogelijk om zelf handmatig een child theme te maken, maar je kunt ook een plugin het werk laten doen.
Het kan echter ook zijn dat je niet eens een child theme hoeft te maken omdat het al bij de bestanden van het thema zit. Het is dan gewoon een kwestie van de map naar de juiste plek uploaden (/wp-content/themes/) via FTP.
In onderstaande video kun je zien hoe je een WordPress child theme kunt maken met behulp van een plugin en hoe je de bestanden kunt bewerken.
Wil je liever de tekstuitleg of handmatig een child theme maken? Lees hieronder verder.
WordPress child theme maken met een plugin
De eenvoudigste en snelste manier om een child theme te maken is door de plugin “Child Theme Configurator” te installeren. Met deze plugin kun je in een paar klikken een child theme maken van een WordPress thema.
Nadat je de plugin hebt geïnstalleerd en geactiveerd, kun je naar “Gereedschap -> Child themes” gaan. Je komt nu op een pagina uit waar je kunt aangeven dat je een child theme wilt maken, wat het hoofd thema (parent theme) is en kunt vervolgens het thema laten analyseren.
Zodra je een analyse hebt laten uitvoeren, krijg je de mogelijkheid om nog een aantal dingen naar wens in te stellen.
Zo kun je bij stap 4 aangeven hoe de mapnaam van het child theme moet heten.
Bij stap 5 kun je aangeven waar de nieuwe CSS styles opgeslagen moeten worden. Standaard staat dit ingesteld op style.css en ik zou dit ook zo laten, tenzij je een goede reden hebt om dit niet te doen. Het is in elk geval de optie die ik ook altijd gebruik.
Bij stap 6 kunnen we aangeven hoe we omgaan met de stylesheet (staat de opmaak in) van het hoofd thema. De standaard geselecteerde optie “Use the WordPress style queue”, is de beste optie en zoals WordPress het aanraad om te doen.
De @import functie is hoe het vroeger ging, maar is tegenwoordig niet meer de beste methode. De optie om geen handling toe te voegen, is alleen van toepassing als het style.css niet gebruikt wordt voor de opmaak.
Maak je gebruik van Genesis of een ander framework waar de child theme controle heeft over het volledige uiterlijk? Zet dan een vinkje bij “Ignore parent theme stylesheets”. Bij de meeste thema’s kun je deze optie dus negeren.
Mocht je het nodig om de naam, beschrijving, auteur en dergelijke aan te passen van het child theme, dan kun je bij stap 7 op “Show/Hide Child Theme Attributes” klikken om het aan te passen. Je kunt dit achteraf ook altijd doen in het style.css-bestand van je child theme.
Stap 8 is handig wanneer je al tijden gebruik hebt gemaakt van het hoofd thema en nu pas overschakelt naar een child theme. Door deze optie aan te vinken, worden de menu’s, widgets en customizer settings van het hoofdthema overgenomen. Dit scheelt je dus weer mooi wat werk.
Let er wel op dat soms niet alle opties goed worden overgenomen. Controleer alles altijd nog na het maken van je child theme.
Eenmaal alles ingesteld zoals je het wilt hebben? Klik op “Create New Child Theme” om de child theme daadwerkelijk te maken. Je moet vervolgens zelf nog wel je child thema activeren via “Weergave -> Thema’s”.
Nadat je een child theme hebt aangemaakt, heb je de plugin in principe niet meer nodig en kun je de plugin weer verwijderen van je website.
Zelf handmatig een child theme maken
Het is niet heel moeilijk om zelf handmatig een child theme aan te maken, maar het kost net even wat meer tijd dan een paar keer klikken in een plugin.
Het enige wat je in principe moet doen om een child theme te maken, is een nieuwe map en twee bestanden aanmaken.
Wanneer je zelf een child theme wilt maken heb je tevens toegang nodig tot de server van je website via (s)FTP. Je kunt hiervoor een programma als FileZilla gebruiken. Een andere mogelijkheid is om van de child theme map een .zip bestand te maken en deze te uploaden via “Weergave -> Thema’s -> Nieuwe Toevoegen”.
Hoe kun je handmatig een child theme maken?
Om een child theme te maken kun je het best een map aanmaken op je computer. De naam van de map maakt in principe niet uit zolang er maar geen spaties gebruikt worden. Het is gebruikelijk om het naamvanjethema-child te noemen, maar dit is niet noodzakelijk.
Style.css-bestand creëren
In je net aangemaakte map moet je een style.css-bestand plaatsen. Je kunt al een style.css-bestand maken met een programma als “Kladblok”, maar natuurlijk ook met code-editors als Notepad++ (windows) of Atom (Mac).
Vul vervolgens onderstaande code in en vergeet niet om deze informatie te updaten naar je eigen informatie.
/*
Theme Name: Naam van je child theme
Theme URI: http://jewebsitenaam.nl/
Description: Beschrijving van je thema
Author: Je naam
Author URI: http://jewebsitenaam.nl/
Template: Mapnaam hoofdthema
Version: 1.0.0
*/
/* Vanaf hieronder kun je CSS plaatsen
-------------------------------------- */
Je kunt bovenstaande regels naar wens aanpassen en bepaalde regels kun je ook achterwegen laten als je het niet wilt invullen. De enige regels die verplicht zijn om te gebruiken zijn Theme Name en Template.
- Theme name moet een unieke naam zijn voor je child theme.
- Template moet verplicht de mapnaam zijn van het hoofdthema, anders werkt het niet. Let dus goed op dat je de juiste naam invult.
Enqueue stylesheet
Naast een style.css-bestand, moeten we ook nog het style.css-bestand van het hoofdthema in het child theme verwerken, om alle opmaak goed te houden. Technisch gezegd moeten we de stylesheet enqueue.
Let op: Vroeger was de meest gebruikte methode om @import te gebruiken in het style.css-bestand om de stylesheet van het hoofdthema te laden. Hedendaags is dit niet langer aan te raden, aangezien dit de laadtijd langer maakt en het mogelijk is dat de stylesheet van het hoofdthema twee keer geladen wordt.
Wat we nu moeten doen is een functions.php-bestand aanmaken. Hierin kunnen we de stylesheet van het hoofd thema toevoegen. Je kunt dit met onderstaande code doen.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Wanneer je geen verstand hebt van PHP, maak je dan niet druk om waarom deze code werkt.
Tip: Doe dit alleen als het niet werkt
Mocht het niet helemaal goed gaan met bovenstaande code. Het is gebruikelijk om in het functions.php-bestand niet te sluiten met “?>”. Wanneer bovenstaande code niet werkt, kun je dit weghalen, waarna het waarschijnlijk wel probleemloos werkt.
Child theme uploaden naar WordPress
Eenmaal alles aangemaakt en opgeslagen kun je via (s)FTP inloggen op de server van je website om de bestanden te uploaden. De juiste plek om de child theme map te uploaden is in de map /wp-content/themes/.
Wanneer je de map hebt geüpload, kun je in het WordPress beheerdersgedeelte naar “Weergave -> Thema’s” gaan om de child theme te activeren. De naam die WordPress voor je child theme gebruikt heb je zelf bepaald in het style.css-bestand.
Indien je nog geen extra CSS aan het style.css-bestand hebt toegevoegd, zal je nog geen veranderingen zien wanneer je jouw child theme activeert. Alles wat je in de toekomst toevoegt aan het style.css-bestand van je child theme heeft wel effect op de opmaak van je website.
Template bestanden aanpassen
Op dit moment denk je misschien dat je alleen de mogelijkheid hebt om iets aan te passen met CSS, maar wat nou als je ook de PHP-bestanden wilt aanpassen?
Wanneer je een PHP-bestand van het hoofd thema wilt aanpassen moet je dit bestand kopiëren, bewerken en vervolgens toevoegen aan je child theme.
Nogmaals, het bewerkte bestand met aanpassingen moet dus in je child theme terecht komen. Wanneer je dit gedaan hebt zal je meteen de aanpassingen zien op je website.
Het originele bestand kun je probleemloos in het hoofd thema laten, omdat het bestand in het child theme leidend is.
Het functions.php-bestand is een uitzondering
Bovenstaande methode werkt echter niet bij het functions.php-bestand. Het functions.php-bestand wordt niet overgeschreven, WordPress gebruikt beide functions.php-bestanden.
Wil je dus iets aanpassen in het functions.php-bestand van het hoofd thema, dan moet je het originele bestand aanpassen.
Wil je iets nieuws toevoegen, dan kun je dit beter in het functions.php-bestand van je child theme plaatsen. Op deze manier weet je precies wat je zelf nieuw hebt toegevoegd en hoef je dit niet na elke update opnieuw toe te voegen.
Conclusie
Zoals je hebt kunnen lezen in dit artikel is het gelukkig niet super moeilijk om een WordPress child theme aan te maken en heb je eigenlijk geen goede reden om het niet te doen als je iets van je thema wilt aanpassen.
Het kost maar een paar minuten om een child theme te maken en op deze manier hoef je niet bij iedere thema update alle wijzigingen opnieuw aan te brengen.
Maak jij gebruik van een child theme op je website of maak je alle aanpassingen in het hoofd thema? Laat het hieronder weten in de reacties.
