WPLounge

WordPress child theme maken

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.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »
Lees meer over Divi

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

WordPress child theme makenIn dit artikel gaan we er vanuit dat je een child theme wilt aanmaken voor het Twenty Seventeen-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 “twentyseventeen” (of de naam van jouw theme). Maak nu in de /wp-content/themes/ folder een nieuwe folder aan genaamd twentyseventeen-child. Open nu op je computer een tekstbewerker. Voor Windows gebruik ik altijd Notepad++ en voor Mac Textwrangler.

Style.css-bestand aanmaken

Plak de volgende code in een nieuw bestand:

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 “twentyseventeen”, 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 twentyseventeen-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:

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 twentyseventeen-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:

Child theme beschikbaar

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 Seventeen). 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.

Automatisch een child theme maken

Vind je het allemaal te ingewikkeld om via FTP een child theme te maken? Er is ook een plugin die het proces automatiseert: One-Click Child Theme. Ik gebruik deze plugin zelf nooit maar heb hem voor dit artikel getest en het werkt, ook al is de plugin al meer dan drie jaar niet geüpdatet.

Wouter Postma

Ik ben Wouter, WordPress-specialist en mede-eigenaar van WPLounge. Naast WPLounge beheer ik ook andere websites zoals SmartwatchLounge en onze Engelse versie van WPLounge.

Reageer