Er is inmiddels een betere manier om WordPress Child Themes aan te maken:
Lees het bericht » Een verbeterde vorm voor het maken van WordPress Child Theme met functions.php

Een website is snel gemaakt met WordPress. Helemaal met flashy themes van websites als Themeforest.org en Elegantthemes.com. Maar ook in deze thema’s zitten nog wel eens onvolkomenheden of bugs. De makers van deze thema’s brengen daarom geregeld updates uit met verbeteringen en bug fixes. De melding van deze update verschijnt dan bij updates in het WordPress CMS. Deze kun je met 1 muisklik automatisch bijwerken. Wat deze update eigenlijk doet is dat hij alle of bepaalde bestanden van je thema overschrijft. Dit is niet handig als je deze bestanden eerder naar wens hebt aangepast, zoals bijvoorbeeld template bestanden. Dit is één van de redenen om gebruik te maken van een WordPress Child theme.

Waarom gebruik maken van een WordPress Child Theme?

Het gebeurd dus geregeld dat een website na een thema-update er anders uitziet of niet meer naar wens functioneert. Om wel van thema updates gebruik te kunnen maken zonder problemen te krijgen kan je child-themes aanmaken. Of grof vertaald: Kind-thema’s.

Dit  zijn de redenen om een Child Theme aan te maken:

  • Met een Child-theme kun je een afgeleidde maken van het thema die je wilt gebruiken. Bij een update behoud je dus aangepaste bestanden en functionaliteit.
  • Het versnelt het ontwikkelproces van de website.
  • Je komt op een goede manier in aanraking met WordPress Theme Development.

Hoe maak ik een WordPress Child Theme?

directorystructure

Maak een nieuwe map aan in wpcontent/themes. Je kan de map een naam geven die je wilt, maar het is algemeen het gebruik om dezelfde naam te geven als het hoofdthema, maar met daarachter -child.

Maak in de aangemaakt map een bestand aan met de naam style.css. Met alleen dit style sheet bestand kun je al een Child Theme maken. Open dit bestand en typ er de volgende code in:

/*
Theme Name: Responsive Child
Theme URI: http://themeid.com/responsive-theme/
Description: Child van het Responsive thema
Author: Marco van der Ziel
Author URI: http://www.marcovanderziel.nl/
Template: responsive
Version: 1.0
*/

De twee verplichte velden die je in moet vullen bij het maken van een Child Theme zijn Theme Name en Template. De Theme Name wordt de naam van je Child Theme en bij Template zet je de naam neer van het hoofdthema. Deze moet dezelfde naam hebben als de map in je themes folder. In mijn geval zet ik dus responsive neer.

Het aangemaakte bestand style.css gaat de huidige style.css in de map responsive nu overschrijven. Om in eerste instantie wel de huidige stijl over te nemen kun je de oorspronkelijke style.css importeren in je aangemaakte stylesheet. Typ de volgende code onderaan je style.css:

@import url("../responsive/style.css");

Deze css-code gaat een map terug en importeert vervolgens de style.css uit je hoofdthema.

Wil je nu bijvoorbeeld de kleur van de achtergrond van je website aanpassen dan doe je dat in het bestand style.css in de map responsive-child.

Nu je een Child Theme hebt aangemaakt kun je deze vinden in WordPress onder Weergave > Thema’s. Activeer nu het Child Theme.

Template bestanden

childoverrideNu je een Child Theme hebt aangemaakt kun je ook template bestanden overschrijven. Uit het thema Responsive wil ik de volgende twee template bestanden aanpassen:

  • index.php
  • page.php

Wat ik vervolgens doe is dat ik de originele bestanden kopieer vanuit de map responsive en deze plak in de map responsive-child. De wijzigingen voer ik door in de bestanden in de map responsive-child. Als ik nu mijn website test dan kijkt WordPress eerst in de map responsive-child of daar benodigde template bestanden instaan. Zo niet dan refereert WordPress naar het hoofdthema (de map responsive) en worden deze bestanden gebruikt.

Functions.php

Als je extra functionaliteit wilt maken bovenop het gebruikte thema dan kun je ook een functions.php in je Child Theme zetten. In tegenstelling tot template bestanden wordt de oorspronkelijke functions.php nu niet overschreven. De functions.php wordt als extra geladen voor de oorspronkelijke functions.php.

Meer informatie over WordPress Child Themes?

Wil je meer informatie over het gebruik van Child Themes lees dan de
Engelstalige WordPress Codex Documentatie

Er is inmiddels een betere manier om WordPress Child Themes aan te maken:
Lees het bericht » Een verbeterde vorm voor het maken van WordPress Child Theme met functions.php

6 gedachtes over “WordPress Child Themes

  1. Ik heb een multi-site omgeving. Daarbij maak ik o.a. gebruik van Thematic als parent theme. Nu weet ik hoe je een child-theme van Thematic kan maken. Maar wat te doen als Thematic meer kinderen wilt, thematic-child bestaat tenslotte al.

    1. Hallo Koos.

      Je kan in principe zoveel kinderen maken als je wilt :p. De naam die je de map geeft maakt niet zoveel uit. Als je maar de verwijzing maakt naar het hoofdthema.

      Met vr. groet,
      Marco

  2. Beste Marco,

    Voor mijn website doe ik veel aanpassingen via plug-ins, om bijvoorbeeld meer aan de lay-out te kunnen veranderen. Is het hiervoor ook nodig om een Childtheme te maken? Of blijven deze aanpassingen wel bestaan na een update van het thema en geldt een childtheme echt alleen als je zelf dingen verandert in de codes? Ik heb namelijk niks aan de codes veranderd en dus ook (nog) geen childtheme.

    Alvast bedankt!

    1. Hoi Irene,

      Als je niks aan de code van je thema verandert dan heb je in principe geen Child Theme nodig. Ik weet niet welke specifieke plugins je gebruik, maar als deze plugins betrekking hebben op een specifiek thema die je gebruikt dan heb je kans dat bij een thema update iets niet meer werkt/functioneert. Maar dit is niet te verhelpen met een Child Theme.

      Groet,
      Marco

  3. Hallo Marco,
    Ik heb een paar vragen over het werken in een geactiveerd child theme naar aanleiding van je tutorial.
    Moet ik zelf code gaan schrijven in de bestanden van mijn child theme?
    Bijvoorbeeld het aanpassen van de achtergrond kleur kan simpel via het wordpress dashboard, maar moet ik dat voortaan in de style.css gaan typen van het child theme?

    Als ik alle template bestanden kopiëer van mijn parent naar mijn child theme, worden alle wijzigingen dan automatisch hierin opgeslagen (en dus beschermd bij updates) als ik in mijn wordpress dashboard werk? Welke bestanden van een theme worden er in een update veranderd, alleen de style.css? Want als template bestanden uit je child theme de parent ‘overrulen’ heb je ook niets aan een update van zo’n bestand, toch?

    1. Hallo Manon,

      Je hoeft zelf nu niet persé code te gaan schrijven. Je kan als je het Child Theme geactiveerd hebt ook aanpassingen doen in het dashboard. Als je bijvoorbeeld aanpassingen wil doen op je website die je niet kunt instellen in het dashboard dan kun je die plaatsen in het style.css bestand van je Child Theme.

      Wat betreft je tweede vraag; Bij een update kunnen er meerdere bestanden overschreven worden. Een thema update biedt vaak aanpassingen aan in de functionaliteit van het thema. Dat zijn dus bestanden zoals functions.php of bestanden in mappen als ‘inc’ en ‘js’. Ik raad zeker niet aan om alle bestanden te kopiëren uit je hoofdthema. Zelf kopieer en plak alleen een template bestand in de Child Theme map als ik deze aan wil passen.

      Ik hoop dat ik zo antwoord op je vragen heb gegeven.

      Gr. Marco

Geef een reactie