Child theme maken in WordPress

Wil je grote aanpassingen aan je gekozen WordPress thema maken? Dan is het een must om een child theme te maken. Als je het thema update, dan blijven deze grote aanpassingen namelijk gewoon ongewijzigd met een child theme. Lees snel verder over wat een child theme eigenlijk is en op welke manieren je het zelf eenvoudig kan maken.

Video

Voor de liefhebbers is er ook een video:

Wat is een child theme?

Om te begrijpen wat een child theme is, gaan we het eerst hebben over een parent theme.

Een parent theme is een compleet thema inclusief alle verplichte template files en assets om het thema goed te laten werken.

Een child theme erft de opmaak en de functionaliteiten van een parent theme. Een child theme heeft dus dezelfde opmaak en functionaliteiten als een parent theme.

Echter kan je met een child theme de opmaak veranderen en bijvoorbeeld ook extra functionaliteiten toevoegen.

Zonder child theme kan je ook aanpassingen doen, direct in de parent theme, maar dan gaan alle aanpassingen verloren bij een update.

Dat wil je niet, neem ik aan?

Voordelen child theme

Een child theme heeft vele voordelen, hieronder opgesomd:

• Bespaart ontwikkeltijd, omdat je zelf niet opnieuw alles hoeft uit te vinden.
• Aanpassingen en/of toevoegingen zijn netjes gescheiden tussen child en parent theme. Dit maakt het overzichtelijk.
• Er kan gewoon een update plaatsvinden voor je parent theme, zonder dat het thema kapot gaat.
• Mooie manier om te leren over theme development binnen WordPress.
• Makkelijke manier om een theme te verbeteren en/of naar je eigen hand te zetten.
• Veilige manier om verbeteringen en/of toevoegingen aan een theme te testen.

Alternatieven child theme

Ga je geen grote aanpassingen aan een thema maken, maar alleen kleine? Dan hoef je niet per se een child theme aan te maken.

Alternatieven zijn dan:

• Voor kleine CSS aanpassingen: Maak gebruik van de extra CSS sectie in de Customizer of een custom CSS-plugin.
• Thema gebruiken met veel aanpassingsmogelijkheden, zoals GeneratePress.
• Aanpassingen maken met een page builder, zoals Elementor.
• Code Snippets Plugin gebruiken.

Child theme maken via FTP

Ben je bekend met een FTP client, zoals FileZilla, en heb je je FTP-gegevens? Dan is het appeltje eitje om het op deze manier te doen.

Ben je er niet bekend mee? Dan is het interessant om te leren. Je hostingprovider stuurt vaak bij aanmelding een mail met je FTP gegevens.

Heeft je hostingprovider dat niet gedaan of ben je de mail kwijt? Dan kan je sowieso in je account van je hostingprovider de FTP gegevens terugvinden.

Met je FTP gegevens kan je verbinding maken met de server waar de bestanden van je WordPress website op staan.

Connectie maken met server in FileZilla

Heb je de FTP client FileZilla nog niet gedownload? Dan kan dat eenvoudig op de website van FileZilla.

Open FileZilla als je het programma hebt gedownload.

Om connectie te maken met de server heb je de volgende gegevens nodig:

Als het goed is, heb je deze gegevens nu. Vul ze in en klik op “Snelverbinden”.

Naar map met WordPress bestanden

Ga daarna naar de map waarin alle bestanden van je WordPress website staan. In de map van je domeinnaam is dat vaak “public_html”.

Per hostingprovider kan het wat afwijken, maar als je deze bestanden ziet, zit je goed:

Let er wel op dat je geen bestanden (per ongeluk) verplaatst of verwijdert, anders kan je website stuk gaan. Handig is ook als je hostingprovider automatisch back-ups maakt, voor het geval dat.

Nog beter is om zelf back-ups te maken van je WordPress website.

Zit je in de juiste map en zie je de bovenstaande bestanden van je WordPress website? Ga dan naar: /wp-content/themes/.

Hier staan alle thema’s die je hebt gedownload of die er automatisch al stonden bij het installeren van je WordPress website.

Je gebruikt echter maar één thema.

Child theme map aanmaken

Maak in de themes map een nieuwe map aan genaamd: NaamVanHetThemaDatJeGebruikt-child.

Dus stel dat je Divi als thema hebt, dan wordt dit: divi-child.

Let erop dat je geen spaties mag gebruiken. In deze map plaats je een CSS en PHP bestand, die we zo gaan maken.

style.css bestand aanmaken

We beginnen met het CSS bestand. Makkelijk is om een source code editor te gebruiken, zoals Visual Studio Code.

Maak een nieuw bestand en zet dit erin:

/*
Theme name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: John Doe
Author URI: http://example.com
Template: Divi
Version: 1.0.0
*/

/* Thema aanpassingen hieronder
------------------------------------------------------- */

Theme name en Template zijn verplicht om erin te hebben. De rest is optioneel. De Template parameter moet exact overeenkomen met de naam van je parent theme map.

In dit voorbeeld is dat Divi, maar mocht je een ander thema hebben, dan kijk je hoe deze map heet in /wp-content/themes/ en vul je dat in bij de Template parameter.

De naam van de map komt meestal overeen met de naam van het thema. Let wel op hoofdletters. De andere parameters kan je ook aanpassen.

Sla het bestand op als “style.css”. Let op de .css extensie aan het eind van de naam van het bestand. Door middel van de .css extensie is het bestand ook daadwerkelijk een CSS bestand.

functions.php bestand aanmaken

Maak een nieuw bestand en zet dit erin:

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

function enqueue_parent_child_styles() {
   // Laad eerst de parent style.css
   wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
   
   // Laad daarna de child style.css, zodat deze de parent styles kan overschrijven
   wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

Hiermee laad je eerst de style.css van het parent theme en daarna de style.css van het child theme.

Waarom is dat belangrijk? Omdat nu je aanpassingen in de style.css van het child theme de style.css van het parent theme overschrijven.

Stel dat het andersom zou zijn, dat de style.css van het parent theme de style.css van het child theme zou overschrijven, dan kan het zijn dat je aanpassingen geen effect hebben.

Niet alleen functions.php kan je aanpassen. Je kan ook andere template files in je child theme zetten die dezelfde files overschrijven in het parent theme, zoals header.php.

Bestanden in child theme map zetten

Open de child theme map die je net hebt aangemaakt. Zet daar style.css en functions.php in.

Gedaan? Dan zijn we er bijna!

Child theme activeren

Ga in het dashboard van je WordPress website naar Weergave > Thema’s. Hier staat nu als het goed is je child theme. Activeer deze.

Je kan het child theme ook een afbeelding geven. Dit is optioneel. Dit kan je doen door een afbeelding in je child theme map te plaatsen.

Sla de afbeelding op als screenshot.png. 1200×900 pixels is aanbevolen. De afbeelding wordt door WordPress herkend en getoond in je child theme.

Voor jezelf (Admin) is dit vooral handig. Bezoekers van de website zullen hier niks van merken.

In het dashboard ga je naar Weergave > Thema bestand editor.

Hier staat het style.css bestand van je child theme en kan je aanpassingen doen, zonder dat het verloren gaat bij een update. Ook staat daar het functions.php bestand.

Child theme plugins

Is het bovenstaande te ingewikkeld en wil je meer gemak? Dan staan hieronder de beste child theme plugins:

• Child Theme Configurator
• Child Theme Creator by Orbisius

Hopelijk heb je wat gehad aan dit artikel, succes!

Heb je vragen en/of opmerkingen? Dan hoor ik het wel hieronder. 😉