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

Hoe maak je een child theme in wordpress 2020

Inhoudstafel

Wat is een child theme?

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.

Voordelen

  • 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

Nadelen

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

Waarom zou je een WordPress child theme 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!

Hoe maak ik een 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

Wat is een style.css 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.

Wat is een functions.php bestand?

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.

Het aanmaken van een style.css en functions.php bestand

  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 */

Voeg deze code toe in het functions.php bestand

functions-php-code

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:

1. Ga naar je WordPress dashboard en klik op “weergave” => Thema’s
2. Nu zie je het nieuwe child theme ertussen staan, klik onderaan op activeer!
3. Bekijk nu je homepagina, er zou niets gewijzigd mogen zijn aan de look & feel van je website.
Twenty Twenty theme

Waar pas ik mijn child theme aan?

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.
 
Dit was de beknopte versie hoe je een child theme kan aanmaken in WordPress.
Moest je vragen hebben of tegen problemen aanlopen laat het gerust weten. We helpen je graag verder!

 

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

Geef een reactie

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

Nieuwsbrief

Blijf je graag op de hoogte van onze nieuwsberichten, schrijf je dan in voor onze nieuwsbrief.

Vragen over je project

Heb je nog vragen over je project of schakel je liever professionele hulp in.
Contacteer ons voor een vrijblijvende offerte of een afspraak.
Delagoo helpt je met plezier verder!

Expert onderhoud

Gelieve onderstaande velden in te vullen zodat we je kunnen contacteren.

Pro onderhoud

Gelieve onderstaande velden in te vullen zodat we je kunnen contacteren.

Basic onderhoud

Gelieve onderstaande velden in te vullen zodat we je kunnen contacteren.