WordPress child theme maken

Een WordPress child theme maken is heel makkelijk en het bespaart je een hoop gedoe. In dit artikel vertel ik je waarom je een child theme zou moeten gebruiken én hoe je er een maakt.

Waarom child themes gebruiken?

Een child theme gebruiken is voornamelijk handig om wijzigingen te kunnen maken aan het WordPress-theme dat je gebruikt. Je kunt de aanpassingen dan in je child theme doen, zodat je het hoofd-theme niet hoeft aan te passen. De reden dat je het hoofd-theme niet wilt aanpassen is dat deze wijzigingen dan verloren zullen gaan wanneer er een update beschikbaar komt voor dat theme. WordPress zelf adviseert ook om child themes te gebruiken voor het maken van aanpassingen aan WordPress-themes.

Veel aanbieders van premium WordPress themes (zoals Elegant Themes en StudioPress) leveren standaard child themes bij hun WordPress-themes. In deze child themes kun je dan aanpassingen doen die niet verloren gaan wanneer er een nieuwe versie wordt uitgebracht van het theme dat je gebruikt.

Een WordPress child theme maken

In dit artikel gaan we er vanuit dat je een child theme wilt aanmaken voor het Twenty Twenty–one theme. Dit is (op dit moment) het theme dat standaard wordt meegeleverd bij iedere nieuwe WordPress-installatie. Wil je een child theme maken voor een ander WordPress-theme, dan kun je dit artikel nog steeds gebruiken. Je dient dan alleen de naam aan te passen van het theme dat je gebruikt.

Log nu via FTP in op je hosting en ga naar /wp-content/themes/. Hier vind je de themes die op jouw WordPress-website geïnstalleerd zijn. Als het goed is staat hier de folder “twentytwentyone” (of de naam van jouw theme). Maak nu in de /wp-content/themes/ folder een nieuwe folder aan genaamd twentytwentyone-child. Open nu op je computer een tekstbewerker. Voor Windows gebruik ik altijd Notepad++ en voor Mac Texteditor.

Style.css-bestand aanmaken

Plak de volgende code in een nieuw bestand:

/*
 Theme Name:   Twenty Twenty-one Child
 Theme URI:    https://www.wplounge.nl/
 Description:  Twenty Twenty-one Child Theme
 Author:       Roger Overdevest
 Author URI:   https://www.wplounge.nl/
 Template:     twentytwentyone
 Version:      1.0.0
 Tags:         plaats, hier, jouw, tags, gescheiden, door, kommas
 Text Domain:  twentytwentyone-child
*/

/* =Eigen CSS hier beneden plaatsen
-------------------------------------------------------------- */

Pas eventueel de “Theme Name”, “Description”, “Author” en de URL’s aan (hier ben je vrij in). De “template” zou gelijk moeten zijn aan de naam van de folder van het hoofd-theme. In dit geval is dat dus “twentytwentyone“, maar als je bijvoorbeeld Divi van Elegant Themes gebruikt zou dit “divi” moeten zijn. Bij Text Domain vul je de folder in van je child theme (in ons voorbeeld is dat twentytwentyone-child).

Sla dit bestand nu op met de naam style.css en open een nieuw bestand in je tekstbewerker.

De style.css van het hoofd-theme inladen met functions.php

In dit nieuwe bestand gaan we de style.css van het hoofd-theme importeren. Plak de volgende code in dit nieuwe bestand:

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

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

Met deze PHP-code maak je een function aan waarmee het style.css van het hoofd-theme wordt geïmporteerd. Vroeger werd dit nog gedaan met een @import in het style.css van het child theme, maar tegenwoordig is het de bedoeling dat je het via het functions.php-bestand doet. Sla dit bestand op met de naam functions.php.

Bestanden uploaden

Ga terug naar je FTP-client en open de folder die je hebt aangemaakt voor je child theme. In ons voorbeeld heet deze folder twentytwentyone-child. Upload nu de twee bestanden die je hebt aangemaakt (style.css en functions.php) naar deze folder. Je child theme is nu klaar voor gebruik. Wanneer je inlogt in WordPress en naar Weergave > Thema’s gaat zul je je nieuwe child theme zien staan:

Je kunt je child theme nu activeren. Het enige dat je child theme op dit moment nog doet is het importeren van het hoofd-theme (Twenty Twenty-one). Er zal dus niets veranderen op je website als je het child theme activeert.

Eventuele wijzigingen in CSS-code dien je vanaf nu te maken in het style.css-bestand van je child theme.

Optioneel: Een afbeelding aan je child theme toevoegen

Zoals je in de screenshot hierboven kunt zien wordt er nog geen afbeelding getoond bij je child theme. Deze kun je gelukkig heel simpel toevoegen. Het enige dat je hoeft te doen is een afbeelding te uploaden naar de folder van je child theme. Maak een afbeelding van 1200×900 pixels en noem deze afbeelding screenshot.png. WordPress zal deze afbeelding nu automatisch tonen bij je child theme. Dit is alleen zichtbaar voor gebruikers in WordPress, het maakt voor je bezoekers dus niets uit of je een screenshot toevoegt.

<h2>Meestgestelde vragen samengevat</h2>

Beoordeel dit artikel