Wanneer je aan de slag gaat met WordPress krijg je het vroeg of laat de vraag “Gebruik je wel een childtheme?”. Ik hoop voor je dat het in jouw geval eerder vroeg dan laat is.

Een childtheme zorgt er namelijk voor dat eventuele CSS, PHP of andere wijzigingen aan jouw WordPress thema behouden blijven bij het uitvoeren van een update aan WordPress, jouw thema of plugins.

In dit artikel vertel ik je meer over de voordelen van het gebruiken van een childtheme en laat ik je stap voor stap zien hoe je een childtheme maakt.


  1. Wat is een childtheme voor WordPress?
  2. Wat heb je aan een childtheme?
  3. Hoe maak je een childtheme voor WordPress?
    3.1 Style.css bestand maken
    3.2 Functions.php bestand maken
    3.3 Map voor childtheme maken
  4. Childtheme installeren en activeren in WordPress
  5. Leuke extra’s met een childtheme
    5.1 Afbeelding toevoegen aan je childtheme
    5.2 Logo op inlogscherm voor WordPress

Wat is childtheme voor WordPress?

In de praktijk bestaat een childtheme uit een map met daarin minimaal een style.css bestand. In theorie is een childtheme als het ware een extra thema waarin je de wijzigingen bewaard die je aan je WordPress website maakt.

Wat heb je aan een childtheme?

Stel dat je bijvoorbeeld met CSS een wijziging maakt aan een bestand dat officieel in je thema thuis hoort dan zal deze automatisch weer worden overschreven wanneer je update naar de nieuwste versie van je thema.

Door zo’n CSS wijziging op te slaan in je childtheme kun je gewoon het hoofdthema blijven updaten. Aangezien de wijziging staat opgeslagen in het childtheme (dat niet beïnvloed wordt door zo’n update) zal de wijziging gewoon blijven bestaan.

Een concreet voorbeeld is bijvoorbeeld de trackingscode van Google Analytics. De instructies geven aan dat je dit stuk code in het header.php bestand van je (WordPress) website moet plaatsen.

Wanneer je dit doet zul je merken dat Google Analytics een verbinding heeft kunnen maken met jouw WordPress website. Vanaf dat moment worden jouw statistieken dan ook getoont in Google Analytics.

Maar wanneer er in de toekomst een update voor WordPress uitkomt zullen bestanden zoals header.php overschreven worden met een nieuwe versie. Het header.php bestand waarin je jouw unieke Google Analytics trackingscode had staan zal dus verwijderd worden waardoor je de verbinding met Google Analytics verliest.

De vrij eenvoudige oplossing is het maken en gebruiken van een childtheme om daar vervolgens een header.php bestand in te zetten met jouw unieke Google Analytics trackingscode.

Zoals eerder uitgelegd kunnen de bestanden van je hoofdthema dan gewoon geupdate worden en de wijzigingen die je in het childtheme hebt gedaan zullen gewoon blijven bestaan.

Hoe maak je een childtheme?

In sommige gevallen hoef je zelf geen childtheme te maken. Steeds meer ontwikkelaars leveren een childtheme bij de aanschaf van een WordPress thema.

Het voordeel daarvan is dat je enkel het hoofdthema en het childtheme naar wp-content > themes hoeft te slepen en vervolgens in de backend van WordPress het childtheme hoeft te activeren.

Mocht jij nou geen childtheme bij je thema geleverd hebben gekregen dan is het goed om te weten dat je met enkele stappen zelf een childtheme kunt maken.

Een style.css bestand maken

  1. Open een tekstverwerker, bijvoorbeeld Kladblok voor Windows of Teksteditor voor macOS.

  2. Plak daarin de volgende code:
  1. Van bovenstaande stuk tekst is het eigenlijk alleen heel belangrijk dat je aangeeft waar dit het childtheme van is.

    Dit doe je door de naam van het thema in te geven bij Template. Stel het thema dat jij gebruikt is Twenty Seventeen, dan voer je hier dus in twentyseventeen.

    Dat is namelijk de naam van de map van het thema Twenty Seventeen.

    Bij Text Domain: Kun je de de naam van het childtheme in geven. Om het makkelijk en overzichtelijk te houden kun je hier bijvoorbeeld twentyseventeen-child van maken.

  2. Nu sla je het document op, op je bureaublad met de naam style.css. Hoogstwaarschijnlijk krijg je de melding dat dit niet mogelijk is. Kies in dat geval voor een optie als gebruik beide, of indien het echt niet anders kan, laat het gewoon de standaard extensie.

    Vervolgens wijzig je de extensie van iets als .doc, .txt etc. naar .css.

    Dit kan zo simpel zijn als de volledige naam van het bestand wijzigen naar style.css. Je krijgt waarschijnlijk de vraag of je zeker weet dat je deze wijziging wilt toepassen en dan kan kies je voor ‘Ja’.

Je hebt nu een CSS bestand gemaakt! We moeten nu nog een functions.php bestand maken om het voor WordPress duidelijk te maken waar de rest van de informatie vandaan moet komen.

Een functions.php bestand maken

  1. Open een nieuw bestand in NotePad of Teksteditor en plaats de onderstaande code daarin:

  1. Sla dit bestand vervolgens op als functions.php. Mocht het wederom niet mogelijk zijn een andere extensie te gebruiken dan sla je het bestand alsnog op en wijzig je de extensie naar .php zoals je dat gedaan hebt met style.css.

  2. Je hebt nu een style.css én een functions.php bestand gemaakt.

Map voor childtheme maken

  1. Maak een nieuwe map aan op je bureaublad. Geef deze map de naam die je ook hebt ingevuld bij Text-Domain in het style.css bestand dat je net hebt aangemaakt, in ons voorbeeld dus twentyseventeen-child.
  1. Plaats nu beide bestanden (style.css en functions.php) in de map twentyseventeen-child.

Je hebt net een childtheme gemaakt!

Childtheme installeren en activere op WordPress

Wanneer je een childtheme hebt gemaakt is het zaak om dit thema te installeren en activeren.

Dit kun je op meerdere manieren doen. In dit artikel vertel ik je over de allermakkelijkste manier.

  1. Ga naar jouwwebsite.nl/wp-admin en log in met de bij jou bekende gegevens.

  2. Kies aan de linkerkant voor Weergave en vervolgens voor Thema’s.

  3. Klik nu op Nieuwe toevoegen en vervolgens voor Thema uploaden.

  4. Ga even terug naar je bureaublad, waar je jouw childtheme hebt staan, en klik met je rechtermuisknop op de map. Kies nu voor Kopiëren naar > Gecomprimeerde map (Windows) of direct voor  Comprimeer ‘naam map’ (macOS).

  5. Er zal vervolgens een gecomprimeerd .zip bestand op je bureaublad komen te staan met dezelfde naam als het ‘gewone’ childtheme.

  6. Ga terug naar je browser, waar je een scherm hebt met een knop Bestand kiezen. Klik op de knop en kies het gecomprimeerde childtheme. Klik daarna op de knop Nu installeren.

  7. WordPress zal vervolgens het thema uploaden en installeren.

  8. Zodra het thema geïnstalleerd is heb je drie keuzes: Live voorbeeld, Activeren of Terug naar de thema’s pagina.

    Het is verstandig om eerst te kiezen voor Live voorbeeld. Op die manier zul je letterlijk kunnen zien of het activeren van dit childtheme jouw website er anders uit zal laten zien.

  9. Wanneer je kiest voor Live voorbeeld kom je in de Customizer met aan de rechterkant het live voorbeeld. Wanneer dit er allemaal goed uit ziet kun je op de knop Activeren en publiceren klikken.

Je hebt nu een childtheme gemaakt, gecomprimeerd, in WordPress geplaatst én geactiveerd!

In de toekomst kun je eventuele CSS wijzigingen of toevoegingen aan je website dus plaatsen in het style.css bestand van je childtheme. En eventuele PHP wijzigingen of toevoegingen aan het functions.php bestand van je childtheme.

Leuke extra’s met behulp van een childtheme

Wanneer je een childtheme gebruikt voor je WordPress website kun je allerlei leuke, handige en indrukwekkende dingen uitvoeren met onder andere CSS en PHP.

Afbeelding toevoegen aan je childtheme

Zoals je misschien al opgevallen is mist je childtheme een mooie afbeelding zoals andere hoofdthema’s die wel hebben. Gelukkig kunnen we die zelf maken en gemakkelijk toevoegen.

Hiervoor heb je eigenlijk alleen programma of dienst als canva.com nodig.

  1. Maak een afbeelding met de afmetingen 1440 x 1024 pixels.
  2. Sla deze afbeelding op als screenshot.jpg

  3. Plaats de afbeelding in childtheme map.

  4. Upload de, gecomprimeerde, map. Voila!

Wanneer je het childtheme eerder hebt geïnstalleerd zonder afbeelding kun je de nieuwe versie van het childtheme uploaden.

Let op! Mocht je al wijzigingen in het childtheme hebben gemaakt dan moet je er dus eerst voor zorgen dat deze ook in de nieuwe versie, met afbeelding, staan.

  1. Ga naar Weergave > Thema’s en activeer het hoofdthema.

  2. Klik vervolgens op Themadetails van het childtheme (verschijnt alleen wanneer je met je cursor over het thema beweegt).

  3. In het nieuwe venster kun je links onderaan op Verwijderen klikken.

  4. Nu kun je de nieuwe versie installeren met de afbeelding.

Wanneer je vervolgens bij Weergave > Thema’s kijkt zul je zien dat jouw childtheme een afbeelding heeft!

Logo op inlogscherm voor WordPress

Met behulp van een logo en een stukje code in het functions.php bestand kun je de standaard WordPress inlog pagina net iets mooier maken.

  1. Zorg ervoor dat je een .png bestand hebt van jouw logo, of een andere afbeelding die je in plaats van het WordPress logo wilt tonen. De afbeelding komt het mooist tot zijn recht met de afmetingen 84 x 84 pixels.

  2. Sla dit logo op als logo.png

  3. Maak vervolgens een map aan op je bureaublad met de naam login. Plaats het logo.png bestand in de map login en plaats vervolgens de map login in je childtheme.

  4. Open het functions.php bestand van je childtheme en plaats tussen <php? en ?> de volgende code:
  1. Sla het functions.php bestand op en zorg ervoor dat de nieuwste versie van je childtheme op je WordPress website geïnstalleerd en geactiveerd wordt.

    Wanneer je rechtstreeks vanuit de Filemanager van je hostingprovider of met een FTP cliënt werkt zal je childtheme direct gesynchroniseerd worden na het opslaan van het functions.php bestand.

Wanneer je nu naar jouwwebsite.nl/wp-admin gaat zul je zien dat jouw gekozen afbeelding nu zichtbaar is in plaats van het WordPress logo.

Is het nog niet zichtbaar? Dan moet je waarschijnlijk even je cookies verwijderen.

Maak jij gebruik van een childtheme voor WordPress?

Maak jij al gebruik van een childtheme? Zo ja, heb je nog leuke mogelijkheden om te delen? Zo niet, ga je er dan mee aan de slag met bovenstaande instructies?

Groeien als ondernemer?

Ontvang wekelijks een e-mail voor een betere business

Je gegevens zijn veilig en zullen nooit met derde partijen worden gedeeld.