WordPress Lounge
WordPress Child Theme Maken
Home / Developers / WordPress child theme maken

WordPress child theme maken

WordPress child theme maken? Het maken van een WordPress child theme is kinderlijk eenvoudig, en bespaart je een hoop ellende. In dit artikel leg ik je uit waarom je een child theme zou moeten gebruiken, én hoe je dat doet.


ADVERTENTIE
85 themes voor 89 dollar?
Bij Elegant Themes ontvang je meer dan
85 premium themes voor maar 89 dollar!
Elegant Themes »

Waarom child themes gebruiken?

Het gebruiken van een child theme is vooral handig wanneer je een WordPress-theme gebruikt dat je wilt aanpassen. De aanpassingen maak je dan in je child theme, zodat je aanpassingen niet verloren gaan als het theme dat je gebruikt een update krijgt.

Veel aanbieders van premium themes (zoals Themefuse) leveren standaard child themes bij hun themes, zodat je daarin je aanpassingen kan maken. StudioPress bijvoorbeeld, van het bekende Genesis-framework, levert het framework als parent theme en geeft je de mogelijkheid om één van hun child themes te kopen óf zelf een child theme te maken. Wanneer het Genesis-framework dan geüpdatet wordt, gaan jouw wijzigingen niet verloren. Meer over StudioPress en Genesis child themes?

Meer doen met je WordPress website?
Bekijk onze artikelen voor WordPress developers »

Hoe maak je een WordPress child theme?

In dit voorbeeld maken we een child theme voor het standaard WordPress-thema Twenty Fourteen. Je kunt dezelfde stappen als je voor een ander theme een child theme wilt maken, als je de naam maar verandert!

Log in op je hosting via FTP, en ga naar de themes-folder (/wp-content/themes/). Hier staat een map genaamd twentyfourteen.

twenty-fourteen-child
Maak een map genaamd twentyfourteen-child (klik voor groter).

Voor het child theme maken we een aparte map, en die noemen we twentyfourteen-child. In deze map maken we nu een bestand dat style.css heet. Dit is het bestand dat iedere WordPress-theme nodig heeft, en dus heeft je child theme deze ook nodig.

In dit CSS-bestand plaatsen we de volgende code bovenaan:

Zoals je ziet, bevat de code hierboven alle informatie die een normale theme ook zou bevatten. Het enige dat is toegevoegd is “Template: twentyfourteen” én het importeren van de URL van style.css van het parent theme:

In dit CSS-bestand kun je nu alles neerzetten wat je maar wilt. Mocht je bijvoorbeeld het formaat van de body-tekst aanpassen, zal een eventuele waarde uit het parent-theme genegeerd worden. Wat je hier plaatst, overschrijft dus de CSS van Twenty Fourteen zelf.

De volgende stap is om je child theme te activeren. Als je deze op de juiste plek (in /wp-content/themes/) hebt geplaatst, zal WordPress automatisch herkennen dat het een child theme is van Twenty Fourteen. Activeer je child theme door naar Weergave > Thema’s te gaan in WordPress.

Als je CSS-bestand nog leeg is (behalve de code hierboven), zal er overigens niets worden aangepast, en blijft je website dus gewoon zoals hij nu is. Pas als je aanpassingen gaat maken in je child theme, worden deze zichtbaar op je website.

“Template files” aanpassen in je child theme

Uiteraard is het niet alleen de CSS die je kunt aanpassen in je child theme. Je kunt ook de zogeheten “template files” aanpassen. Als je bijvoorbeeld een header.php-bestand in je child theme plaatst, zal deze gebruikt worden in plaats van het bestand in je parent theme.

Je kunt ook bestanden toevoegen die niet in je parent theme voorkomen. Dit is bijvoorbeeld handig voor je eigen pagina-templates.

Meer doen met je WordPress website?
Bekijk onze artikelen voor WordPress developers »

Functions.php

In tegenstelling tot de CSS- en template-bestanden van je parent theme, zal functions.php niet overschreven worden als je deze in je child theme toevoegt. De twee functions-bestanden worden dan allebei gebruikt.

Bestanden uit de parent theme oproepen

Als je in je child theme een bestand wilt oproepen dat zich in je parent theme bevindt, gebruik je de “get_stylesheet_directory”-functie.

Dat ziet er als volgt uit:

Uiteraard vervang je “het_bestand.php” met de naam van het daadwerkelijke bestand.

Wouter Postma

Ik ben WordPress-specialist en ben in 2012 (samen met Jelle van der Schoot) WPLounge gestart. Daarnaast werk ik bij Crossphase.
Huur mij in »
 

2 reacties

  • Hoi, is dit ook mogelijk bij plugins, zoals BuddyPress. Ik wil namelijk dingen in de plugin veranderen, maar liefst niet in het originele bestand. Moet ik dan dezelfde stappen volgen, maar dan bij plugins?

  • Als ik meerdere gemodificeerde files, die in diverse mappen van een thema zitten, in een child theme wil onderbrengen, moet ik in het child theme dan ook de mapstructuur van het parent theme volgen?