Een child thema is een WordPress thema dat de functionaliteit, functies en stijl erft van een ander WordPress thema, het ouder thema.

Waarom heb je een Child Theme nodig?

U kunt dan het child thema aanpassen zonder wijzigingen aan te brengen in het parent thema. Child themes zijn de beste manier om een WordPress thema aan te passen omdat ze tijd en moeite besparen. Het ouder thema bevat al veel opmaak en functionaliteit, dus u hoeft niet alles vanaf nul te coderen.

Ze maken het ook veilig om uw WordPress thema’s te updaten. Omdat u het child thema heeft aangepast en niet het parent thema, zult u geen aanpassingen verliezen wanneer u het parent thema update. Als u tevreden bent met uw kind thema, kunt u het zelfs gebruiken op een andere WordPress site.

Voordat u begint met het maken van een Child Theme

Om een child thema te maken, moet u zich ervan bewust zijn dat u zult werken met code. U moet een basiskennis van HTML en CSS hebben om te begrijpen welke wijzigingen u in de code moet aanbrengen om uw doelen te bereiken. Enige kennis van PHP is ook nuttig. U zou op zijn minst bekend moeten zijn met het kopiëren en plakken van stukjes code uit andere bronnen.

Wij raden u aan te oefenen op uw lokale ontwikkelomgeving. U kunt een live WordPress site naar uw lokale server verplaatsen voor testdoeleinden of dummy content gebruiken voor thema ontwikkeling. Ten slotte moet u beslissen over een ouder thema. U kunt het beste een ouder thema kiezen dat qua uiterlijk en functies vergelijkbaar is met uw einddoel. Het doel is om zo weinig mogelijk wijzigingen aan te brengen.

Child theme bij bestaande WordPress thema’s

De betere WordPress thema’s hebben vrijwel altijd al een Child theme. Ik raad je aan deze te gebruiken. Wel zo makkelijk. Thema’s met een bestaand Child theme:

Handleiding: het creëren van uw eerste Child Thema

U kunt een kind thema handmatig maken door het creëren van de map en bestanden die nodig zijn. Of u kunt een kind thema met behulp van een plugin te maken.

De handmatige methode is handig omdat het u zal helpen vertrouwd te raken met de bestanden die u nodig hebt om mee te werken later in de tutorial. De plugin-methode kan worden gebruikt als je problemen hebt het creëren van deze bestanden. U hoeft maar één methode te gebruiken, en u kunt naar de methode van uw voorkeur springen met behulp van de links hieronder.

• Methode 1: Een kinderthema maken met behulp van code
• Methode 2: Een kinderthema maken met behulp van een plugin

Methode 1: Een child thema maken met code

Als eerste moet u /wp-content/themes/ in uw WordPress installatiemap openen en een nieuwe map voor uw kinderthema maken. U kunt deze map elke naam geven die u wilt. Voor deze tutorial, zullen we het wpbdemo noemen.

Vervolgens moet u de eerste twee bestanden voor uw kind thema te creëren. Begin met het openen van een tekst editor zoals Kladblok. Dan moet je de volgende code te plakken in het lege document.

Thema Naam: cursuswp child thema
Thema URI: https://www.cursuswp.com/
Beschrijving: Een Twenty Twenty-One kind thema
Auteur: cursuswp
Auteur URI: https://www.cursuswp.com
Sjabloon: twentytwentyone
Versie: 1.0.0
Tekst Domein: twentytwentyonechild

Deze code bevat informatie over het kind thema, dus voel je vrij om het te veranderen om aan je behoeften te voldoen. Sla dit bestand nu op als style.css in de map van het kinderthema die je zojuist hebt gemaakt. Dit is het belangrijkste stylesheet van je kind-thema.

Het volgende dat je moet doen is een tweede bestand maken dat de stylesheets van het ouder thema importeert, of enqueue. Om dat te doen, maak je een nieuw document aan in je tekst editor en kopieer je de volgende code.

/* enqueue scripts en stijlen van ouder thema */

functie twentytwentyone_styles() {
wp_enqueue_style(‘child-style’, get_stylesheet_uri(),
array( ’twenty-twenty-one-style’ ), wp_get_theme()->get(‘Version’) );
}
add_action(‘wp_enqueue_scripts’, ’twentytwentyone_styles’);
Deze code werkt wanneer je Twenty Twenty-One gebruikt als het ouder thema. Gebruikt u een ander parent theme, dan dient u andere code te gebruiken zoals beschreven in het WordPress Theme Handbook.

Als je problemen hebt met het aanpassen van de code voor een ander ouder thema, dan kun je misschien beter de plugin methode gebruiken.

Sla dit bestand nu op als functions.php in je child theme map. We zullen later terugkomen op dit bestand om functionaliteit toe te voegen aan je child theme.

Opmerking: In het verleden werd het ouder thema geïmporteerd met behulp van het @import commando in style.css. We raden deze methode niet meer aan omdat het de tijd die nodig is om de style sheets te laden zal verlengen.

U heeft nu een zeer eenvoudig child thema gemaakt, en wanneer u naar Appearance ” Themes gaat zou u het WPB Child Thema moeten zien. U moet op de knop Activeren klikken om het kind thema te gebruiken op uw site.

Klik op de Activeer knop

Aangezien u nog niets heeft veranderd in uw kind thema, zal uw site de functionaliteit en het uiterlijk van het ouder thema gebruiken. U kunt nu verder gaan naar de volgende sectie waar u het kind thema aan te passen.

Methode 2: Een Child Theme maken met WordPress plugin

Child Theme Configurator is een eenvoudig te gebruiken WordPress plugin waarmee je snel kinderthema’s kunt maken en aanpassen zonder code te gebruiken.

Het eerste wat je moet doen is de Child Theme Configurator plugin installeren en activeren. Voor meer details, zie onze stap voor stap handleiding over hoe een WordPress plugin te installeren.

Na activering, moet u naar Extra ” Child Themes in uw WordPress dashboard navigeren.

Op de Ouder / Kind tab wordt u gevraagd om een ouder thema te selecteren uit een drop down menu. Wij kiezen voor het Twenty Twenty-One thema.

Child thema aanpassen

Nu gaan we het child thema aanpassen, zodat het er een beetje anders uitziet dan het ouder thema. Dit doen we door code toe te voegen aan het style.css bestand, en dat vereist enige bekendheid met CSS.

Je kunt het proces vereenvoudigen door de bestaande code van het ouder thema te kopiëren en aan te passen. U kunt die code vinden met de Inspector van Chrome of Firefox, of door hem rechtstreeks te kopiëren uit het style.css-bestand van het overkoepelende thema.

Code kopiëren vanuit de Chrome of Firefox Inspector

De eenvoudigste manier om de CSS-code te vinden die u moet wijzigen, is door de inspector-tools te gebruiken die bij Google Chrome en Firefox worden geleverd. Met deze tools kunt u de HTML en CSS achter elk element van een webpagina bekijken.

Als je bijvoorbeeld de CSS wilt zien die wordt gebruikt voor de body van het bericht, ga je gewoon met je muis over het bericht en klik je met de rechtermuisknop om Inspecteren te selecteren. Lees eventueel de volgende handleiding over het inspecteren van CSS: