Hoe maak je een child theme aan in WordPress 2020 (beknopte versie)

Een child theme wordt gebruikt in WordPress en neemt de look & feel en functionaliteiten van het hoofd thema over. Hierin kan je zonder twijfel eenvoudig extra css of php code wegschrijven zonder je hoofd thema (parent theme) aan te passen.

- Je hoofdthema wordt niet aangepast en behoud eigen code

- Je kan het wordpress theme updaten zonder kopzorgen

- De aanpassingen gaan niet verloren

- Moest je gehackt worden, dan installeer je het thema opnieuw ipv. dat je de code moet opkuisen

- Een beetje technische kennis hebben (bv. FTP of SFTP kunnen gebruiken)

Laat ons er van uitgaan dat je al enige tijd een website hebt of beheerd, met de tijd komen er nieuwe trends en je wenst je look & feel van je wordpress website aan te passen.

Je wenst dit aan te passen zonder dat de huidige zaken verloren gaan, misschien ben je op zoek naar, hoe je een nieuwe stijl kunt implementeren of je hebt een leuke animatie gezien.

Je huidig wordpress theme heeft deze functionaliteit niet maar je kan zelf programmeren of je kent iemand die dit voor jou kan uitvoeren. Hoe gaan we hiermee aan de slag zonder dat alle data verloren gaat bij een update van mijn huidig thema (parent theme)?

Het antwoordt hierop is een WordPress Child Theme!

Er zijn 2 bestanden die je moet aanmaken om een child theme te laten werken:

1. Een style.css bestand
2. Een functions.php bestand

Een style.css bestand wordt ook een stylesheet genoemd, hierin schrijf je allerlei code om je website of content, een bepaalde stijl te geven. Dit gaat van kleuren tot en met animaties.

In een functions.php bestand worden de functionaliteiten van je website geschreven. Grotendeels is dit voor WordPress in PHP en dit kan aangevuld worden met JavaScript & jQuery.

1. Log in op je control panel van je webhosting en ga naar de file manager of log in met FTP of SFTP op je WordPress website
2. Zoek de “root” of hoofdmap (www folder) waar je website geïnstalleerd is
3. Ga in de folder WP-CONTENT => dan naar THEMES
4. In deze folder maak je een nieuwe map aan, noem de map zoals je website noemt
5. Nu dat de map is aangemaakt, ga je in de map
6. Maak nu 2 nieuwe bestanden (rechts klik en kies “nieuw bestand aanmaken”)
7. Noem het 1 bestand style.css en het 2 de bestand functions.php
8. Bij het style.css bestand voeg je volgende tekst toe (kopieër onderstaande tekst en plak deze in je style.css bestand)
9. Sla het bestand op (shortkey CRTL+S)

De tekst die je zojuist hebt toevoegt is enkel commentaar en wijzigt niets visueel aan je website.

/* Theme Name: Schrijf hier je thema naam
Theme URI: Je website URL bv. https://delagoo.be
Description: Geef een beschrijving over je website bv. (child theme twentynineteen)
Author: Vul je eigen naam in
Textdomain: Geef hier een woord in bv. (websitenaam) niet te lang, dit wordt gebruikt voor string-translations
Author URI: Geef je website URL in bv. (https://delagoo.be)
Template: twentynineteen (als je hoofdthema twentynineteen is, is dit het juiste woord)
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html */

Deze code zorgt ervoor dat je stylen en functies van je hoofdthema geladen worden via wanneer het child-theme geactiveerd is.

Je kan het child theme activeren door het volgende uit te voeren:

3. Bekijk nu je homepagina, er zou niets gewijzigd mogen zijn aan de look & feel van je website.

Nu we klaar zijn met het aanmaken van het child theme kunnen we aanpassingen uitvoeren.
In je child theme folder staat nu je aangemaakt style.css bestand, open dit en probeer de kleur van je achtergrond te wijzigen.
Dit doe je zo:

body {background-color: #000;}

Sla de wijziging op in je style.css en refresh je homepagina. De achtergrondkleur zou nu zwart moeten zijn.

Heb je alreeds een WordPress website? Lees hieronder waarom wij aanraden om een website te laten maken met WordPress.

>> Website laten maken