skip to Main Content
+31 (0)40 369 0110 info@webshops-en-sites.nl

Een WordPress child theme maken

Een WordPress child theme maken

Een WordPress child theme maken is erg makkelijk en wanneer je aanpassingen gaat maken aan je thema zelfs noodzakelijk. In dit artikel lees je hoe je een child theme maakt en vooral waarom een dit zo belangrijk is.

Inhoud
Wat is een child theme?
Waarom gebruik je een child theme?
Een child theme maken
Style.css-bestand aanmaken
De style.css van het hoofd-theme laden met functions.php
Bestanden uploaden via FTP
Een afbeelding aan je child theme toevoegen (Optioneel)
Automatisch een child theme maken

Wat is een child theme?

Een WordPress child theme is een theme binnen je WordPress installatie die als basis een hoofdtheme heeft. Een child theme refereert dus naar het hoofdtheme. In dit child theme maak je alle wijzigingen die je wilt maken aan je basistheme zoals bijvoorbeeld kleuren, vertalingen of andere aanpassingen.

Waarom gebruik je een child theme?

Waarom moeten we een WordPress child theme maken? Elke wijziging die je doet in een theme wil je uiteraard bewaren. Wanneer je geen child theme maakt maak je dus aanpassingen in het hoofdtheme. Wanneer de maker van dit theme een update uit brengt en je deze installeert zullen al je aanpassingen waarschijnlijk teniet gedaan worden.
Op die manier zul je dus telkens na een update wederom je aanpassingen opnieuw moeten doen. Dat is uiteraard geen gewenste situatie. Dit is de reden dat we een WordPress child theme maken. Dit child theme bevat al je aanpassingen en het hoofdtheme kan zonder problemen bijgewerkt worden naar de laatste versie. Al je wijzigingen blijven zo bestaan.

Een child theme maken

Een child theme maak je aan op basis van je originele theme. In dit voorbeeld gaan we er even van uit dat je een childtheme maakt van het standaard theme van WordPress: “Twenty Nineteen”. Dit theme wordt standaard meegeleverd bij een WordPress installatie. Uiteraard kun je een child theme aanmaken voor elk theme.

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 “twentynineteen” (of de naam van jouw gebruikte theme). Maak nu in de /wp-content/themes/ folder een nieuwe folder aan genaamd twentynineteen-child. (Of “jouwtheme-child”).

Style.css-bestand aanmaken

Om een child theme te maken hebben we het bestand style.css nodig. Maak deze aan met een tekst editor en sla deze op. Wij gebruiken zelf graag de gratis en erg handige editor Notepad++.
Kopieer en plak de hieronder aangegeven code in het bestand style.css en sla deze op.

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    https://webshops-en-sites.nl
 Description:  Twenty Nineteen Child Theme
 Author:       Webshops & Sites
 Author URI:   https://webshops-en-sites.nl
 Template:     twentynineteen
 Version:      1.0.0
 Tags:         plaats, hier, jouw, tags, gescheiden, door, komma's
 Text Domain:  twentynineteen-child
*/
/* ------ Eigen CSS hier beneden plaatsen -------- */

Je kunt een aantal items naar eigen idee aanpassen zoals “Theme Name”, “Description”, “Author” en de URL’s. Hier ben je geheel vrij in.

De “template” moet wel gelijk zijn aan de naam van de folder van je hoofd theme. In dit geval is dat dus “twentynineteen”, maar als je bijvoorbeeld “Flatsome” van UX-Themes gebruikt zou dit “flatsome” moeten zijn. Bij Text Domain vul je de folder in van je child theme. Hier is dat twentynineteen-child.

Sla dit bestand nu op (onder de naam style.css) en maak een nieuw bestand aan in je tekstbewerker.

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

In dit nieuwe bestand gaan we de style.css van het hoofd-theme importeren. Dat wil zeggen dat we de website opdracht geven om het theme te laden en wanneer dat klaar is de style.css er achteraan te laden en al onze wijzigingen mee te nemen.

Op deze manier worden de wijzigingen aan het theme overschreven door onze eigen style.css die in onze child-theme map staat. Dit bestand kan niet overschreven worden wanneer het theme een update heeft en blijven de aanpassingen in het theme altijd van kracht.

Maak het nieuwe bestand aan en sla deze op als “functions.php”. 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' );
}

Bestanden uploaden via FTP

Ga via FTP weer naar je hosting en ga naar de zojuist aangemaakte child-theme map. In dit voorbeeld was dat twentynineteen-child. De beide aangemaakte bestanden style.css en functions.php kun je nu uploaden in deze map. Als dat goed is gegaan is je child theme klaar voor gebruik en hoef je het alleen nog maar te activeren. Om het child theme te activeren ga dan naar: Weergave > thema’s, en daar zie je je child theme staan:

Een Wordpress child theme maken

Een afbeelding aan je child theme toevoegen (Optioneel)

Zoals je in de afbeelding hierboven ziet is er eenzelfde afbeelding bij het child theme als bij het hoofd theme. Wellicht wil je bij je child theme een screenshot van je eigen aangepaste website laten zien. Deze kun je gelukkig heel simpel zelf toevoegen. Het enige dat je hoeft te doen is een afbeelding te uploaden naar de folder van je child theme.

Maak een afbeelding van bijvoorbeeld 600×450 pixels en noem deze afbeelding screenshot.png. Zodra deze is geupload zal WordPress zal deze afbeelding nu automatisch tonen bij je child theme. Alleen beheerders in WordPress kunnen deze afbeelding zien, het maakt voor je bezoekers dus niets uit of je een screenshot toevoegt.

Automatisch een child theme maken

Vind je bovenstaande stappen te ingewikkeld om handmatig te doen? Geen probleem! Er zijn verschillende plugins die bovenstaande stappen automatisch voor je doen. Mocht je daar een plugin voor zoeken kies er dan een die recentelijk is bijgewerkt en compatible is met je WordPress versie. Een extra tip: Kijk of je de plugin weer kunt deactiveren en verwijderen na het aanmaken van het child-theme, je hebt daarna de plugin nooit meer nodig!

Wil je meer informatie over installatie van WordPress? Kijk dan hier.

Back To Top
×Close search
Zoeken