Een child theme zorgt er voor dat je wijzigingen aan kan brengen in de functionaliteiten en de styling van het hoofdthema (‘parent theme’) van je WordPress website, zonder dat deze wijzigingen verloren gaan bij een update van het hoofd thema. Het aanmaken van een child theme is kinderlijk eenvoudig. In deze post laat ik je stap voor stap zien hoe je een child theme maakt en hoe je deze kan gebruiken op jouw website.

Wat is een child theme?

Met een child theme kan je de layout, styling en functionaliteit van een them wijzigen zonder dat het bestaande thema wordt aangeraakt. Dit is handig wanneer je bijvoorbeeld een (multi-purpose) thema van een andere ontwikkelaar gebruikt. Deze thema’s worden voor de veiligheid en snelheid namelijk regelmatig geüpdatet. Zou je in dat thema direct wijzigingen aanbrengen, dan ben je die na een update dus meteen weer kwijt.

Met een child theme kan je op een veilige manier wijzigingen aanbrengen aan het parent theme zonder dat je die wijzigingen weer kwijt bent na een update hiervan.

Veel grote (multi-pupose) thema’s zoals Jupiter X en Bridge bevatten al een voorgebouwd child theme. Dat is handig, want dan hoef je deze enkel te uploaden naar je wp-content/plugins map en kan je het child theme direct activeren en gebruiken.

Weet je niet hoe je een (child) theme upload en activeert? Lees dan eens deze post: Een WordPress thema installeren.

Hoe maak je een child theme?

In deze post maak ik een child theme voor het WooCommerce thema Storefront. Gebruik je een ander thema? Geen probleem; in feite kan je voor ieder thema een child theme maken.

Maak een nieuwe map aan

Maak op je bureaublad een nieuwe map aan met de naam van het hoofdthema, gevolgd door -child. Voor het Storefront thema zou de naam dan worden: storefront-child. Gebruik je een ander thema, vervang dan dus storefront door de naam van je eigen hoofdthema.

Een nieuwe map voor je child theme aanmaken

Deze map upload je later naar de wp-content/themes map van je website, maar eerst moeten er nog wat bestanden worden aangemaakt om het child theme te laten werken.

Bestanden aanmaken

Een child theme heeft om te kunnen functioneren minimaal een aantal bestanden nodig, namelijk:

  • style.css
  • functions.php

Deze bestanden kan je aanmaken met een tekstverwerker, zoals Texteditor (Mac) of Notepad (Windows), of als je dat hebt een IDE (een geavanceerd en professioneel programma speciaal gericht op webdevelopment), zoals Atom, Coda, PhpStorm of Dreamweaver.

Style.css bestand aanmaken

Het style.css bestand zorgt er voor dat je child theme wordt herkend door WordPress als thema. Je kan in dit bestand ook eventuele CSS plaatsen.

Open je tekstverwerker of IDE, plaats de onderstaande code in een nieuw bestand en pas de gegevens aan naar wens. Zorg er wel voor dat je minimaal de opties Theme name en Template invult. De rest is optioneel.

/*
 Theme Name:   Storefront Child
 Theme URI:    https://wpsimpel.nl/storefront-child/
 Description:  Storefront Child Theme
 Author:       Justin Picard
 Author URI:   https://wpsimpel.nl
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  storefrontchild
*/

Geef je thema een naam bij Theme Name: en vul bij Template: de mapnaam in van het hoofdthema waarvoor je een child theme maakt. Zo herkent WordPress bij welk hoofdthema je child theme hoort.

Bij Text Domain: vul je de naam van de map van je child theme in. Dit text domain kan je later eventueel gebruiken voor het vertalen van strings die je aan templates en functies van je child theme toevoegt.

Functions.php bestand aanmaken

Met het functions.php bestand kan je extra functies en functionaliteiten toevoegen aan je parent theme zonder dat je dus aan de code van je parent theme hoeft te zitten.

Voeg allereerst in dit bestand een functie toe waarmee je het CSS-bestand van je parent theme inlaadt. Vroeger kon dit nog met een @import regel in het style.css bestand van je child theme, maar tegenwoordig is het dus beter om dit middels een functie in het functions.php bestand te doen.

<?php
/**
 * Enqueue the parent theme stylesheet.
 */
add_action( 'wp_enqueue_scripts', 'wpsimpel_enqueue_parent_styles' );

function wpsimpel_enqueue_parent_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Onder deze code kan je ook andere extra functies toevoegen in de vorm van code snippets. Bijvoorbeeld voor het aanpassen van valutatekens in een WooCommerce webshop of het uitschakelen van onnodige emoji-scripts.

Template bestanden bewerken

In je child theme kan je ook template bestanden bewerken van je parent theme of plugins die gebruik maken van template bestanden (zoals WooCommerce).

Kopieer hiervoor het template bestand van het parent theme welke je wilt aanpassen, en zorg ervoor dat deze op dezelfde locatie staat als in het parent theme. Wil je bijvoorbeeld het header.php bestand van het parent theme bewerken, kopieer dan dat bestand. Staat het in het parent theme in de root, plaats dan dit gekopieerde bestand in de root van je child theme.

Bijvoorbeeld:
Parent theme: storefront/header.php
Child theme: storefront-child/header.php

Staat het header.php bestand van het parent theme in een submap, bijvoorbeeld views/header.php, zorg er dan voor dat je in je child theme een submap aanmaakt met dezelfde naam als in het parent theme. Plaats vervolgens het gekopieerde header.php bestand in die submap.

Bijvoorbeeld:
Parent theme: storefront/views/header.php
Child theme: storefront-child/views/header.php

Een child theme installeren en activeren

In feite is je child theme nu klaar voor gebruik. Het enige wat je nog moet doen is je child theme uploaden naar de wp-content/themes map van je website, en deze vervolgens activeren.

Weet je niet hoe dit moet? Lees dan eerst de post Een WordPress thema installeren.

Bonus: Een afbeelding toevoegen aan je child theme

Wanneer je het child theme hebt geupload naar je website zal je op de pagina Thema’s (Weergave > Thema’s in de WP Admin) zien dat je child theme nog niet beschikt over een afbeelding. Dit kan je gelukkig eenvoudig toevoegen.

Een afbeelding toevoegen aan je child theme

Maak een afbeelding van 1200 x 900 pixels breed en noem deze screenshot.png. Aan de inhoud van de afbeelding zijn verder geen eisen gesteld.

Upload het screenshot.png bestand via FTP naar de map van je child theme. Als je de thema’s pagina in de WP Admin ververst zie je nu dat de door jou gemaakte afbeelding wordt getoond.

Child theme screenshot.png

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?