Waarom je een child theme wilt gebruiken

Waarom je een child theme wilt gebruiken

In WordPress regelen thema’s alles over hoe je site eruitziet. Je hebt misschien al het hoofdstuk over thema’s in de WordPress video handleiding bekeken.

Wat is dit dan over child themes. Wat is een child theme? Waarom is een gewoon thema niet genoeg? Wanneer gebruik je dan zo’n child theme?

In dit artikel beantwoord ik al deze vragen en meer.

Wat is een child theme

Een child theme is een thema die de functionaliteit en het uiterlijk van een ander thema overerft. Dat andere thema noemen we dan het parent theme.

Waarom gebruik je een child theme

Child themes zijn de aanbevolen manier om aanpassingen te maken aan een thema. Maar waarom zou je niet gewoon in het thema zelf je aanpassingen maken?

Als je aanpassingen gemaakt hebt aan het thema zelf, werkt alles prima. Tot dat thema een update krijgt. WordPress zal dan alle bestanden overschrijven met de versie uit de theme repository. Dit betekent dat je alle wijzigingen kwijt bent, en dat elke keer wanneer je updatet. Het alternatief om nooit meer te updaten is een superslecht idee. Dan is het slechts een kwestie van tijd tot je site gehackt wordt.

Daarnaast scheelt een child theme heel veel tijd. Alle functionaliteit die in het parent theme zit krijg je er gratis bij. Dat kan je duizenden uren aan ontwikkeling schelen.

En als je in een child theme iets vergeet, heb je nog een fallback. WordPress kijkt dan gewoon in de parent theme hoe het probleem moet worden opgelost.

Ook heb je al je aanpassingen op één plek. Een child theme bevat alleen de aanpassingen die je aan het parent theme hebt gemaakt. Dat maakt het veel makkelijker om jouw werk te onderhouden.

Hoe zet je een child theme in

Als je een premium thema hebt, is de kans groot dat je er een child theme bij hebt gekregen. Dan is het gebruiken van een child theme erg gemakkelijk. Zorg dat beide thema’s op je website staan, en activeer het child theme. Op dit moment merk je nog niets, want je ziet gewoon nog het oude thema. Maar dit maakt het veel gemakkelijker om later aanpassingen aan je website te maken.

Als je thema niet met een child theme komt, zul je er zelf een moeten maken. Gelukkig is dat supergemakkelijk want je hebt maar twee bestanden nodig.

Stel dat je thema ‘artesign-theme’ heet, dan maken we een mapje aan in wp-content/themes, namelijk ‘artesign-theme-child’. Hierin stoppen we de volgende bestanden:

  • style.css
  • functions.php

Meer heeft een child theme niet nodig. In deze bestanden moeten we wel wat code toevoegen.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
/*
 Theme Name:   Artesign Theme Child
 Theme URI:    https://www.online-wp-leren.nl
 Description:  Artesign Child Theme
 Author:       Tim de Lang
 Author URI:   https://www.online-wp-leren.nl
 Template:     artesign-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  artesign-theme-child
*/

Let hier op de volgende dingen:

  • Verander elke regel met jouw gegevens, dus de juiste naam, url, auteur, etc.
  • De regel met template geeft aan wat de parent theme is. Dit is de naam van de map van het parent theme.
  • Het enige bestand die je nodig hebt om een child theme te maken is style.css, maar als je de css uit dat bestand daadwerkelijk wilt inladen, moet je hem enqueuen in functions.php.

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function artesign_theme_child_enqueue_styles() {
 
    $parent_style = 'artesign-theme-style';
 
    // Laad de parent theme style
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 
    // Laad de child theme style
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', artesign_theme_child_enqueue_styles);
?>

Als je nog nooit met PHP hebt gewerkt ziet dit stukje code er nogal indrukwekkend uit. Gelukkig is het niet zo moeilijk.

WordPress laadt niet automatisch de style van je parent theme in. Daarom moeten we dit handmatig doen. Alle functionaliteit wordt wel automatisch ingeladen.

Eerst definieren we een functie ‘artesign_theme_child_enqueue_styles()’. In deze functie geven we aan hoe de parent theme style heet. Daarna laden we eerst de parent theme style. Vervolgens laden we het child theme style in, zodat we zeker weten dat de style in het child theme de style uit het parent theme overschrijft.

Dan sluiten we de functie af, en zeggen we dat die functie moet worden uitgevoerd op het moment dat WordPress bezig gaat met alle scripts te verwerken.

Je kunt het bovenstaande stukje kopiëren en dan hoef je alleen maar de naam van de parent style aan te passen.

$parent_style = ‘artesign-theme-style’ wordt bijvoorbeeld

$parent_style = ‘jouw-theme-style’

Meer heb je niet nodig om een child theme te maken.

Waar je op moet letten als je een child theme activeert

Maak eerst een backup van je hele site

Als er wat mis gaat wil je niet van alles kwijt zijn. Maak dus altijd eerst een backup van al je bestanden, en van je database.

Menu’s, thema opties en widgets

Het is mogelijk dat je je menu’s, opties en widgets kwijtraakt als je het child theme activeert. Dit komt doordat je voor WordPress een heel ander thema installeert. Dan kan WordPress ook niets zeggen over hoe je het menu, de opties en de widgets wilt plaatsen.

Zorg dus dat je van tevoren goed opschrijft welke menu’s etc. er op welke plek actief waren. Dit kun je vinden bij:

Weergave > Menu’s

Weergave > Widgets

Weergave > Customizer > Menu’s

Weergave > Customizer > Widgets

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.