21 maart 2020

Tutorial: Zo maak je een child theme

Een child… Wat? Een child theme! Letterlijk vertaald: een kindje van jouw thema. WordPress werkt met thema’s en deze thema’s bepalen voor een groot gedeelte de uitstraling, mogelijkheden en functionaliteiten waarmee je kunt werken binnen je website. Als je met een child theme werkt, dan betekent dat praktisch dat er een kopie is gemaakt (child theme) van jouw hoofd thema (main theme), wat er voor zorgt dat je veilig custom aanpassingen en maatwerk kunt (laten) verrichten binnen je website.

Alle websites die ik voor mijn klanten bouw zijn gebouwd op een child theme. Een child theme biedt namelijk een enorme berg aan vrijheid en flexibiliteit. De mogelijkheid om een website helemaal te tweaken naar eigen wens of die van de klant. Gelukkig is het maken van een child theme niet ingewikkeld. En zelfs als je denkt: “Joh, dat ben ik helemaal niet nodig, mijn website is niet zo ingewikkeld”, dan kan het toch op termijn zeker de moeite waard zijn om je thema te veranderen in een child theme!

Waarom een child theme belangrijk is

Er zijn diverse redenen waarom het inzetten van een child theme verstandig is. Als je een child theme maakt, dan kun je dit zien als een soort extra laag bovenop je hoofd thema. Dit extra laagje geeft de mogelijkheid om maatwerk aanpassingen te verrichten op een veilige manier. Als je namelijk custom code aan je website gaat toevoegen of dingen in de code van je thema gaat wijzigen, gaan al deze aanpassingen verloren zodra je je thema update. En dat wil je niet! Door dat extra laagje bovenop je hoofd thema toe te voegen kun je veilig in deze laag werken zonder bang te zijn dat al je werk ooit verloren gaat.

Zoals je begrijpt is het voor webdesigners zoals ik dus onvermijdelijk om met child themes te werken. Klanten hebben al gauw de wens om iets te laten aanpassen binnen hun website wat niet met een simpel knopje kan. En dan komen child themes om de hoek kijken! Gelukkig kun je van ieder thema dat er bestaat een child theme maken. Je kunt overal dat extra laagje bovenop plaatsen!

Twijfel jij of je een child theme nodig hebt? Uit ervaring kan ik je vertellen dat je sneller een child theme nodig hebt dan je denkt! Om die reden werk ik altijd met child themes als ik een nieuwe website ga bouwen, of het nu uiteindelijk nodig is of niet.

Hoe maak je een child theme?

Nu je weet wat het belang is van een child theme, gaan we er eentje maken! Er zijn verschillende manieren om je thema om te vormen naar een child theme, maar wij gaan voor nu de gemakkelijkste manier toepassen. Voor het maken van je child theme adviseer ik de plugin Child Theme Configurator te gebruiken. In de volgende stappen leg ik je uit hoe het werkt!

Stap 1: Child Theme Configurator installeren

De eerste stap is het installeren van Child Theme Configurator. Zoals je in onderstaande afbeelding kunt zien hebben we al een thema actief: het Astra thema!

Ga naar de plugin bibliotheek op je website en zoek op ‘child theme’. Zoals je kunt zien zijn er veel meer plugins die een child theme voor jou kunnen maken. De reden waarom ik Child Theme Configurator gebruik is het feit dat deze het meest is gedownload, goed wordt ondersteund en geüpdatet en omdat het bijna plug and play is! Installeer en activeer Child Theme Configurator en ga door naar de volgende stap.

Stap 2: Child Theme Configurator instellen

We gaan nu enkele dingen binnen de child theme plugin instellen. Nadat je de plugin hebt gedownload en geïnstalleerd verschijnt hij onder het menukopje Gereedschap (op Engelse WordPress websites Tools). Zoals je ziet staat het Astra thema bij mij al geselecteerd. Laat de plugin nu het thema analyseren om te checken of de plugin er daadwerkelijk een child theme van kan maken!

Na het analyseren zullen er een reeks opties verschijnen. Zo zal optie 5 ‘Select where to save new styles’ vaak op ‘Primary Stylesheet’ staan. Dit is goed en kun je zo laten staan!

Optie 6 Select Parent Theme stylesheet handling zet ik vaak op Use the WordPress style queue. Ik laat de plugin zelf analyseren en bepalen wat de beste instellingen zijn, dit kan namelijk per thema verschillen.

Ten slotte is er nog één optie die je aan moet vinken, optie 8. De plugin adviseert zelf ook om deze optie aan te vinken. Hiermee zorg je er voor dat eventuele wijzigingen die je binnen je huidige thema reeds hebt gedaan, ook actief worden binnen het child theme. Ze worden dus onderdeel van het extra laagje wat je bovenop je thema gaat plaatsen. Zodra je optie 8 hebt aangevinkt, kun je middels de blauwe button daadwerkelijk je child theme maken!

Stap 3: activeer je nieuwe child theme

De laatste stap is checken of alles goed is gegaan en je child theme activeren! Nadat je je child theme hebt aangemaakt zul je een melding in je scherm krijgen zoals in onderstaande afbeelding. Klik op de blauwe link: preview your child theme. Het is heel erg belangrijk dat je dit doet! Door het bekijken van de preview kun je checken of je website visueel nog klopt. Als je namelijk zomaar het child theme activeert zonder vooraf te checken of er een fout in zit, kun je per ongeluk een child thema activeren die toch geen correcte instellingen blijkt te hebben.

In onderstaande afbeelding zie je de demo website die ik voor deze handleiding heb gebruikt. In het linkermenu kun je zien dat we een voorvertoning van Astra Child bekijken, het child theme die we zojuist hebben aangemaakt. Mijn demo website ziet er nu nog precies hetzelfde uit zoals hij er ook uitzag voordat we het child theme hadden gemaakt. Als jij de preview van je eigen website bekijkt met het zojuist aangemaakte child theme zul je snel genoeg zien of alles er goed uit ziet of niet.

Alles oké? Klik dan op de blauwe Activeren & publiceren knop bovenin je scherm!

Gefeliciteerd! Je child theme staat nu live. Als je terug navigeert naar Weergave > Thema’s zul je zien dat er een identieke kopie van het Astra thema tussen je lijst met thema’s staat!

Enkele belangrijke dingen met betrekking tot je child theme

Nu je je eigen child theme hebt gemaakt, zijn er nog enkele belangrijke zaken om rekening mee te houden:

Een child theme werkt alleen als het originele thema op de website staat. Denk dus niet dat je nu je originele thema kunt verwijderen omdat deze niet actief is. Bewaar zowel het originele thema als het child thema! Ze werken samen met elkaar.

Deze plugin heb je niet meer nodig, dus is er geen reden om hem nog op je website te houden. Heb je vragen of is het maken van het child theme toch niet helemaal gelukt? Mail mij dan op hetty@mediamora.nl, dan kijk ik met je mee!