Zelf een child theme maken

26 september 2019

Wat is een WordPress child theme en waarom moet je deze gebruiken?

In WordPress kun je gebruik maken van enorm veel gratis of betaalde themes. Soms is zo’n theme net niet helemaal zoals je het zou willen. Dan kun je de bestanden  (zoals de stylesheet) van het theme aanpassen. Maar zodra er een update beschikbaar komt voor het theme zouden al jouw wijzigen verloren gaan bij het updaten.

Door een child theme te gebruiken kun je voorkomen dat de wijzigingen die je hebt aangebracht verloren gaan bij een update van het theme.

Het child theme bestaat uit de volgende onderdelen:

  • Een map met daarin de volgende bestanden:
  • functions.php
  • style.css
  • screenshot

Hieronder leg ik uit hoe je zelf een child theme maakt

N

Stap 1

Maak een map aan voor je childtheme

Hiervoor heb je toegang nodig tot de server van je website. Dit kan via een ftp-programma bijvoorbeeld FileZilla client.

Ga op de server naar de map /wp-content/themes

Hierin zie je de themes die geïnstalleerd zijn waaronder een aantal standaard WordPress themes zoals “twentynineteen”

Maak hier een nieuwe map aan. De naam van de map maakt niet uit. In dit voorbeeld maken we een child theme voor het Twenty Nineteen theme en noem ik de map twentynineteen-child.

N

Stap 2

Maak een style.css bestand

Dit kun je bijvoorbeeld in een teksteditor doen zoals notepad / kladblok.

In dit bestand moet het volgende staan:

/*

Theme Name: Twenty Nineteen Child theme

Theme URI: https://www.jouwebsitenaam.nl

Description: Beschrijving van jouw thema

Author: Jouw naam

Author URI: http://www.jouwwebsitenaam.nl

Template: twentynineteen

Version: 1.0.0

*/

/* =Vanaf hier kun je css plaatsen
------------------------------------------------------- */

Het belangrijkste is dat je bij Template exact de naam van het hoofdtheme overneemt zoals deze op de webserver heet.

Sla het bestand op als style.css en upload het naar de child theme map die je net in stap 1 hebt gemaakt.

N

Stap 3

Maak een functions.php bestand

In het functions.php bestand roep je de style.css aan van het hoofdthema.

Je gebruikt hier weer een teksteditor voor zoals notepad / kladblok.

Je plaatst hierin de volgende code:
<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

En slaat het bestand vervolgens op als functions.php en upload het naar de child theme map die je net in stap 1 hebt gemaakt.

N

Stap 4

Maak een afbeelding voor je child theme

Maak een afbeelding van 1200 x 900 pixels.
Noem deze screenshot.png en upload deze naar de child theme map die je net in stap 1 hebt gemaakt.

N

Stap 5

Activeer je childtheme

Login op je WordPress website en ga naar Weergave > Thema’s. Hier zie je nu je nieuwe childtheme tussen staan.
Je activeert het theme door op Activeren te klikken.

Omdat je nog geen wijzigingen hebt aangebracht in de style.css en function.php van je childtheme zul je nog geen verschil zien.
Pas als je iets aanpast in deze twee bestanden dan zie je dat terug.

Gefeliciteerd! Je hebt je eigen Childtheme gemaakt!

Spannend?

Vind je het spannend om bovenstaande stappen zelf te doorlopen?
Ik kan ze ook uitvoeren voor je! Neem dan contact met mij op:

info@dianabrandt.nl
06-15028063