Zo maak je een child-thema aan in WordPress (uitgebreide handleiding)

Je beheert nu al een tijdje je eigen WordPress-site en deze doet eigenlijk alles wat je ervan vraagt. Tot het moment is gekomen dat je aanpassingen moet maken.

Of misschien draait jouw site op een thema dat je hebt gedownload uit de thema-bibliotheek heb je eentje gekocht en realiseer je je nu dat het niet precies werkt zoals jij dat wil.

Wat doe je dan?

Je kan een plugin zoeken die de dingen naar jouw wens aanpast of overschakelen naar een nieuw thema. Maar wat als je tevreden bent met het huidige thema en geen plugin kan vinden die deze functionaliteiten toevoegt?

Het antwoord: je moet je thema aanpassen. En er is meer een manier om dit goed te doen: via (WordPress)-child-thema’s.

In dit bericht laat ik je precies zien hoe je een child-thema kunt maken in WordPress, hoe je deze kunt gebruiken om je site aan te passen en hoe child-thema’s werken. Ik zal ook het concept van hoofdthema’s uitleggen en beschrijven hoe het hoofdthema op jouw site samenwerkt met een child-thema.

Voordat we ons bezighouden met het maken van een child-thema, gaan we de drie methoden behandelen die je kan gebruiken om jouw WordPress-site aan te passen.

Methoden voor het aanpassen van WordPress

Het aanpassen van een thema brengt risico’s met zich mee. Als je de code van een extern thema bewerkt (bijvoorbeeld een thema dat je hebt gekocht via een marktplaats), gaan al jouw wijzigingen verloren wanneer je het thema updatet. Dit betekent niet alleen dat jouw site terugkeert naar de manier waarop deze oorspronkelijk eruitzag, maar al jouw werk voor niets is geweest.

Er zijn drie manieren om je WordPress-site aan te passen:

• Je thema rechtstreeks bewerken.
• Een plugin gebruiken.
• Een child-thema van het huidige thema maken.

Laten we deze optie een voor een bekijken.

Jouw thema bewerken

Als jouw site een aangepast WordPress-thema heeft, wat betekent dat het speciaal voor jouw site is ontwikkeld, kan je dit veilig bewerken omdat er geen risico is dat je jouw aanpassingen verliest wanneer het thema in de toekomst wordt bijgewerkt.

Als jij of jouw ontwikkelaar in de toekomst wijzigingen in het thema aanbrengt is het in plaats daarvan de aangepaste versie van het thema dat je gaat bewerken, en niet de originele versie van vóór die wijzigingen.

Dat betekent niet dat het bewerken van jouw thema niet zonder risico is. Als je geen ervaring hebt met het coderen van thema’s, is het misschien alnog veiliger om een child-thema te maken (hoe dat zal ik zo laten zien). Dit is hoe ik het doe: ik heb één basisthema dat ik op al mijn sites gebruik, met standaardindeling, hooks en functies, en vervolgens gebruik ik een child-thema als ik binnen een bepaalde site wijzigingen wil aanbrengen.

Als je jouw thema rechtstreeks bewerkt, zorg er dan voor dat je een back-up van het originele thema bewaart, bewerk het thema niet op de live site (gebruik in plaats daarvan een testsite of een testomgeving) en gebruik versiebeheer om de wijzigingen bij te houden.

En als je een thema van derden gebruikt, moet je deze nooit rechtstreeks bewerken. Gebruik in plaats daarvan een plugin of maak een child-thema.

Een plugin gebruiken

De tweede optie voor het aanpassen van een WordPress-thema is het installeren of coderen van een plugin.

Als de aanpassingen die je wil maken met name functioneel- en niet design-gerelateerd zijn, is een plugin een geschiktere manier om dit te doen. Als je dus extra code wil toevoegen, is het misschien beter om een plugin te maken.

Plugins hoeven niet groot of complex te zijn: wanneer je extra code wil toevoegen aan het functions.php-bestand van jouw thema, kan je een eenvoudige plugin maken om een paar regels code aan je site toe te voegen. Een goed voorbeeld is het registreren van een custom post type.

Het kan verleidelijk zijn om code toe te voegen aan het functions.php bestand van jouw thema, maar het toevoegen van een custom post type is een functionele wijziging van jouw site, geen wijziging aan het design. Als je in de toekomst van thema wisselt, wil je deze post types en alle bijbehorende berichten niet verliezen. Daarom moet je in plaats daarvan een plugin installeren of maken.

Soms kun je een bestaande plugin vinden die doet wat je nodig hebt, maar soms moet je de plugin zelf coderen.

Als je twijfelt of je een plugin moet maken of je thema (of child-thema) moet aanpassen, stel jezelf dan de volgende vragen: als ik het ontwerp van mijn site in de toekomst wil veranderen en een nieuw WordPress thema zou installeren, wil ik dan dat deze wijziging behouden blijft? Als het antwoord ja is, betekent dit dat de verandering functioneel en niet esthetisch is en daarom in een plugin moet worden opgenomen.

Een child-thema maken

De derde optie voor het aanpassen van het WordPress-thema is het maken van een child-thema.

Er zijn enkele scenario’s waarin je een child-thema zou gebruiken:

• Je wil wijzigingen aanbrengen in het ontwerp van de site, niet in de functionaliteit.
• Jouw site gebruikt een thema van een externe partij of een thema dat je opnieuw wil gebruiken in de huidige vorm.
• Je wil jouw bestaande thema niet rechtstreeks bewerken voor het geval dit problemen veroorzaakt (misschien ben je geen ervaren thema-ontwikkelaar).
• Jouw site heeft een thema dat is ontworpen als hoofdthema, zoals een framework. Dit zijn thema’s met veel aanpassingsopties zoals hooks, die je kan toevoegen via jouw eigen child-thema.

Child-thema’s zijn daarom een effectieve en veilige manier om aanpassingen aan je site toe te voegen. Laten we deze dus wat gedetailleerder gaan bekijken.

Wat is een WordPress child-thema?

De hamvraag is dus: wat is nou precies een child-thema in WordPress? En hoe werkt het?

Een child-thema is een thema dat samenwerkt met een ander thema, dat het hoofdthema wordt genoemd.

Het bevat een aantal specifieke instructies om WordPress te vertellen dat dit een child-thema is en wat het hoofdthema is. WordPress gebruikt dan in de meeste gevallen de code van het bovenliggende thema, maar zal delen hiervan vervangen door code van het child-thema (indien nodig). Als je een site tegenkomt met een child-thema dat je bevalt, gebruik dan onze Theme Detector Tool om erachter te komen wat het hoofdthema is.

De bestanden in een WordPress child-thema

Elk child-thema in WordPress moet minimaal twee bestanden bevatten: een stylesheet en een functiebestand, wat ook wel het functions-bestand wordt genoemd. De stylesheet bevat regels die WordPress vertellen dat dit een child-thema is en wat het bijbehorende hoofdthema is. Het functiebestand bevat een functie die de stylesheet van het hoofdthema ophaalt.

Opmerking: je kan handleidingen tegenkomen die je vertellen dat je de stylesheet van het bovenliggende thema moet oproepen vanuit de stylesheet van het child-thema. Dit is niet langer de juiste manier om dit te doen, en je moet in plaats daarvan enqueuing gebruiken in het functiebestand. Ik zal je zometeen laten zien hoe je dit kunt doen.

Jouw child-thema hoeft geen andere bestanden te bevatten. In tegenstelling tot het hoofdthema, heeft het geen index.php bestand nodig als fallback (iets om op terug te vallen) wanneer er geen specifiekere bestanden in het thema te vinden zijn. Dit komt omdat WordPress het bestand van het hoofdthema gebruikt wanneer een template niet bestaat binnen het child-thema, .

Dus afhankelijk van wat je wil dat jouw child-thema doet, voeg je ofwel extra code toe aan de stylesheet, aan het functiebestand, of maak je extra bestanden in het child-thema aan die delen van het hoofdthema te vervangen. Deze kunnen een of meer van de volgende opties bevatten:

• Template-bestanden om hetzelfde bestand van het hoofdthema te overschrijven, zoals page.php. Handig als je de weergave van statische pagina’s wilt aanpassen.
• Template-onderdelen zoals header.php of footer.php wanneer je deze delen van het site-ontwerp wilt aanpassen.
• Extra template-onderdelen die je vanuit template-bestanden in het child-thema oproept. Wanneer je de header wilt aanpassen van statische pagina’s, maak je een bestand in jouw child-thema met de naam header-page.php en een template-bestand met de naam page.php, die page.php vervangt vanuit het hoofdthema. Dit template bestand zou identiek zijn aan die in het hoofdthema, behalve de aanroep voor het headerbestand, dat header-page.php zou heten in plaats van header.php.
• Extra include-bestanden die voor functionaliteit zorgen. Wanneer je veel functionele code wilt toevoegen en organiseren, kan je bestanden opnemen voor elke set functies en deze vervolgens aanroepen in het functions.php bestand van jouw child-thema. Dus wanneer je bijvoorbeeld extra Customizer-opties wilt toevoegen, kan je een bestand met de naam customizer.php toevoegen aan jouw child-thema en dat bestand vervolgens oproepen vanuit het functiebestand in het child-thema.

Maar wanneer je extra bestanden en functies toevoegt, hoe weet WordPress dan welke te gebruiken? Die van het hoofdthema of die van het child-thema? Dat is waar we hieronder naar gaan kijken.

Hoe kiest WordPress templatebestanden

De manier waarop WordPress template-bestanden uit jouw thema kiest bij het weergeven van content op jouw website, is direct gelinkt aan de template-hiërarchie.

WordPress gebruikt deze hiërarchie om de template-bestanden in jouw thema te doorlopen en de juiste te vinden om te gebruiken bij het weergeven van een bepaald soort content. Het begint bovenaan (aan de linkerkant in de bovenstaande afbeelding) en zoekt beurtelings naar elk bestand voor het gegeven inhoudstype. Wanneer het een bestand vindt dat die inhoud zal weergeven, zal WordPress deze gebruiken.

Stel je voor dat je thema een archive.php bestand en een category.php bestand heeft, maar geen tag.php bestand. Bij het weergeven van een categorie-archief gebruikt WordPress category.php omdat dit specifieker is voor het inhoudstype. Wanneer een tag-archief wordt weergegeven, gebruikt het in plaats daarvan archive.php, omdat er geen tag.php bestaat.

Als WordPress geen template bestand voor het gegeven inhoudstype vindt, wordt standaard het catch-all bestand index.php gebruikt. Daarom moet elk op zichzelf staand thema (dus geen child-thema) een index.php bestand hebben.

Hetzelfde geldt voor single posts en pagina’s. Stel dat jouw thema een singular.php-bestand heeft, wat de verzamelnaam is voor afzonderlijke berichten van elk post type (inclusief pagina’s en custom post types). Het thema heeft ook een page.php bestand. Wanneer een single page wordt weergegeven, gebruikt deze page.php. Wanneer een artikel (post) wordt weergegeven, gebruikt deze singular.php. En wanneer je een custom post type registreert en geen template bestand voor dat post type toevoegt, gebruikt deze wederom singular.php.

Wanneer je een child-thema gebruikt, gebruikt WordPress nog steeds de template-hiërarchie om te beslissen welk bestand moet worden gebruikt bij het laten zien van inhoud op jouw site. Het kijkt naar de bestanden in zowel de hoofd- als child-thema’s en gebruikt het eerste bestand dat WordPress tegenkomt.

Stel je voor dat jouw child-thema singular.php en post.php heeft en dat het hoofdthema page.php en index.php bevat. Bij het uitvoeren van een bericht gebruikt WordPress post.php uit het child-thema. Bij het laten zien van een pagina gebruikt hij page.php uit het hoofdthema. En bij het uitvoeren van een enkel bericht van een custom post type, gebruikt WordPress singular.php van het child-thema.

Maar wat als zowel jouw child- als hoofdthema exemplaren van hetzelfde bestand hebben?

Stel dat je in het vorige voorbeeld een page.php bestand aan het child-thema toevoegt. Omdat dat thema zich in het child-thema bevindt, wordt hetzelfde bestand uit het hoofdthema genegeerd. Dus bij het weergeven van een enkele pagina, zal WordPress het nieuwe bestand page.php van het child-thema gebruiken.

Daarom kan je door het creëren van een child-thema het hoofdthema aanpassen. Als je een kopie van een template bestand uit het hoofdthema toevoegt aan het child-thema en deze vervolgens bewerkt met de aanpassingen die jij wil maken, gebruikt WordPress dit nieuwe template bestand in plaats van het hoofdthema. Dit betekent dat jouw aanpassingen worden gebruikt bij het weergeven van inhoud, zonder dat je het hoofdthema hebt bewerkt. Top!

Hoe WordPress functies van hoofd- en child-thema’s uitvoert

Wat als je geen aanpassingen wil maken aan de templates van je thema, maar aan de functies?

Ook dit is mogelijk! We hebben al gezegd dat de beste manier om functies aan je site toe te voegen het maken van een plugin is en niet via een child-thema. In sommige gevallen kan het echter wel slimmer zijn om dit via het thema te doen, bijvoorbeeld wanneer je een functie wil bewerken die al in het bovenliggende thema zit, bijvoorbeeld de functie die de colofon in de footer uitvoert.

Vervolgens voeg je de nieuwe functie(s) toe aan het functiebestand van jouw child-thema of aan een include-bestand dat je oproept vanuit het functiebestand.

Om ervoor te zorgen dat jouw nieuwe functie de functionaliteit van het hoofdthema vervangt, moet je weten hoe het overriden van functies werkt. Er zijn drie manieren om dit te doen:

• Door een nieuwe functie te schrijven met dezelfde naam als een plugbare functie in jouw hoofdthema.
• Door de functie in het hoofdthema los te haken van de hook waaraan deze was bevestigd en vervolgens een nieuwe functie te schrijven om deze te vervangen.
• Door een nieuwe functie met een hogere prioriteit dan de oorspronkelijke functie te schrijven en deze via dezelfde hook aan te roepen, wat betekent dat deze na de oorspronkelijke functie wordt aangeroepen en deze daardoor kan overschrijven of uitbreiden.

We zullen later in dit artikel onderzoeken hoe je dit allemaal doet. Maar laten we eerst eens kijken naar de scenario’s waarin je een child-thema wel of niet zou gebruiken.

Wanneer gebruik je een child-thema in WordPress (voordelen)

Je weet nu wat child-thema’s zijn en hoe je deze kan gebruiken om de template-bestanden of functies in jouw hoofdthema te overschrijven.

Als korte samenvatting: je kan een child-thema gebruiken wanneer je een thema op je site actief hebt en je een of meer van de volgende dingen wil bewerkstelligen:

• Het bewerken van een of meer template bestanden.
• Toevoegen van extra functies die te maken hebben met weergave en niet met functionaliteit.
• Het overschrijven een of meer functies van het hoofdthema.
• Het toevoegen van extra template bestand(en).

Enkele voordelen zijn:

• Eenvoudige uitbreidingen en aanpassingen: Zoals nu duidelijk moge zijn, breidt een child-thema de functionaliteit van het hoofdthema uit. Je hebt al een kant-en-klaar template tot je dienst in de vorm van een hoofdthema en alles wat je hoeft te doen is een ​​afzonderlijk style.css bestand voor je child-thema te maken en de aanpassingen aan te passen aan de hand van je persoonlijke behoeften.
• Probleemloos updaten: naarmate WordPress zich verder ontwikkelt, moeten ook thema’s en plugins worden bijgewerkt. Wanneer je aanpassingen en wijzigingen aanbrengt in het hoofdthema, kan je al jouw wijzigingen verliezen bij het bijwerken van een thema. Het is daarom raadzaam om dergelijke wijzigingen in een child-thema aan te brengen, zodat je niet bang hoeft te zijn jouw wijzigingen te verliezen, zelfs wanneer je ooit het hoofdthema moet bijwerken,.

Maar zijn er ook redenen om niet voor een child-thema te kiezen?

Wanneer een child-thema niet te gebruiken (nadelen)

Soms hoef je geen child-thema te gebruiken en kan je een andere methode gebruiken om jouw site aan te passen. Dit is wanneer:

• Het thema dat je gebruikt door jou zelf is ontwikkeld (of iemand anders dat voor je heeft gedaan) en je deze niet ergens anders hoeft te gebruiken. Bewerk simpelweg het thema en zorg ervoor dat je gebruik maakt van versiebeheer.
• De aanpassingen die je wil maken functioneel zijn, b.v. een custom post type toevoegen, en je deze wil behouden wanneer je in de toekomst van thema verandert. Gebruik dan een plugin in plaats van een child-thema.

Enkele nadelen zijn:

• Moeilijk om een goed hoofdthema te kiezen: niet alle thema’s fungeren goed als hoofdthema! Bepaalde WordPress-thema’s worden bijvoorbeeld niet regelmatig bijgewerkt en missen daarom vaak de nieuwste features. Verder worden niet alle WordPress-thema’s gemaakt met child-thema’s in het achterhoofd en zijn daardoor een slechte kandidaat om als hoofdthema te fungeren. Het is dus niet makkelijk, maar wel cruciaal om het perfecte hoofdthema kiezen, die je kan uitbreiden en laten werken als basis voor jouw child-thema’s.
• Inspanningen rond customization: een child-thema breidt in feite een bestaande template-ontwerp uit. Als je dus al een website rondom jouw hoofdthema hebt gemaakt, moet je mogelijk de aanpassing van elementen als menu’s, thema-opties, zijbalken, koptekst, etc. opnieuw overwegen wanneer je naar een child-thema switcht.

Nu weet je wanneer (en wanneer niet) je een child-thema moet gebruiken, is het tijd om aan de slag te gaan en te leren hoe je een child-thema kan maken in WordPress.

Hoe maak je een WordPress child-thema

Bij het instellen van een eenvoudig child-thema in WordPress worden twee bestanden aangemaakt: een stylesheet en het functiebestand. Laten we ze beide bekijken.

De stylesheet

Voordat je dit bestand aanmaakt, moet je een map maken voor het thema. Deze moet in de wp-content/themes map van jouw WordPress-installatie gezet worden.

Onthoud: doe dit niet op je live site. Voeg de code eerst toe aan een testsite en test deze vervolgens op deze site. Als je tevreden bent met het resultaat, kun je het overzetten naar je live site. Alle hostingpakketten van Kinsta bevatten een testomgeving waar je dit veilig en snel kan doen.

Maak een bestand met de naam style.css in de map van jouw nieuwe thema. Voeg daar het volgende aan toe:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Deze tekst is commentaar. Het is geen code die iets op jouw site uitvoert of functionaliteit biedt. In plaats daarvan vertelt het WordPress over het thema. Je hebt tekst als deze nodig in elk thema, anders kan WordPress het niet als een thema herkennen.

Laten we elk van die lijnen doornemen om te bepalen wat ze doen:

• Theme Name: De unieke naam van het thema.
• Theme URI: De locatie waar gebruikers de code of documentatie van het thema kunnen vinden.
• Description: Tekst om gebruikers te helpen begrijpen wat het thema doet.
• Author: Jouw naam.
• Textdomain : dit wordt gebruikt voor internationalisering. Gebruik het tekstdomein als tweede parameter in alle internationaliseringsfuncties.
• Author URI: De website van de auteur.
• Template: De map waarin het hoofdthema is opgeslagen. Gebruik de naam van de map en niet de themanaam. Zonder deze regel werkt jouw thema niet als child-thema.
• Version: Het versienummer
• LIcense: De licentie, die GNU moet zijn. [link]
• Licence URI: De link naar informatie over de licentie.

De belangrijkste regel voor een child-thema is de regel van “Template:”. Zonder deze regel functioneert het thema niet als een child-thema. Alleen child-thema’s bevatten deze regel namelijk.

Voeg bovenstaand toe aan de stylesheet van je thema en pas deze aan met je eigen gegevens in plaats van de mijne. Nogmaals, zorg dat je de regel met “Template:” bewerkt, zodat je de map toevoegt waarin jouw bestaande thema zich bevindt, want dit is je hoofdthema! Deze regel koppelt het hoofdthema dus aan het child-thema.

Sla het bestand op. Als je nu op je site het Thema-overzicht bekijkt, zou het volgende moeten worden weergegeven:

Echt geweldig ziet dit er niet uit, dat geven we toe. Dat komt omdat het thema geen schermafbeelding bevat. Dit is een afbeelding die een idee geeft van hoe het thema eruit ziet. Tenzij jouw thema er heel anders uit zal zien dan het hoofdthema, kopieer je gewoon het screenshot.png bestand van het hoofdthema naar jouw child-thema.

Het Functions-bestand

De volgende stap is het toevoegen van een functiebestand aan jouw child-thema. Je hebt dit bestand nodig om de stylesheet uit het hoofdthema te halen. Zonder dit zou jouw site geen stijlen gevatten en er ongeveer zo uitzien:

Dit ziet er niet best uit en ik ga er voor het gemak van uit dat je het met me eens bent. Tijd om stijlen (styles) toe te voegen, zodat alles er weer mooi uit zal zien.

In de map van jouw child-thema moet je een bestand genaamd functions.php toevoegen. Open deze en voeg de onderstaande code toe:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Dat gebruikt de functie wp_enqueue_style() om de stylesheet uit het hoofdthema te halen, waarbij de functie get_template_directory_uri() zoekt waar dat bestand is opgeslagen. De functie bevindt zich in een functie die ik heb gemaakt, genaamd kinsta_parent_styles(), die op zijn beurt is gekoppeld aan de hook wp_enqueue_scripts.

Je vraagt je misschien af waarom het de functie genaamd wp_enqueue_scripts gebruikt en niet wp_enqueue_styles. Dit komt omdat wp_enqueue_scripts wordt gebruikt voor zowel scripts als stijlen en er geen wp_enqueue_styles hook bestaat.

Voel je vrij om mijn code te bewerken om je eigen voorvoegsel toe te voegen aan de naam van je functie. Ik heb ‘child-theme’ als mijn voorvoegsel gebruikt om te zorgen dat mijn functie niet botst met andere functies uit het hoofdthema of met plugins.

Sla nu jouw bestand op.

Hoe activeer je jeWordPress child-thema

Als je child-thema af is, moet je deze activeren. Wanneer je je zorgen maakt dat het activeren van het child-thema het bovenliggende thema uitschakelt, vrees dan niet: WordPress weet dat het de bestanden van het hoofdthema moet gebruiken, tenzij je nieuwe bestanden aan het child-thema toevoegt die deze overschrijven. Tot nu toe heb je geen extra bestanden of functies toegevoegd aan het child-thema, dus jouw site werkt op precies dezelfde manier als wanneer alleen het hoofdthema is geactiveerd.

Onthoud: doe dit eerst op jouw testsite of -omgeving. Activeer het child-thema niet op de live-site totdat je deze grondig hebt getest.

Ga in de WordPress admin naar Weergave > Thema’s. Je vind daar het child-thema tussen de thema’s die op jouw site zijn geïnstalleerd.

Beweeg met de muis over het thema en klik op de knop Activeren. Dit activeert het child-thema. Wanneer je nu de site bezoekt, ziet deze er hetzelfde uit als voorheen:

Het ziet er hetzelfde uit, omdat je nog geen aanpassingen hebt toegevoegd. Maar je hebt nu wel een werkend child-thema. Goed gedaan!

Hoe pas je jouw child-thema aan in WordPress

Nu je een werkend child-thema hebt voor je WordPress-site, is het tijd om je aanpassingen toe te voegen. Hier zal ik je laten zien hoe je template bestanden toevoegt om die van je hoofdthema te negeren, hoe je stijlen aan je child-thema kunt toevoegen en hoe je nieuwe functies kunt toevoegen.

Laten we beginnen met template bestanden.

Hoe voeg je template bestanden aan jouw WordPress Child-thema

We hebben al gekeken hoe WordPress kiest welk template bestand moet worden gebruikt bij het weergeven van content op jouw site. Er zijn twee dingen om te onthouden:

• WordPress gebruikt het bestand dat als eerste in de hiërarchie staat, of dit zich nou in het child- of het hoofdthema bevindt.
• Als een template bestand (of een template onderdeel zoals header.php) met dezelfde naam voorkomt in zowel de hoof- als child-thema’s, gebruikt WordPress die van het child-thema.

Om aanpassingen toe te voegen, vind ik het persoonlijk het makkelijkst eerst een kopie van het bestand in kwestie uit het hoofdthema te maken, dat toe te voegen aan het child-thema en deze vervolgens te bewerken.

Dit doe ik ongeacht of het bestand uit mijn child-thema dezelfde naam heeft als die uit het hoofdthema, of als het een nieuw bestand zal zijn voor het weergeven van een ander inhoudstype, of een bestand dat hoger in de hiërarchie staat.

Dus als ik een nieuwe versie van page.php aan mijn child-thema toevoeg, die page.php in mijn hoofdthema vervangt, zal ik page.php van mijn hoofdthema naar mijn child-thema kopiëren en vervolgens bewerken. Zorg ervoor dat je het bestand kopieert: verplaats het niet, omdat je geen wijzigingen in het hoofdthema wilt aanbrengen.

En als ik bijvoorbeeld een aangepast pagina template in mijn child-thema wil, kopieer ik page.php naar mijn child-thema, hernoem het en bewerk dat.

Op deze manier kan je ervoor zorgen dat alle aspecten van het bestand dat je niet hoeft aan te passen, nog steeds correct werken. Hetzelfde geldt voor template onderdelen.

Hoe voeg je stijlen toe aan jouw WordPress Child-Thema

Je kunt ook stijl toevoegen aan het style.css-bestand van je child-thema, dat de stijl in de stylesheet van je hoofdthema zal veranderen of vervangen.

WordPress roept eerst de stylesheet uit het hoofdthema aan en vervolgens de stylesheet uit het child-thema. Dit betekent dat als je stijl toevoegt aan het child-thema dezelfde element(en) target voor stijlen in het hoofdthema, deze zal de opmaak van het hoofdthema overschrijven, zolang je dezelfde selector(s) gebruikt.

Stel je dus voor dat je de kleur van de site-titel wilt wijzigen. In het hoofdthema kan dit ongeveer zo worden vormgegeven:

h1.site-title {
 color: #000;
}

Om dit te overschrijven in je child-thema, moet je dit toevoegen:

h1.site-title {
 color: #303030;
}

Wanneer de browser deze stijl tegenkomt, na de stijl uit het hoofdthema, zal de browser de eerste overschrijven en in plaats daarvan de stijl uit je child-thema gebruiken.

Hoe voeg je functies toe aan jouw WordPress child-thema

Nu even een ander scenario: je hebt een child-thema in WordPress gemaakt, niet omdat je een van de template bestanden wilt bewerken, maar omdat je extra functionaliteit wil toevoegen of een of meer functies in het hoofdthema wil overschrijven.

Functies aan jouw child-thema toevoegen is iets ingewikkelder dan het toevoegen van template bestanden, maar het is zeker mogelijk.

Wanneer je een nieuwe functie wil toevoegen, die op geen enkele manier interacteert met een van de functies in het hoofdthema, kan je dat gewoon zonder problemen doen. Voeg gewoon de functie toe aan het functions.php bestand van jouw child-thema, koppel het aan de relevante actie of filter-hook en je bent klaar.

Maar wanneer je van plan bent om een ​​functie in het hoofdthema te overschrijven of te bewerken, moet je begrijpen welke methoden je hiervoor kunt gebruiken. Er zijn drie manieren om een ​​hoofdthema-functie in jouw child-thema te overschrijven:

• Als het thema in het bovenliggende thema kan worden geplugd, schrijf je gewoon een andere functie in het child-thema met dezelfde naam en dan voert WordPress die functie uit in plaats van die in het bovenliggende thema.
• Als je wilt voorkomen dat de functie in het hoofdthema wordt uitgevoerd, kan je een functie in jouw child-thema schrijven die deze loskoppelt van de hook waaraan deze is bevestigd,.
• Wanneer je een functie wil uitbreiden, kan je een andere functie (met een andere naam) toevoegen aan jouw child-thema en ervoor zorgen dat deze wordt uitgevoerd na de functie in het hoofdthema.

Laten we eens nader kijken hoe elke methode in de praktijk eruitziet.

Een pluggable functie overschrijven

Een pluggable functie wordt geïdentificeerd door de conditionele check waarin die zich bevindt. Hiermee wordt gecontroleerd of er een andere functie met dezelfde naam bestaat, die al is geactiveerd. Wanneer dit het geval is, wordt de functie niet uitgevoerd.

WordPress activeert functies van jou child-thema eerder dan die van het hoofdthema. Als het een pluggable functie in het hoofdthema tegenkomt en jij hebt een functie toegevoegd aan jouw child-thema met dezelfde naam, wordt de pluggable functie niet meer uitgevoerd.

Een voorbeeld is de functie die het colofon uitvoert in het Storefront-thema voor WooCommerce-sites. Hier is de functie zonder zijn inhoud:

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Als je die functie wil overschrijven dan moet je een andere functie met dezelfde naam (storefront_credit()) schrijven en deze aan dezelfde hook koppelen als in het hoofdthema.

Een functie losmaken van de hook van een hoofdthema

Als de functie van het hoofdthema niet pluggable is, kan je nog steeds voorkomen dat deze wordt uitgevoerd. Stel je voor dat je hoofdthema de functie parent_function() heeft, die aan de init hook is gekoppeld met een prioriteit van 20. Je wil voorkomen dat deze wordt uitgevoerd, zodat je hem kan vervangen door een eigen functie.

Dit is hoe de hoofdthema-functie eruit zou kunnen zien:

function parent_function() {
 //contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

Om hem los te maken van de hook, zou je deze code in je child-thema kunne gebruiken:

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

Let op dat je de tweede functie koppelt aan de wp_head hook die bovenaan elke pagina wordt uitgevoerd en dat je dezelfde waarde voor de parameter prioriteit moet opnemen als in de oorspronkelijke functie. Wanneer de oorspronkelijke functie add_action() geen prioriteit had, kan je dat ook weglaten uit de functie remove_action() van jouw child-thema.

Opmerking: als de oorspronkelijke functie is gekoppeld aan een filter-hook in plaats van een action-hook, zou je remove_filter() op dezelfde manier gebruiken.

Een functie uitbreiden met een andere functie

In plaats van een functie te negeren of te verwijderen, wil je er soms wat aan toevoegen. In dit geval zou je een nieuwe functie met een andere naam schrijven en deze aan dezelfde hook bevestigen.

Stel dat we er een action-hook voor de voettekst in jouw hoofdthema bestaat met de naam parent_footer. Elke functie die je aan die hook bevestigt, wordt uitgevoerd op de plaats waar de hook zich bevindt.

In het hoofdthema is er al een functie met de naam parent_footer_content() die de voettekst vult. Maar wat als je er wat extra code aan wilt toevoegen?

Dit is hoe de functie parent_footer_content() eruit zou kunnen zien in het hoofdthema:

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

Als je daarna extra inhoud wilt toevoegen, zou je een functie in je child-thema kunnen maken, gekoppeld aan dezelfde action-hook, met een prioriteit die aangeeft dat het na de eerste functie wordt uitgevoerd. Omdat de prioriteit niet is ingesteld voor de functie van het hoofdthema, wordt deze standaard ingesteld op 10. Dus je moet een hoger nummer gebruiken om daarna te kunnen uitvoeren.

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

Het bovenstaande zou de code van de functie van je child-thema toevoegen na de code van de functie van je hoofdthema.

Problemen met child- en hoofdthema’s oplossen

Je weet nu hoe je een child-thema kunt maken in WordPress en hoe je dit kunt gebruiken om template bestanden te overschrijven, extra styling en functionaliteit aan jouw site toe te voegen.

Maar wat als het child-thema niet werkt zoals je wil? Wat als de inhoud niet wordt weergegeven zoals je had verwacht of een functie niet wordt geactiveerd?

Gebruik deze checklist om problemen met jouw child-thema op te lossen:

1. Controleer of je het child-thema hebt geactiveerd en of het hoofdthema niet nog steeds actief is. Het is verrassend eenvoudig om deze stap te vergeten!
2. Vernieuw de browser-cache en de cache die door eventuele plugins op jouw site is gemaakt.
3. Stel wp-debug in op true in het wp-config.php bestand van jouw child-thema. Als je naar een wit scherm kijkt, zou er een bericht moeten staan dat je vertelt welke code het probleem heeft veroorzaakt en in welk bestand deze zich bevindt. Dit helpt je om de bug te identificeren en om erachter te komen in welk bestand deze zich bevindt.
4. Controleer de output-code van jouw pagina, bericht of archief. Zoek het body-element en bekijk welke classes deze bevat. Deze zullen je vertellen naar welk type inhoud je kijkt, wat je zal helpen met het identificeren van welk template bestand wordt gebruikt. Soms is dit namelijk niet wat je verwacht. De hoofd blog-pagina gebruikt bijvoorbeeld nooit archive.php, ook al geeft het een archief van jouw berichten weer.
5. Controleer of je jouw bestanden correct hebt benoemd. Raadpleeg de template hiërarchie om er zeker van te zijn dat je de juiste syntaxis hebt gebruikt.
6. Wanneer je een bestand van het bovenliggende thema hebt gedupliceerd en aan jouw child-thema hebt toegevoegd, controleer dan of je de wijzigingen hebt opgeslagen.
7. Als een functie om een ​​pluggable functie te overschrijven niet werkt, controleer dan of je deze exact dezelfde naam hebt gegeven als de andere functie en of de functie in het hoofdthema inderdaad plugbaar is.
8. Als een functie die je hebt verwijderd nog steeds is geactiveerd, controleer dan of je de juiste prioriteit hebt toegevoegd en of jouw spelling identiek is aan de spelling van de functie en de hook in het hoofdthema.
9. Wanneer je prioriteit hebt gebruikt om een ​​functie te overschrijven of uit te breiden, probeer dan de prioriteitswaarde te verhogen, zodat je er absoluut zeker van kunt zijn dat deze als laatst wordt uitgevoerd. Controleer of er geen andere functies aan die hook zijn gekoppeld die jouw code verstoren.

Hopelijk helpen een of meer van deze stappen je om het probleem te identificeren en op te lossen in het child-thema. En onthoud: bewerk het hoofdthema nooit rechtstreeks.

Handige tips over het werken met child-thema’s in WordPress

Poe! Child-thema’s zijn een flink onderwerp en een ongelooflijk waardevolle functie van WordPress. Ik gebruik ze op elke site die ik bouw.

We hebben nu een aantal methodes besproken waarmee je op effectief gebruik kan maken van child-thema. Hieronder zijn nog een aantal tips om je op weg te helpen:

• Als je een thema van een externe partij moet bewerken, gebruik dan altijd een child-thema. Op deze manier gaan jouw wijzigingen niet verloren wanneer je het thema bijwerkt.
• Elk child-thema heeft een stylesheet en een functiebestand nodig.
• WordPress gebruikt de template hiërarchie om te bepalen welk template bestand moet worden gebruikt bij het uitvoeren van inhoud. Als het twee bestanden met dezelfde naam vindt, zal WordPress die van het child-thema gebruiken.
• Je kan een pluggable functie in jouw hoofdthema negeren door een functie met dezelfde naam in het child-thema te schrijven.
• Je kan een functie uit het hoofdthema verwijderen met behulp van een functie met remove_action() of remove_filter() in jouw child-thema en vervolgens een nieuwe functie schrijven.
• Je kan een functie in het hoofdthema uitbreiden door een functie in jouw child-thema te schrijven en aan dezelfde actie- of filter-hook te koppelen.
• Vergeet niet jouw child-thema te activeren nadat je deze hebt geüpload. En zorg ervoor dat niemand het hoofdthema uit jouw WordPress-installatie verwijdert: zonder dit werkt het child-thema niet.

Samenvatting

Child-thema’s zijn een handige functie van WordPress waarmee je een thema kunt aanpassen zonder de code direct te bewerken. Je kan er een gebruiken om extra functionaliteit aan een thema toe te voegen, om de stijl aan te passen of om template bestanden te maken of te bewerken.

Wanneer je het bovenstaande advies opvolgt, kan je op de juiste manier child-thema’s in WordPress maken deze inzetten voor een aantal verschillende doelen. En dat allemaal zonder jouw wijzigingen en aanpassingen te verliezen wanneer je het hoofdthema bijwerkt.