WordPress child theme maken

WordPress child theme maken

WordPress child theme maken

Wil je een WordPress child theme maken? In dit artikel vertel ik wat een child theme is én waarom je er een zou moeten gebruiken. Daarnaast laat ik stap voor stap zien hoe je een child theme maakt.

Wat is een WordPress child theme?

Je weet waarschijnlijk al wat een WordPress theme is. Een theme is een folder met bestanden die ervoor zorgen dat jouw WordPress site een bepaalde layout en stijl heeft. Voor WordPress zijn duizenden gratis én betaalde themes beschikbaar. Je vindt de op jouw site geïnstalleerde themes onder het menu Weergave > Thema’s (of in het Engels: Appearance > Themes).

Maar wat is dan een child theme? Een child theme is net als ieder ander theme een folder met bestanden en je vindt ze op dezelfde plek in je WordPress admin. Maar waar een “normaal” theme altijd geactiveerd kan worden, kan een child theme alléén geactiveerd worden als er een parent theme voor beschikbaar is.

Waarom heb je een WordPress child theme nodig?

De reden om een child theme te gebruiken, is dat je de layout en stijl van je website kunt aanpassen, zonder dat deze wijzigingen verloren gaan tijdens een update. Updates zijn belangrijk omdat eventuele bug en lekken in je theme hiermee worden opgelost.

Ik zal een voorbeeld geven. Stel dat een bepaald stuk tekst op mijn website een zwarte (#000) kleur heeft die ik wil aanpassen naar donkergrijs (#575757). Ik zou dan mijn theme kunnen openen en in style.css op zoek gaan naar die tekst:

.entry-content {
  color: #000;
}

Door de code hierboven aan te passen naar het onderstaande, zal de tekst van kleur veranderen.

.entry-content {
  color: #575757;
}

Dit werkt prima, en je website zal er zeker niet van kapot gaan als je hier en daar wat CSS aanpast. Er zal echter een probleem ontstaan op het moment dat je een update installeert voor je theme. Themes worden regelmatig geüpdatet om eventuele bugs en “security issues” op te lossen.

In het hierboven genoemde voorbeeld: zodra je je theme updatet, dan zal de tekstkleur weer terugspringen van grijs naar zwart.

Je kunt er natuurlijk voor kiezen om je theme dan maar helemaal niet te updaten, maar dit is natuurlijk geen échte oplossing. Het is niet future proof, omdat eventuele problemen in je theme niet opgelost kunnen worden. Ook kan het zijn dat het theme op een gegeven moment niet meer compatibel is met de nieuwste versies van WordPress, in combinatie met bepaalde plugins of met de nieuwere PHP-versies.

Ik hoor regelmatig van WordPress-gebruikers dat ze liever toch geen child theme gebruiken. Dat zou allemaal maar onnodig ingewikkeld zijn, en hun theme wordt toch nooit geüpdatet. Als dat zo is, dan raad ik je aan om sowieso op zoek te gaan naar een nieuw theme 😉 .

Hoe maak je een WordPress child theme?

Maar hoe maak je zo’n WordPress child theme? Soms hoef je geen child theme te creëren. Sommige themes (zoals Divi) komen standaard met een child theme. En wat mij betreft is dat ook wat je van een premium theme mag verwachten!

Helaas hebben de WordPress themes uit de repository op WordPress.org niet standaard een child theme inbegrepen. Gelukkig is het vrij eenvoudig om zelf een child theme te maken. Ik zal het stap voor stap uitleggen.

1: Je parent theme achterhalen

Voordat je een child theme kunt maken, moet je achterhalen welk theme er actief is. Dit kun je doen door in WordPress naar Weergave > Thema’s te gaan. Het actieve theme zal als volgt worden getoond:

Actieve WordPress theme
WordPress theme dat actief is

In dit voorbeeld is het actieve theme “Twenty Nineteen”. We zullen ook moeten achterhalen wat de “text domain” van het theme is. Dit kun je doen door naar Weergave > Thema editor te gaan. In het style.css bestand van je huidige theme kun je vervolgens het text domain achterhalen:

Text domain
Text domain

2: Child theme folder en style.css

Nu zul je een folder voor je child theme moeten maken. Ik doe dit op de desktop van mijn computer en noem de folder “wouterpostma”. Open nu een tekstbewerker zoals Notepad++ (Windows) of BBEdit (Mac).

Vul nu de volgende code in in je tekstbewerker:

/*
	Theme Name:   Wouter Postma
	Theme URI:    https://wouterpostma.nl/
	Description:  Wouter Postma
	Author:       Wouter Postma
	Author URI:   https://wouterpostma.nl/
	Template:     twentynineteen
	Version:      1.0.0
	Text Domain:  wouterpostma
*/

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

Zoals je kunt zien is dit het gedeelte waar je je child theme een naam geeft en een beschrijving. Je kunt deze regels allemaal naar wens aanpassen:

  • Theme Name → De naam van je child theme.
  • Theme URI → De URL van je child theme (dit kan gewoon de link naar jouw website zijn).
  • Description → Een beschrijving (mag ook leeg zijn).
  • Author → Je naam.
  • Author URI → Wederom de link naar je website.
  • Version → Een getal, bijvoorbeeld “1.0”.

De velden Template en Text Domain zijn wel belangrijk:

  • Template → Als template dien je de “text domain” van je parent theme in te vullen. Die hebben we bij stap 1 achterhaald. In dit geval is dat dus “twentynineteen”.
  • Text domain → De naam van de folder van je child theme. In dit geval is dat dus “wouterpostma”, maar als jouw folder “pietjepuk” heet dan is het “pietjepuk”.

Tot slot: sla dit bestand in de eerder gemaakte folder en noem het bestand style.css.

3: Functions.php bestand

Open nu je teksteditor en maak een nieuw bestand met daarin de volgende PHP-code:

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

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

Sla dit bestand op als functions.php in dezelfde folder.

Wat de PHP-code hierboven doet is het inladen van het style.css bestand van je parent theme.

4: Afbeelding voor je child theme (optioneel)

Eventueel kun je een afbeelding aan je child theme toevoegen. Deze afbeelding wordt getoond in de WordPress admin omgeving. Het maakt voor de bezoekers van je website dus verder niets uit. Als je géén afbeelding uploadt, ziet het er als volgt uit:

Child theme zonder afbeelding
Child theme zonder afbeelding

Wil je wél graag een afbeelding aan je child theme toevoegen? Plaats dan een afbeelding van 1200×900 pixels in de folder, met de naam screenshot.png.

5: ZIP bestand maken en uploaden

Als het goed is heb je nu een folder met twee bestanden (of drie, als je een afbeelding hebt toegevoegd):

child theme folder
Child theme folder met style.css en functions.php

Maak nu een ZIP-bestand van deze folder. Hoe je op een Windows computer een ZIP-bestand maakt lees je hier. Op een Mac doe je dat door met je rechter muisknop op de folder te klikken en dan “Compress folder” te kiezen:

ZIP maken op je Mac

Nu je een ZIP-bestand hebt, ga je naar WordPress en vervolgens naar Weergave > Thema’s. Klik nu bovenin op de knop Nieuwe toevoegen en vervolgens op Thema uploaden. Selecteer nu je ZIP bestand en klik op Nu installeren:

Selecteer je ZIP-bestand en klik op Nu installeren

Als alles goed is gegaan, zul je de volgende melding te zien krijgen:

Child theme succesvol geïnstalleerd

Zoals je hierboven ziet, herkent WordPress dat het om een child theme gaat: “Dit thema vereist een hoofdthema.” – WordPress controleert dan of dit hoofdthema aanwezig is. Is dat niet zo, dan kun je het child theme niet activeren. In dit geval is het hoofdthema aanwezig, en we kunnen dus direct op Activeren klikken om ons child theme te gaan gebruiken.

Alternatief: Child Theme Generator plugin

Ik vind het zelf een kleine moeite om de stappen hierboven te volgen, maar dat komt mede doordat ik dit al tientallen keren gedaan heb 🙂 . Vind je het nou iets te ingewikkeld of te veel werk? Dan kun je eventueel ook de gratis plugin Child Theme Generator gebruiken. Deze voegt een menu in WordPress toe waarin je met een paar klikken een child theme kan maken op basis van de op jouw website geïnstalleerde themes:

Child Theme Generator
Child Theme Generator (afbeelding via WordPress.org)

Wijzigingen maken

Een child theme werkt eigenlijk vrij eenvoudig. Als een bepaald bestand uit je parent theme óók in je child theme bestaat, dan wordt het bestand in het child theme als “leidend” gezien.

Wil je bijvoorbeeld wijzigingen maken in de footer van je theme? Kijk dan eerst in je parent theme waar de code zich bevindt die je wilt wijzigen. Dit zou bijvoorbeeld in het footer.php bestand kunnen zijn. Kopieer dit bestand vervolgens naar je child theme en maak je wijzigingen. In plaats van het footer-bestand van je parent theme wordt nu het bestand van je child theme gebruikt.

De uitzondering op deze regel is het style.css-bestand. In plaats van de CSS van de parent theme volledig uit te schakelen, hebben we deze ingeladen via het functions.php-bestand. Zo hoef je niet alle CSS uit je parent theme te kopiëren naar je child theme. Je hoeft in je child theme alléén CSS te plaatsen waarmee je de CSS-code uit het parent theme wilt “overschrijven”.

De volgende CSS zou bijvoorbeeld in je parent theme kunnen staan:

.site-title {
  font-weight: 700;
}

Deze code zorgt ervoor dat de titel van je website bold is (een font-weight van 700). Als je dit liever niet wilt, en bijvoorbeeld een normale font-weight wilt gebruiken, dan zet je de volgende code in het style.css-bestand van je child theme:

.site-title {
  font-weight: normal;
}

De CSS in je child theme is in dit geval leidend, en je site-titel zou niet langer bold moeten zijn.

Tot slot

Kom je er niet uit, of gaat er iets mis met je child theme? Laat een reactie achter.

Geschreven door
Wouter Postma
Reageer

Menu