Child theme maken in WordPress

Een child theme maken in WordPress is eigenlijk een must als je de opmaak van je website wil veranderen, op een nette manier. Zonder child theme kan je dit ook doen, maar bij een update van het thema dat je hebt geïnstalleerd, zijn al je aanpassingen weer verdwenen. Een child theme maken wordt door alle WordPress professionals geadviseerd. Lees snel verder over wat een child theme eigenlijk is en op welke manieren je het zelf eenvoudig kan maken.

Ja, ik wil één van de beste WordPress themes hebben!

Wat is een child theme?

Als je via ProgrammeerPlaats of zelf net je WordPress website hebt geïnstalleerd, is het aan te raden om gelijk een child theme te maken. Anders moet je later al je wijzigingen binnen je thema weer op gaan zoeken, mocht je het niet genoteerd hebben. Deze kan je dan weer in je child theme zetten en verwijderen uit het thema zelf, maar dit is achteraf veel gedoe.

Laten we nu gaan kijken wat een child theme eigenlijk is. Om dat te begrijpen is het ook handig om te weten wat een parent theme is. Een parent theme is een compleet thema inclusief alle verplichte template files en assets om het thema goed te laten werken.

Een child theme erft de opmaak en de functionaliteiten van een parent theme over. Een child theme heeft dus dezelfde opmaak en functionaliteiten als een parent theme. Echter kan je met een child theme de opmaak veranderen en bijvoorbeeld ook extra functionaliteiten toevoegen.

Waarom is het handig?

Nu zou je denken, dit kan toch ook zonder child theme? Dat klopt helemaal. Zonder child theme kan je ook de opmaak veranderen en/of functionaliteiten aanpassen/toevoegen. Maar als je dit met een child theme doet, is dat veel netter en veiliger. Bij een update van een parent theme zouden alle aanpassingen/toevoegingen verdwijnen, als je dit hebt toegepast zonder child theme. Dan kan je weer van voor af aan beginnen.

De voordelen op een rijtje bij het gebruiken van een child theme:

• Bespaart ontwikkeltijd, omdat je zelf niet opnieuw alles hoeft uit te vinden.
• Aanpassingen en/of toevoegingen zijn netjes gescheiden tussen child- en parent theme. Dit maakt het overzichtelijk.
• Er kan gewoon een update plaatsvinden voor je parent theme, zonder dat heel je website kapot gaat.
• Mooie manier om te leren over theme development binnen WordPress.
• Makkelijke manier om een theme te verbeteren en/of naar je eigen hand te zetten.
• Veilige manier om verbeteringen en/of toevoegingen aan een theme te testen.

Child theme maken: Hoe doe je dat?

We weten nu wat een child theme is. Nu gaan we kijken hoe je het maakt. Er zijn verschillende manieren om een child theme te maken. Eerst gaan we zelf een map en bestanden aanmaken, die we via een FTP client op de server zetten, waarop ook je website staat. Tot slot kijken we welke plugins geschikt zijn om een child theme te maken, mocht je de “FTP-manier” te lastig vinden.

Child theme Divi als voorbeeld

Het Divi theme gebruiken we in dit geval als voorbeeld om een child theme te maken. Deze manier kan je ook toepassen bij andere themes. Om mappen en bestanden op de server te kunnen zetten waarop je website staat, heb je een FTP client nodig. We gebruiken daarvoor FileZilla. FileZilla kan je gebruiken op alle platformen, zoals Windows en macOS.

FTP client (FileZilla): Connectie maken met server

Om connectie te maken met de server heb je de volgende gegevens nodig:

Deze gegevens vind je meestal terug op je eigen account, op de website van de hosting provider waarbij je bent aangesloten. Als je de juiste gegevens hebt ingevuld, klik je op Snelverbinden. Daarna ga je naar de map waarin alle bestanden van de WordPress website staan. In mijn geval doe je dat door dit pad te volgen: /public/sites/. Ook /public_html of /httpdocs komt vaak voor bij sommige hosting providers. Daarna klik je op de map met de naam van je website of in sommige gevallen ben je al in de juiste map. Als je deze bestanden ziet, zit je goed:

Per hosting provider kunnen de indelingen iets anders zijn en kijk dus vooral zelf goed waar deze map staat. Pas op dat je niks verwijdert of verplaatst, anders kan je website stuk gaan.

Als je de goede map hebt gevonden, ga je naar: /wp-content/themes/. Hierin vindt je alle themes die je hebt gedownload of die er al automatisch op stonden bij het installeren van WordPress. Je gebruikt echter maar één thema. Maak in de themes map een nieuwe map aan genaamd: NaamVanHetThemaDatJeGebruikt-child. In het geval van Divi wordt dit: divi-child. Let erop dat je geen spaties mag gebruiken. In deze map plaats je een CSS en PHP bestand, die we zo gaan maken.

Ja, ik wil één van de beste WordPress themes hebben!

style.css bestand

We beginnen met het CSS bestand. Makkelijk is om een source code editor te gebruiken, zoals Notepad++. Voor macOS of Linux gebruikers is Atom een heel goed alternatief. Optioneel is ook om gewoon een kladblok/notepad te gebruiken.

We maken een nieuw bestand en noemen het style.css. Let op de .css extensie aan het eind van de naam van het bestand. Door middel van de .css extensie is het bestand ook daadwerkelijk een CSS bestand.

style.css komt er zo uit te zien:

/*
Theme name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: John Doe
Author URI: http://example.com
Template: Divi
Version: 1.0.0
*/

/* Thema aanpassingen hieronder
------------------------------------------------------- */

Theme name en Template zijn verplicht om erin te hebben. De rest is optioneel. De Template parameter moet exact overeenkomen met de naam van je parent theme map. In dit voorbeeld is dat Divi, maar mocht je een ander thema hebben, dan kijk je hoe deze map heet in /wp-content/themes/ en vul je dat in bij de Template parameter. De naam van de map komt meestal overeen met de naam van het thema. Let wel op hoofdletters. De andere parameters kan je ook aanpassen.

functions.php bestand

Met een source code editor kan je ook een PHP bestand aanmaken. Het bestand dat we aan gaan maken noemen we functions.php. Let weer op de .php extensie, zodat het ook echt een PHP bestand is. Het komt er zo uit te zien:

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

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

Hiermee importeer je style.css van het parent theme. Zo behoud je de opmaak van het parent theme. De opmaak kan je verder aanpassen met het style.css bestand, dat in het child theme staat.

Door dit PHP bestand in je child theme, wordt eerst het style.css bestand uit het parent theme geladen en daarna komt style.css uit het child theme. Hierdoor kan je met de style.css uit je child theme de code van style.css uit je parent theme overschrijven.

Niet alleen functions.php kan je aanpassen. Je kan ook andere template files in je child theme zetten die dezelfde files overschrijven in het parent theme, zoals header.php.

Bestanden in child map zetten via FTP client

Nadat je style.css en functions.php hebt gemaakt en lokaal op je eigen computer/laptop hebt opgeslagen, moet je het in de child theme map zetten die je eerder al hebt aangemaakt. Als het goed is ben je op FileZilla nog verbonden met de server. Als dit niet het geval is, kan je opnieuw connectie maken. Op FileZilla zie je links alle mappen en bestanden van je eigen computer/laptop en rechts zorg je dat de map van het child theme open staat, op de server. Zo kan je eenvoudig style.css en functions.php verslepen naar de child theme map.

Child theme activeren

Als je style.css en functions.php hebt overgezet naar de juiste child theme map op de server via een FTP client (FileZilla), kan je het child theme gaan activeren. Dit kan je doen door in het Dashboard te gaan naar Weergave/Appearance > Thema’s/Themes. Hierin staat als het goed is nu je child theme. Deze kan je activeren.

Je kan het child theme ook een afbeelding geven. Dit is optioneel. Dit kan je doen door een afbeelding in je child theme map te plaatsen. Sla de afbeelding op als screenshot.png. 1200×900 pixels is aanbevolen. De afbeelding wordt door WordPress herkend en getoond in je child theme. Voor jezelf (Admin) is dit vooral handig. Bezoekers van de website zullen hier niks van merken.

In het Dashboard ga je naar Weergave/Appearance > Thema editor/Theme Editor. Hier staat het style.css bestand van je child theme en kan je aanpassingen doen, zonder dat het verloren gaat bij een update. Ook staat daar het functions.php bestand.

Child theme plugin

Misschien ben je wel niet zo technisch ingesteld en vind je het bovenstaande te lastig. Daarom zetten we hier ook een paar plugins op een rijtje, waarmee je child themes kan maken. De volgende plugins zijn daar geschikt voor:

• Child Theme Configurator
• Child Theme Wizard

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.