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:

Verbinding maken FileZilla

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:

Bestanden WordPress

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:

Hopelijk heb je wat gehad aan dit artikel, succes!

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

5 gedachten over “Child theme maken in WordPress”

  1. Dag Bas,
    ik heb een child-versie van mijn thema gemaakt, maar merk daarbij dat de aanpassingen die ik in het oorspronkelijke thema al had aangebracht niet (allemaal) overgenomen worden. Is dat toch nog mogelijk? De aanpassingen die ik had willen doorvoeren is het lettertype (verschillend text en koppen) en ook layout van de menuknoppen (kleur, type, grootte tekst)
    Met groet, Max

    Beantwoorden
    • Hoi Max,

      Hoe heb je die aanpassingen gedaan? In de bestanden van het hoofdthema of bijvoorbeeld via de Customizer?

      Als je het via de bestanden van het hoofdthema hebt gedaan, dan kan het verloren zijn gegaan bij een update van het thema.

      Echter, kan je deze aanpassingen nu gewoon doen in het child theme, de bestanden van het child theme.

      Dan blijven deze aanpassingen gewoon bestaan en worden ze geladen na het parent theme.

      Laat me weten als je meer vragen hebt.

      Gr. Bas

      Beantwoorden
  2. Hoi Bas,
    dank voor je reactie! De aanpassingen die ik in het theme had gedaan, heb ik via de customizer erin gezet. Had dan ook verwacht dat deze dan bewaard zouden blijven en het child theme alleen de nieuwe aanpassingen zou toevoegen. Maar bij het child-theme actief werkt bv. de frontpage niet meer zoals in het oorspronkelijke theme (met sections) en is de header van de frontpage ook de originele ipv die ik geplaatst had.
    Ga nu kijken om alles in test omgeving vanaf de originele versie aan te passen met child-theme. Duimen maar 😉
    Met groet! Max

    Beantwoorden
    • Hoi Max,

      Ik heb het even opgezocht voor je. Het blijkt, dat wist ik ook niet, dat Customizer instellingen gekoppeld zijn aan een thema.

      Dus toen je hoofdthema actief was, heb je aanpassingen gedaan in de Customizer, deze settings zijn in de database gekoppeld aan het op dat moment actieve thema.

      Als je het child theme activeert, dan bestaan deze aanpassingen nog wel in de database, maar deze zijn niet gekoppeld aan het child theme.

      Vandaar dat het dus niet meer zichtbaar is.

      Er is ook een Customizer Export/Import plugin waarmee je de aanpassingen makkelijk naar het child theme kan zetten: https://wordpress.org/plugins/customizer-export-import/

      Heb je niet zoveel aanpassingen gedaan? Dan kan je het ook prima handmatig doen.

      Wel altijd handig inderdaad om het eerst in een testomgeving te doen en back-ups te maken.

      Gr. Bas

      Beantwoorden

Plaats een reactie