Child Theme in WordPress: zo werkt je template altijd perfect

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

Om hacks tegen te gaan moet je WordPress Core, plugins en je thema regelmatig updaten. Soms overschrijf je daarbij onbedoeld wijzigingen in je thema. Ontdek hoe je dit voorkomt met een child theme. 

Voor WordPress verschijnen regelmatig updates. Installeer je deze niet, dan kan je site gehacked worden of werkt hij niet meer correct. 

Updates zijn er voor de hoofdbestanden van WordPress, plugins en thema’s. Installeer je een nieuwe versie van een thema? Dan overschrijf je ook eventuele aangebrachte wijzigingen in de code. Gelukkig kun je daar vooraf wat aan doen. 

Met een child theme kopieer je functionaliteiten en vormgeving van je site naar een aparte nieuwe map. WordPress blijft daar vanaf bij een update. Zo werkt je site altijd perfect.

Wil je weten hoe je een WordPress-thema aanpast met een child theme? Lees dan snel verder. 

Wat is een child-thema voor WordPress?

Een hoofd- en child-thema in WordPress horen bij elkaar en werken als eenheid. 

Het hoofdthema is leidend en bevat de belangrijkste code. In het child-thema staat extra of aangepaste code, bijvoorbeeld voor de opmaak van de site of een ander logo. 

Update je het hoofdthema van je site, dan laat WordPress het bijbehorende child-thema ongemoeid. Je hoeft gemaakte wijzigingen dus niet opnieuw door te voeren.

Een bijkomend voordeel is dat je met een child theme met heel weinig risico kunt experimenteren. Pakken je wijzigingen niet goed uit? Dan begin je gewoon opnieuw en cruciale bestanden blijven ongemoeid. 

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

Wanneer kies je voor een child theme?

Deze vraag kunnen we kort en krachtig beantwoorden: altijd. Ook als je nu niet van plan bent wijzigingen aan te brengen in je theme.

Met een gratis plugin maak je eenvoudig een child-thema van je huidige sjabloon. Die kun je dan gebruiken als jij (of je webbouwer) in de toekomst wel dingen wilt aanpassen. 

Bij wijzigingen kun je denken aan de grootte van letters, de kleur van links of andere extra functionaliteiten. Wellicht wil je een aanpassing in een menu maken die altijd moet tonen. Je kunt het zo ingewikkeld maken als je zelf wilt. En bij een update blijven de aanpassingen intact.

Wat zijn de voordelen van child-thema's? 

Het grootste voordeel van een child theme is dat je WordPress theme ongewijzigd blijft na een update. Maar er zijn er meer. 

Met een child theme kun je je website volledig naar je hand zetten. Zowel qua uitstraling als functionaliteit. Veiligheid-updates voer je door in het hoofdthema en je overschrijft niet per ongeluk aangepaste bestanden. 

Nog een voordeel is dat je het wiel niet opnieuw hoeft uit te vinden. Kies een sjabloon voor je site waar je overwegend tevreden over bent. Zet hem daarna met aanpassingen in het child theme volledig naar je hand. 

Een derde voordeel is dat je met een child-thema leert coderen. De uitstraling van je WordPress website aanpassen is makkelijker dan je denkt. En met een child theme herstel je eventuele fouten snel. 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 2 manieren een child theme toevoegen aan WordPress:

1. Handmatig
2. Met een plugin

Bij de handmatige aanpak heb je de meeste controle. Je kopieert bestanden zelf, past ze aan in een editor en uploadt ze dan weer. 

Zelf een child-thema maken is goed te doen en op YouTube vind je duidelijke instructies. Bedenk wel dat je geduld moet hebben en nauwkeurig moet werken. 

Wil je zonder technisch gedoe een child theme maken? Gebruik dan een van deze handige plugins (er zijn er meer).

1. Child Theme Generator, super simpel en snel

2. Child Theme Configurator, meer mogelijkheden

💡 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. 

Als je child theme gemaakt is kun je in weergave kiezen voor je child theme, daarna zet je de plugin uit en gooi je hem weg, hij is dan niet meer nodig.

Heeft een child theme voor WordPress ook nadelen? 

Een child theme voor WordPress levert zelden problemen op. Heel soms komt het voor dat je bepaalde bestanden niet kunt beschrijven, maar dit ligt meestal aan de hosting. 

Bij professionele hosting en een premium template krijg je altijd support. Zo los je eventuele foutmeldingen snel op. 

Het grootste ‘nadeel’ van child themes was voorheen dat je wat technische kennis nodig had om ze aan te maken en te bewerken. Met een van de eerder genoemde plugins is dat niet meer nodig.

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 inloggevens van je hostingprovider kun je naar deze map navigeren. Maak hier een lege map aan, geef hem dezelfde naam als je hoofdthema en sluit af met -child. 

Gebruik je als hoofdthema bijvoorbeeld ‘twentyfifteen’? Dan noem je de map voor het child-thema (je mag ook een andere naam verzinnen):

twentyfifteen-child

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

Je 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 deze pagina ( link : 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 in ‘twentyfifteen’;

Sla op als:

style.css

Stap 3. Koppel de stylesheets aan het theme

De volgende stap is het koppelen van de stylesheets aan het thema. 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 tot slot onder Weergave > Thema’s het child-thema. Wijzigingen die je voortaan in de stylesheet zie je terug op de site. Experimenteer zo met kleuren, letters en de vormgeving. 

💡 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 thema 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 kun 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

Maak je liever een child theme met een plugin, dan kan dat ook. Met ‘Child Theme Configurator’ doe je dit eenvoudig en snel. 

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”.

In principe kun je de plugin nu verwijderen van je website.

Voorkom fouten op live website en test wijzigingen vooraf 

In WordPress kun je eenvoudig dingen aanpassen en via de instellingen van je thema gaat dit vrijwel altijd goed. Bij het aanpassen van code zijn er echter meer risico’s. 

Je kunt je website al ‘platleggen’ met een tikfout. Dit kun je ook weer snel verhelpen, maar het is toch altijd even schrikken. Zeker als je weinig ervaring hebt. 

Kies daarom een hosting provider die dagelijks back-ups maakt. En test wijzigingen bij voorkeur op een testsite of in een testomgeving. Dan kan je niets overkomen. 

Met een child theme werkt je website altijd optimaal 

Wil je wijzigingen doorvoeren in een WordPress-thema? Doe dit dan altijd in een child theme. Dan kun je naar hartenlust experimenteren en blijven de instellingen ook bij een update intact. 

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