WordPress Child Theme maken: zo werkt je template altijd perfect

Categorie: Handige tip | Tags: child, layout, ontwikkeling, parent, plugin, thema

Een WordPress child theme: wellicht heb je er nog niet zo vaak van gehoord, maar het is wel degelijk belangrijk. Er verschijnen regelmatig updates voor WordPress. Dit kan zijn voor de WordPress-hoofdbestanden, maar ook voor bijvoorbeeld plug-ins en thema’s. Installeer je een nieuwe versie van een thema? Dan overschrijf je ook eventuele aangebrachte wijzigingen in de code. Installeer je deze niet? Dan kan jouw site gehackt worden of hij werkt in het vervolg niet meer correct. Met behulp van een child thema kan je dit voorkomen. Je kopieert hiermee je functionaliteiten en vormgeving van de site naar een aparte, nieuwe map. WordPress blijft daar van af bij een update, waardoor je site altijd perfect werkt. In deze tekst leggen we je uit hoe je een WordPress-thema aanpast met een WordPress child theme.

Wat is een child-thema voor WordPress?

Voordat we dieper op de materie in gaan, leggen we je graag eerst even uit wat een WordPress child theme precies is. Een hoofdthema en een child theme in WordPress horen bij elkaar en werken als een eenheid. Het hoofdthema is leidend en bevat de belangrijkste code. In het child theme staat een extra of een aangepaste code, bijvoorbeeld voor de opmaak van de site of een ander logo. Besluit je om het hoofdthema van de site te updaten, dan laat WordPress het bijbehorende child theme ongemoeid. Je hoeft gemaakte wijzigingen dus niet opnieuw door te voeren. Bijkomend voordeel is dat je met een child theme met heel weinig risico kunt experimenteren. Pakken de wijzigingen niet goed uit? Dan begin je gewoon opnieuw en belangrijke bestanden blijven onaangetast.

Een child theme is ideaal om mee te experimenteren. Gaat het mis, dan begin je gewoon opnieuw.

Wanneer kies je ervoor om een WordPress child theme te maken?

Benieuwd in welke situatie je het beste zo’n WordPress child theme kunt maken? Dan kunnen we kort en bondig antwoorden: altijd. Ook op het moment dat je niet van plan bent om wijzigingen aan te brengen in je child theme. Met een gratis plug-in maak je eenvoudig een child theme van je huidige sjabloon. Die kan je vervolgens gebruiken wanneer je (of de webbouwer) in de toekomst het WordPress theme wel wilt aanpassen. Als je het WordPress theme gaat aanpassen, kan je denken aan de lettergrootte, kleuren of andere extra functionaliteiten. Je kunt het zo ingewikkeld maken als je zelf wilt en uiteraard blijven de aanpassingen na een update intact.

Wat zijn de voordelen van child themes?

Het grootste voordeel van een child theme is dat je WordPress theme ongewijzigd blijft na en update. Maar er zijn meer voordelen, die we hieronder graag voor je op een rijtje zetten.

Zet de website volledig naar jouw hand
Met een WordPress child theme kan je jouw website volledig naar jouw hand zetten, zowel qua uitstraling als qua functionaliteit. Je voert veiligheidsupdates door in het hoofdthema en je overschrijft niet per ongeluk bestanden die eerder zijn aangepast.

Je hoeft het wiel niet opnieuw uit te vinden
Met het gebruik van een WordPress child theme hoef je geen onnodig werk te doen. Kies eenvoudig een sjabloon voor je site waar je overwegend tevreden over bent, waarna je deze met behulp van wat aanpassingen in het child theme volledig naar je hand kunt zetten.

Je leert met een child theme coderen
Het aanpassen van de uitstraling van jouw WordPress website is simpeler dan je wellicht zult denken. Met het child theme herstel je simpel en snel jouw eventuele fouten. Vaak volsta je al met een paar aanpassingen in de opmaak, zonder dat je hoeft te kunnen programmeren.

Update je je WordPress-site? Dan overschrijf je met een Child Theme geen aangepaste bestanden.

Hoe voeg je een child theme toe aan WordPress?

Je kunt op verschillende manieren een child theme toevoegen aan WordPress. Het is mogelijk om het handmatig te doen, maar het kan ook met behulp van een plug-in. Kies je voor de handmatige aanpak? Dan heb je de meeste controle. Je kopieert de bestanden zelf, past ze aan in een editor om ze vervolgens te uploaden. Zelf een WordPress child theme maken is goed te doen en op YouTube zijn er ook nog eens duidelijke instructies te vinden. Bedenk wel dat je tijdens het maken van een child theme op WordPress geduld moet hebben en nauwkeurig te werk moet gaan.

Wil je zonder technisch ‘gedoe’ een child theme maken? Gebruik dan één van de volgende handige plug-ins. De Child Theme Generator is bijvoorbeeld super simpel en snel, terwijl je met de Child Theme Configurator juist meer mogelijkheden hebt. Als jouw child theme eenmaal is gemaakt, dan kan je in weergave kiezen voor je child theme. Vervolgens zet je de plug-in uit en gooi je hem weg; deze is vanaf dat moment niet meer nodig.

💡 Goed om te weten. Bij veel commerciële WordPress-thema's is een child theme inbegrepen. Die kun je dan apart installeren en desgewenst aanpassen. 

Heeft een child theme voor WordPress ook nadelen? 

Omdat we het handig is als jij zelf handmatig een child theme kunt maken, leggen we hieronder in vogelvlucht uit hoe het moet. Voer deze stappen bij voorkeur in een ontwikkelomgeving uit, en dus niet direct op je ‘live’ website. Op die manier heb je alle tijd om wijzigingen uit te proberen.

Met een plugin maak je eenvoudig en zonder technische kennis een child-thema.

Hoe maak je handmatig een child theme?

WordPress legt in dit artikel duidelijk uit hoe je een child theme maakt. Hieronder staan in vogelvlucht de stappen. Voer ze bij voorkeur in een ontwikkelomgeving uit en niet direct op je ‘live’ website. Dan heb je alle tijd om wijzigingen uit te proberen. 

Stap 1. Maak een lege map aan voor je child theme

WordPress-software bestaat uit verschillende bestanden en mappen. Thema’s staan in de map ‘/wp-content/themes/’. Met een bestand-programma zoals het gratis ‘Filezilla’ en de inloggegevens van je hostingprovider kan je naar deze map navigeren. Maak hier een lege map aan, geef deze dezelfde naam als je hoofdthema en uit af met ‘-child’. Gebruik je als hoofdthema bijvoorbeeld ‘twentyfifteen’? Dan noem je de map voor het child theme dus ‘twentyfifteen-child’.

Stap 2. Maak een CSS-bestand aan in de lege map

Jouw WordPress-site moet weten dat je gebruik maakt van het parent-theme. Dit geef je aan in een CSS-bestand in de map van je child theme. Download de gratis editor Notepad++, kopieer en plak vervolgens de CSS-code van de pagina ‘https://developer.wordpress.org/themes/advanced-topics/child-themes/#2-create-a-stylesheet-style-css’ en pas de velden aan. De velden bij ‘Theme Name’ en ‘Template’ zijn verplicht. Bij Template vul je in dit geval ‘twentyfifteen’ in en je slaat het vervolgens op als ‘style.css’.

Stap 3. Koppel de stylesheets aan het child theme

De volgende stap is het koppelen van de stylesheets aan het child theme. Hoe dit precies werkt verschilt per thema en vaak gaat het automatisch goed. Geldt dit niet voor jouw theme? Bekijk dan de instructies bij WordPress.

Stap 4. Installeer het child theme

Installeer nu het child-thema in WordPress, net als een gewoon thema. 

Stap 5. Activeer onder Weergave > Thema’s het child theme 

Wijzigingen die je voortaan in de stylesheet doet zie je terug op de site. Experimenteer op die manier met letters, kleuren en de vormgeving.

Maakte je niet eerder gebruik van een child theme en voerde je wijzigingen rechtstreeks door in het hoofdthema? Dan is dat niet erg. Kopieer de aangepaste code uit de stylesheet van het hoofdthema naar de stylesheet van het child theme. Wanneer je het hoofdthema in de toekomst wilt updaten, dan gebruikt WordPress de gekopieerde instellingen uit het child theme.

💡 Tip. Voor Firefox en Chrome bestaan handige CSS-plugins, zoals CSS Scan. Activeer je de plugin en klik je op een onderdeel van een webpagina, dan zie je welke code daarvoor verantwoordelijk is. 

Ook kun je de code visueel aanpassen in de browser en zie je het verschil. Ben je tevreden, dan kun je de wijzigingen definitief doorvoeren in de bijbehorende stylesheet. 

Help, ik heb mijn hoofdthema al gewijzigd! 

Maakte je niet eerder gebruik van een child theme en voerde je wijzigingen rechtstreeks door in het hoofdthema? Dan is dat niet erg. Kopieer de aangepaste code uit de stylesheet van het hoofdthema naar de stylesheet van het child-thema. Update je in de toekomst het hoofdthema? Dan gebruikt WordPress de gekopieerde instellingen uit het child-thema.

Hoe pas je de footer aan in een child theme? 

Een WordPress theme bestaat vaak uit meerdere bestanden en stylesheets. Zo maakt je thema bijvoorbeeld gebruik van het bestand ‘footer.php’. Hierin staan dan de instellingen voor de footer, zoals ‘©2021’. Het bestand ‘footer.php’ kan je aanpassen bij het hoofdthema. Maar ook hier is het makkelijker om een kopie te maken. Download een kopie van het bestand via FTP naar je harde schijf. Pas het vervolgens aan, bijvoorbeeld met Notepad++, en sla de wijzigingen op. Upload het aangepaste bestand ‘footer.php’ vervolgens weer via FTP naar de map van je child theme en overschrijf het oude bestand.

Zo maak je een child theme met een plugin

Als je liever een child theme in wordpress wilt maken met een plug-in, dat is dat uiteraard ook mogelijk. Met ‘Child Theme Configurator’ gaat dit ook nog eens snel en eenvoudig.

Zo'n Child Theme Configurator werkt als volgt:

1. Installeer en activeer de plugin.
2. Ga naar “Gereedschap -> child themes”. 
3. Geef aan dat je een child theme wilt maken en selecteer het hoofdthema (parent theme).
4. De plugin analyseert nu het hoofdthema. 
5. Voer eventueel wijzigingen door, afhankelijk van je thema en wensen. 
6. Bevestig de instellingen met “Create New child theme”.
7. Activeer het nieuwe thema onder “Weergave -> Thema's”.

Hierna kan je in principe de plug-in verwijderen van je website.

Voorkom fouten op live website en test wijzigingen vooraf 

In WordPress kan je eenvoudig dingen aanpassen en via de instellingen van je thema gaat dit vrijwel altijd goed. Bij het aanpassen van de code heb je echter met meer risico’s te maken. Je kunt namelijk met één tikfout de gehele website al plat leggen. Dit kan je vervolgens uiteraard wel weer snel verhelpen, maar het is toch altijd even schrikken. Zeker als je hier weinig ervaring mee hebt. Kies daarom voor een hosting provider die dagelijks back-ups maakt en test wijzigingen bij voorkeur eerst op een testwebsite of in ieder geval een testomgeving. Op die manier loop je geen risico en kan je dus niets overkomen.

Met een child theme werkt je website altijd optimaal 

Kortom: wanneer je een WordPress thema wil aanpassen, doe dit dan altijd in een child theme. Op die manier kan je naar hartenlust experimenteren en blijven de instellingen ook bij een update intact. Meer weten over het WordPress child theme? Neem gerust even contact op met onze specialisten, die je hier alles over kunnen vertellen.

Als je dit artikel leuk vond, dan moet je deze speciaal geselecteerde artikelen ook lezen!