Een WordPress child theme maken

Een WordPress child theme maken

Stel je hebt een aantal wijzigingen gemaakt in de broncode of het css stijlblad van je WordPress thema. Vervolgens verschijnt er een update van het thema, en na het installeren van de update zijn je wijzigingen ineens verdwenen. Heel vervelend, zeker als je geen backup hebt gemaakt van je website. Om dit te voorkomen kun je een WordPress Child Theme maken. Dit is een speciaal thema waarin je de wijzigingen aanbrengt voor een WordPress thema. Het andere thema noemen we een hoofd thema.

Het maken van een child theme is redelijk eenvoudig en biedt vele voordelen. Het child theme neemt namelijk de functionaliteiten en de layout van het hoofdthema over. Nu kun je naar wens wijzigingen toepassen zonder dat je het risico loopt op het kwijtraken van de aanpassingen bij het updaten van het hoofdthema. Ook kun je via een child thema extra functies toevoegen of ongewenste functies verwijderen.

Bij sommige thema’s wordt standaard een child theme meegeleverd. Je kunt dit thema eenvoudig installeren en activeren, naast het hoofd thema. Wordt er geen child theme meegeleverd? Dan kun je deze zelf maken. In deze blogpost ga ik je uitleggen hoe je handmatig een WordPress child theme kunt maken.

WordPress Child Theme maken

Laten we beginnen met het maken van het child thema. Als basis nemen we het thema Frutti, een van de moderne Elementor WordPress Themes welke geschikt is voor WordPress 5.

1. Om vliegensvlug van start te gaan kun je dit voorbeeld child theme downloaden. Het bevat de bestanden die je nodig hebt om zelf een WordPress child theme te maken. Download het child theme via de volgende link:

Voorbeeld Child Theme

2. Pak het zip bestand uit op je computer. Het zip bestand bestaat uit 3 bestanden waarvan je er twee nodig hebt, namelijk style.css en functions.php.

3. Als eerste beginnen we met het stijlblad style.css. In dit bestand moet je twee regels aanpassen, te weten Template en Text Domain. De overige waardes mag je ongewijzigd laten, maar je mag dit aanpassen zoals je wilt.

De inhoud van het style.css bestand is als volgt:

@charset "UTF-8";/*!
Theme Name: Voorbeeld Child Thema
Theme URI: https://www.zign.nl/wordpress-templates.html
Author: Zign
Author URI: https://www.zign.nl/
Description: Thema omschrijving
Template: mapnaam_van_het_hoofdthema
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: voorbeeld-child
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-menu, featured-images, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* CSS aanpassingen plaats je onder deze regel ------------------------------- */

Deze twee regels pas je aan:

Template: mapnaam_van_het_hoofdthema

en:

Text Domain: voorbeeld-child

In dit voorbeeld ga ik uit van het thema Frutti als hoofdthema. In dit geval pas ik de twee regels als volgt aan:

Template: frutti
Text Domain: frutti-child

4. Nu passen we het bestand functions.php aan. Ook hierin moet je de naam van het hoofdthema verwerken.

De inhoud van het functions.php bestand is als volgt:

<?php
/**
 * Example Child Theme functions and definitions.
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Example Child Theme
 */
add_action( 'wp_enqueue_scripts', 'hoofdthema_child_theme_enqueue_styles' );

/**
 * Enqueue styles.
 */
function hoofdthema_child_theme_enqueue_styles() {

	$parent_style = 'hoofdthema-theme-style';

	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'hoofdthema-child-theme-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get( 'Version' )
	);
}

Op regel 9 vervang je het woord hoofdthema met de naam van het hoofd thema. Ik gebruik frutti, dus verander de regel als volgt:

add_action( 'wp_enqueue_scripts', 'frutti_child_theme_enqueue_styles' );

5. Nu passen we de functie aan, ook hierin vermeld ik de naam van het hoofd thema frutti.

function frutti_child_theme_enqueue_styles() {

	$parent_style = 'frutti-theme-style';

	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'frutti-child-theme-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get( 'Version' )
	);
}

Child Theme installeren

6. We zijn klaar! Pak nu het zip bestand in, en noem het zip bestand naar (bijvoorbeeld) frutti-child.zip.

7. Laten we het thema uploaden. Open het WordPress Dashboard, en ga naar Weergave > Thema’s > Nieuwe toevoegen > Uploaden. Upload het zip bestand met het child thema. Na het uploaden zou je deze melding moeten zien:

Bezig met installeren van thema vanuit bestand: frutti-child.zip
Uitpakken van pakket…
Thema installeren…
Dit thema vereist een hoofdthema. Controleren of deze is geïnstalleerd.
Het hoofdthema, Frutti 1.0.0, is op dit moment geïnstalleerd.
Thema is geïnstalleerd.

8. Het child theme is nu actief op je website.

9. En nu? Je hebt het child theme actief gemaakt. Alle wijzigingen die je vanaf nu aanbrengt in het child thema zullen bewaard blijven als je het hoofdthema update met een nieuwe versie. Wil je css stijlen wijzigen? Pas deze dan aan in het css stijlblad van het child theme. Wil je een functie toevoegen, dan kun je deze rechtstreeks in het bestand functions.php van het child theme plaatsen. Wil je een weergave veranderen? Kopieer dan het bestand vanuit het hoofdthema naar het child thema. Bijvoorbeeld een wijziging van het bestand single.php voor een single post. Kopieer dit bestand single.php en plaats het in de map met het child thema. Vervolgens kun je het bestand aanpassen. Let op dat je de mappenstructuur behoudt, dus als je een bestand in een submap van het hoofdthema wilt aanpassen, zorg dan dat je deze submap ook in het child thema aanpast.

Succes! Heb je nog vragen? Laat het me weten in de comments hieronder!

Eén Reactie
  1. Geweldige tip, dankjewel. Ik ben op dit moment bezig om mijn website compleet opnieuw te maken met Elementor. Ik ga een child thema maken zodat ik ook het thema later veilig kan updaten!

Leave a reply

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *