Child theme maken in WordPress

Child theme maken: WordPress logoEen child theme maken in WordPress is eigenlijk een must als je de opmaak van je website wil veranderen. Zonder child theme kan je dit ook doen, maar bij een update van het thema wat 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.

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. Eigenlijk kan je alle thema’s beschouwen als parent theme.

Een child theme erft de opmaak en de functionaliteiten van de parent theme over. Het child theme heeft dus dezelfde opmaak en functionaliteiten als het 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 het parent theme zouden alle aanpassingen/toevoegingen verdwijnen, als je dit hebt toegepast zonder child theme en 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 plaats vinden voor het 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.

De beste en snelste hostingprovider voor iedere WordPress website!
Officieel aanbevolen door WordPress zelf.

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. Zelf gebruik ik 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:

Connectie maken met server op Filezilla

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 naar dit pad te volgen: /public/sites/. Daarna klik je op de map met de naam van je website. Als het goed is staan daar alle bestanden van de WordPress website in. 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: NaamVanHetThemaDieJeGebruikt-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.

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 aan het eind van de naam van het bestand. Door middel van .css 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, toepassend op het thema van je website.

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, zodat het ook echt een PHP bestand is. Het komt er zo uit te zien:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Hiermee importeer je style.css van het parent theme. Zo behoudt je de opmaak van het parent theme. Dit kan je aanpassen met style.css in het child theme. Door dit PHP bestand in je child theme, laadt eerst het style.css uit de parent theme en daarna komt style.css uit het child theme. In CSS heeft code voorrang boven code die erboven staat. 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. 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 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.

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:

Wil je niks missen over andere WordPress artikelen? Registreer je dan op ProgrammeerPlaats. Als je vragen hebt kan je contact opnemen en/of hieronder een bericht achterlaten.

Beoordeel hier het artikel (Alleen voor leden)

1 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 5 (1 votes, average: 5,00 out of 5)
You need to be a registered member to rate this.
Loading...

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *