WordPress child theme maken

“WordPress child theme” klinkt in eerste instantie misschien wat vreemd als je ergens leest dat je dit moet maken voor het thema dat je gebruikt op je website.

Moet je nou een compleet nieuw thema maken terwijl je alleen een klein dingetje wilt aanpassen van je huidige thema?

Ik kan je verzekeren dat het echt allemaal wat ingewikkelder klinkt dan het daadwerkelijk is.

In dit artikel zal ik je vertellen wat een WordPress child theme is, waarom het handig is om het te gebruiken en hoe je een child theme kunt maken.

Wat is een WordPress child theme?

In eenvoudige woorden is een WordPress child theme een speciaal thema dat de functionaliteiten en design van een ander WordPress thema (hoofd thema) kopieert.

Je vraagt je nu misschien af wat het nut hiervan is, je hebt dan toch gewoon hetzelfde thema? Klopt, maar de belangrijkste reden (en tevens voordeel) om een child theme te gebruiken is om te voorkomen dat je de wijzigingen die je maakt kwijtraakt.

Dit komt namelijk regelmatig voor bij mensen die wijzigingen in de code aanbrengen in het hoofd thema. Bij een thema update worden deze bestanden weer overschreven en moeten de wijzigingen weer opnieuw gedaan worden.

Dit is geen pretje om keer op keer te doen en zeker niet als je dit na een half jaar moet doen en je niet genoteerd hebt welke wijzigingen je allemaal gedaan hebt.

Verder is een child theme ook een mooie manier om dingen uit te testen zonder de originele code aan te passen in het hoofd thema en kun je natuurlijk ook de functionaliteiten uitbreiden als je hier behoefte aan hebt.

Kort gezegd kun je dus met een child theme wijzigingen aanbrengen in het hoofd thema zonder dat deze wijzigingen verloren gaan bij een update van het thema. Het bespaart je dus ook tijd omdat je de wijzigingen niet telkens opnieuw hoeft door te voeren.

Wat zijn de nadelen van een child theme?

Er zijn eigenlijk niet heel veel nadelen te verzinnen bij het gebruik van een child theme. Het grootste nadeel is dat je voldoende kennis moet hebben om dingen aan te passen in de code om te bereiken wat je wilt bereiken. Wanneer je niets hoeft aan te passen heb je tenslotte geen child theme nodig.

Een ander nadeel dat weleens voorkomt bij bepaalde thema’s is dat je niet alle bestanden uit het hoofd thema kunt overschrijven met bestanden in je child theme. Het gaat in dit geval vaak om bestanden die in een map zitten in de map van het hoofd thema. Je moet hierdoor alsnog de originele bestanden aanpassen.

Hoe kun je een WordPress child theme maken?

Een WordPress child theme kun je op verschillende manieren maken. Het is mogelijk om zelf handmatig een child theme te maken, maar je kunt ook een plugin het werk laten doen.

Het kan echter ook zijn dat je niet eens een child theme hoeft te maken omdat het al bij de bestanden van het thema zit. Het is dan gewoon een kwestie van de map naar de juiste plek uploaden (/wp-content/themes/) via FTP.

In onderstaande video kun je zien hoe je een WordPress child theme kunt maken met behulp van een plugin en hoe je de bestanden kunt bewerken.

Abonneer je op mijn YouTube kanaal

Wil je liever de tekstuitleg of handmatig een child theme maken? Lees hieronder verder.

WordPress child theme maken met een plugin

De eenvoudigste en snelste manier om een child theme te maken is door de plugin “One-Click Child Theme” te installeren. Met deze plugin kun je in een paar klikken een child theme maken van het thema dat je op dat moment gebruikt.

Nadat je de plugin hebt geactiveerd krijg je onder “Weergave” een nieuw kopje “Child Theme” waar je op moet klikken. Je komt nu op een pagina uit waar je de naam van het thema, een beschrijving en je naam kunt invullen.

WordPress child theme maken met plugin

Wanneer je alles hebt ingevuld kun je op “Create Child” klikken om de child theme daadwerkelijk te maken. De plugin zorgt er tevens voor dat je gloednieuwe child theme direct geactiveerd wordt.

Ik doe het zelf ook altijd op deze manier en het is tot nu toe altijd goed gegaan. Wanneer je een child theme gemaakt hebt kun je de plugin gewoon weer verwijderen, de plugin heeft zijn taak tenslotte volbracht.

Zelf handmatig een child theme maken

Zelf een child theme maken is ook niet heel moeilijk, maar het kost net even wat meer tijd. Het enige wat je in principe moet doen is een map en een bestand aanmaken.

Wanneer je zelf een child theme wilt maken heb je tevens toegang nodig tot de server van je website via FTP. Je kunt hiervoor een programma als FileZilla gebruiken. Een andere mogelijkheid is om van de map een .zip bestand te maken en deze te uploaden via “Weergave -> Thema’s -> Nieuwe Toevoegen”.

Om een child theme te maken kun je het best als eerste op je computer een map aanmaken. De naam van de map maakt in principe niet uit zolang er maar geen spaties gebruikt worden. Het is gebruikelijk om het naamvanjethema-child te noemen, maar dit is dus niet noodzakelijk.

In je net aangemaakte map moet je vervolgens een style.css bestand plaatsen. Je kunt al een style.css bestand maken met een programma als “Kladblok”. Vul vervolgens onderstaande code in en vergeet niet om deze informatie te updaten naar je eigen informatie.

/*
 Theme Name:   Naam van je child theme
 Theme URI:    http://jewebsitenaam.nl/
 Description:  Beschrijving van je thema
 Author:       Je naam
 Author URI:   http://jewebsitenaam.nl/
 Template:     Naam hoofdthema (belangrijk om juiste naam in te vullen)
 Version:      1.0.0
*/
@import url("../hoofdthema/style.css");

/* =Vanaf hieronder kun je CSS plaatsen
-------------------------------------------------------------- */

Je kunt bovenstaande regels naar wens aanpassen en bepaalde regels kun je ook achterwegen laten als je het niet wilt invullen. De enige regels die je echt moet gebruiken zijn Theme Name, Template en bij een child theme ook de regel @import url.

Eenmaal alles aangemaakt en opgeslagen kun je via FTP inloggen op de server van je website om de bestanden te uploaden. De juiste plek om de map met style.css te uploaden is in de map /wp-content/themes/.

Wanneer je de map hebt geüpload kun je in het WordPress beheerdersgedeelte naar “Weergave -> Thema’s” gaan om de child theme te activeren. De naam die WordPress voor je child theme gebruikt heb je zelf bepaald in het style.css bestand.

Indien je alleen bovenstaande code aan het style.css bestand hebt toegevoegd zal je nog geen veranderingen zien wanneer je jouw child theme activeert. Alles wat je in de toekomst toevoegt aan het style.css bestand van je child theme heeft wel effect op de opmaak van je website.

Template bestanden aanpassen

Op dit moment denk je misschien dat je alleen de mogelijkheid hebt om iets aan te passen met CSS, maar wat nou als je ook de PHP bestanden wilt aanpassen?

Wanneer je een PHP bestand van het hoofd thema wilt aanpassen moet je dit bestand kopiëren, bewerken en vervolgens plakken in je child theme.

Het bewerkte bestand met aanpassingen moet dus in je child theme terecht komen en wanneer je dit gedaan hebt zal je meteen de aanpassingen zien op je website.

Het functions.php bestand is een uitzondering

Bovenstaande methode werkt echter niet bij het functions.php bestand. Het functions.php bestand wordt niet overgeschreven, WordPress gebruikt beide functions.php bestanden.

Wil je dus iets aanpassen in het functions.php bestand van het hoofd thema, dan moet je het originele bestand aanpassen.

Wil je iets nieuws toevoegen, dan kun je dit beter in het functions.php bestand van je child theme plaatsen. Op deze manier weet je precies wat je zelf nieuw hebt toegevoegd en hoef je dit niet bij elke update opnieuw toe te voegen.

Conclusie

Zoals je hebt kunnen lezen in dit artikel is het gelukkig niet super moeilijk om een WordPress child theme aan te maken en heb je eigenlijk geen goede reden om het niet te doen als je iets van je thema wilt aanpassen.

Het kost maar een paar minuten om een child theme te maken en op deze manier hoef je niet bij iedere thema update alle wijzigingen opnieuw aan te brengen.

Maak jij gebruik van een child theme op je website of maak je alle aanpassingen in het hoofd thema? Laat het hieronder weten in de reacties.

36 reacties Voeg ook een reactie toe

  1. Hoi! Klinkt super easy! Alleen heb ik een probleem met het functions.php bestand. Moet je die dan in het hoofdthema zoals het oorspronkelijke bestand laten en de code die ik helemaal onderaan heb toegevoegd in een los bestand plaatsen, die functions.php noemen en vervolgens in het child theme zetten?

    Dat heb ik namelijk geprobeerd maar werkte niet. Moet je nog een code aan de functions.php voor het child theme toevoegen bijvoorbeeld?

    Ik ben benieuwd!

    Janneke

    • Nee, dit bestand moet je inderdaad niet dupliceren. Je kunt in het functions.php-bestand van je child theme de volgende code invoeren:

      < ?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>

  2. Beste Maikel,

    Ik wil graag een child theme maken zodat de mensen voor wie ik een website bouw, niet kunnen zien welk thema ik gebruik.

    Is het mogelijk om de naam en afbeelding van mijn child theme aan te passen en dan de parent thema te verwijderen?

    Met vriendelijke groet,

    Dave

    • Het parent thema mag je nooit verwijderen. De naam en afbeelding van het child theme kan wel gewijzigd worden. Let er dan alleen wel op dat je alle thema instellingen opnieuw moet instellen, omdat WordPress het als een ander thema ziet.

  3. Woow zo simpel 😉 Ik heb dit eens geprobeerd. Ik had een thema en de auteur had voor heel veel zaken text-transform:uppercase ingesteld. Ik heb dan een child gemaakt met op de nodige plaatsen text-transform: none; en dan alles gewist wat niet nodig was in het child.

    Schitterend: 10 minuten werk en alles werkt naar behoren in plaats van uren heen en weer te mailen met de auteur om custom CSS in te voeren 😉

    Er staat wel een foutje in je uitleg waar ik even achter moest zoeken:
    Template: Naam hoofdthema
    Is verkeerd, het moet de naam zijn van de folder van het hoofdthema in plaats van de naam van het hoofdthema.

    Groetjes, Wilfried

  4. Hallo Webtalis,

    Handige en interessante tutorial, voor onze website https://coinstart.nl zijn wij op zoek naar een handige WP ontwikkel tool.
    Een soort offline voor google dev. omgeving, wij willen namelijk de website ombouwen naar een ander thema.
    Deze moet in een nacht in 1 keer goed gezet worden, vandaar!

    heb jij tips? 🙂
    Of wellicht heb je hier al een keer iets over geschreven?

    Alvast dank.

    • Nee, nog niets over geschreven. Maar je kunt bijvoorbeeld met Xampp een lokale testomgeving maken als je dat zou willen. Wanneer je het op een online server wilt doen is dit ook mogelijk door een subdomein te gebruiken en deze dan te verbergen voor Google door de website op privé te zetten en/of zoekmachines te blokkeren.

  5. Hallo Maikel,

    vooreerst bedankt voor de zeer bruikbare tip.
    Als ik de stylen.css file aanpas van het child-theme, dan heeft dat blijkbaar geen direct effect op de site.
    Het resultaat krijg ik pas na een bepaalde tijd te zien.
    Ook niet direct bij refreshen van de pagine, of uit en aan zetten van browser, of ook niet na herstarten van de computer.
    Meestal voer ik de wijziging ’s avonds door, dan is het effect ’s anderendaags wel te zien.
    Is er een mogelijkheid om dit te versnellen?

    Alvast bedankt.

  6. Dag Maikel,

    Waarom zou je handmatig een childtheme maken als het zo eenvoudig kan met een plugin? Mijn site is nog niet gepubliceerd. Maakt dat enig verschil uit?

    Bedankt
    Hendrik

      • Dag Maikel,

        Hartelijk dank !

        Een kennis gaf me als antwoord dat het met de plugin soms fout kan gaan. De plugin zou in conflict kunnen geraken met andere plugins. Zolang het goed gaat ga ik het toch blijven doen via plugins. 🙂

  7. Hoi Maikel,

    Ik heb al aanpassingen gedaan in het hoofdthema voordat ik een child theme had aangemaakt. Als ik nu alsnog de aangepaste css code in de child theme plaats dan zou bij een update nog moeten werken. Klop dat?

    Ook heb ik een aanpassing gedaan in de functions.php file. Moet ik nu de hele file kopiëren naar de child of een functions.php met alleen de aanpassing?

    Alvast bedankt voor je hulp!

    • Klopt, wanneer je de aangepaste CSS toevoegt aan je child-theme, dan blijft dit bij een update behouden en zal het moeten blijven werken.

      De functions.php is een apart bestand. Je hoeft hier niet alles heen te kopiëren, alleen de extra dingen die je hebt toegevoegd.

  8. Hoi Maikel,

    Duidelijke uitleg! Nog een vraagje, voor een webshop maak ik aanpassingen in de woocommerce php bestanden, alleen kan ik in mijn child theme (Uplift) alleen maar de eerste map zien, dus: Uplift child->woocommerce en dan de bestanden. En niet Uplift child-> woocommerce->loop en dan de bestanden. De extra achterliggende mappen pakt hij niet. Zou jij weten waar dit aan ligt?

  9. Beste Maikel,

    Bedankt voor de handige tips. Ik heb nu een child theme. Als ik nu een wijziging wil aanmaken, moet ik dat dan eerst gewoon in het parent theme doen, waarna dit autmatisch wordt overgezet naar het child theme? Ik heb in de Editor bij het child theme maar beperkte mogelijkheden namelijk

    Bedankt!!

    • Alle wijzigingen moet je juist doen in het child theme. Mocht je dus een code in een bestand willen aanpassen, dan kun je deze kopiëren uit je parent thema halen en ook in het child theme plaatsen met de wijzigingen.

  10. Beste Maikel,
    Ik wil wat aanpassingen maken in wp-content/themes//includes/navigation.php. Kan ik gewoon een kopie van navigation/php neerzetten in wp-content/themes//includes/ en die aanpassen? Of moet er nog iets anders gebeuren?

    Hoe weet WP nu dat ik met de navigation.php in de child map de wp-content/themes//includes/navigation.php bedoel? Een bestand met diezelfde naam kan toch ook in een andere map voorkomen?

    • Klopt, zo werkt het inderdaad. Het is echter soms zo dat bestanden in mappen niet goed overschreven worden. Bij het ene thema werkt het wel prima en bij het andere thema wat minder.

      In het child thema staat altijd in het style.css bestand om welk hoofdthema het gaat, waardoor WordPress weet welk thema het hoofdthema het is en welke bestanden je wilt overschrijven.

  11. Nuttig artikel, dank!
    Ik loop alleen tegen een probleem aan: ik probeer de PHP’s te kopieren naar de map van het child theme maar ik krijg geen toegang. De map is aangemaakt door WordPress, dus ik neem aan dat de rechten daarmee ook bepaald worden.
    Kan ik daar iets binnen WordPress mee of moet ik host systeembeheer verzoeken of ze wel bij die map kunnen?
    Voor de duidelijkheid: het child theme is gemaakt zoals hierboven aangegeven, niet met een plug-in.
    Alvast dank!

    • Hoe bedoel je dat je geen toegang krijgt? Wat voor melding zie je? Binnen WordPress kan je niets met de rechten, maar via FTP zou je altijd bij de bestanden moeten kunnen komen. Een bericht naar je hostingprovider is niet zo gek inderdaad als we het over hetzelfde hebben.

  12. Beste Maikel,
    Ik gebruik het Hueman theme al een tijdje en ik zag dat er een theme update was verschenen……Mooi natuurlijk maar ik heb geen idee of ik iets in het css gewijzigd En ik heb nog geen child theme, heel fijn dus……….Wat is wijs.
    Kan ik gewoon een child theme maken en daarna mijn theme updaten of verlies ik dan toch nog mijn wijzigingen.
    Het zou zomaar kunnen dat ik niets gewijzigd heb in het css maar hoe kom ik daar achter, zijn er programmaatjes die dat kunnen opsporen…………het enigste wat ik mij kan herinneren is dat ik iets, een code van Yoast (seo) erin gezet heb…….Zoals je ziet ben ik niet bepaald een licht op dit vlak maar ik zou het heel fijn vinden als jij de oplossing had…………..
    Groetjes Rob

    • Wanneer je nu een child theme maakt verlies je bij een update alsnog de wijzigingen, omdat de wijzigingen in het hoofd thema zijn gemaakt.

      Je zou kunnen kijken of je de versie die je nu op je website hebt draaien nogmaals kunt downloaden, zodat je de bestanden met elkaar kunt vergelijken. Je kunt dit met een programma als notepad++ of gewoon via je browser door de inhoud van beide bestanden te kopiëren en te plakken. Hier zijn verschillende websites voor te vinden als je in Google zoekt op compare code.

      Wanneer je alleen iets hebt toegevoegd voor Yoast, dan zal dit niet in het style.css bestand zijn gedaan. Misschien in het header.php bestand om ervoor te zorgen dat de titels goed werden weergegeven?

  13. Hi Maikel,

    Kan ik ook ná het maken van mijn website (theme ‘Bridge’, themeforest) nog een child theme aanmaken? Zoals ik het lees is het puur een kopie die je dan instelt als thema.

    Mijn website is inmiddels af en ik zou graag mijn updates van Bridge willen doorvoeren, maar weet dus niet of ik nu te laat ben met het maken van een child theme…

    Alvast bedankt!

  14. Maikel , wat raad je mij aan voor het volgende. Ik heb een script gemaakt voor een animated logo (in een joomla omgeving) . Er loopt een flash beam door het logo (zie http://www.robo-ts.nl ) Ik wil deze site omzetten naar wordpress en wil dit logo uiteraard het zelfde laten zien. Ik heb gelezen dat dit het beste via een child zou kunnen gaan? Waar zou ik het script in moeten brengen . (php?) er is ook een css .
    Hoe los ik e.e.a. op in wordpress

    • Sowieso in een child theme inderdaad. In welk bestand hangt een beetje af van het thema waar je gebruik van maakt. Vaak moet je voor het logo in het header.php bestand zijn en de css kun je in het style.css bestand plaatsen van je child theme.

  15. 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?

    • Je moet in een child theme inderdaad altijd de mapstructuur van het parent theme volgen.

      Gelukkig werkt het bij de meeste thema’s prima, maar het komt weleens voor dat het op deze manier alsnog niet werkt omdat het thema dat je gebruikt het niet goed ondersteund. Wanneer dit het geval is moet je alsnog het originele bestand moeten aanpassen.

  16. Hallo,

    Ik heb de plugin One-Click Child Theme Plugin gebruikt, maar nu is de hele website verdwenen. Ook kan ik niet meer in WordPress Dashboard komen.
    Als ik de site open toont hij een lege pagina.

    Heeft u een idee hoe ik dit op kan lossen?

    Met vriendelijke groet,

    Collin

    • Oei, dat heb ik nog nooit meegemaakt met deze plugin. Wat je kunt doen is via FTP de map van je child theme even verwijderen of hernoemen. De map van je child theme staat in de map “wp-content/themes”.

  17. Hmm, ik ben echt heel blond op dit gebied. Ik zie het nut van een child-theme en ik wil er graag één maken. Ik begrijp alleen niet zo goed hoe de aanpassingen in het child-theme vervolgens zichtbaar worden op je online-theme.

    • De aanpassingen worden zichtbaar omdat je onder Weergave -> Thema’s het child theme gebruikt als thema.

      Je child theme gebruikt in eerste instantie de code uit het hoofd thema, maar zodra je iets toevoegt of aanpast wordt de code uit het hoofd thema overruled omdat je in WordPress je child theme hebt ingesteld als thema.

      Ik hoop dat het zo duidelijk is en zo niet stel gerust nog een vraag.

Geef een reactie