Hoe Maak Je een WordPress Child-thema

Wanneer je specifieke eisen hebt, is het kiezen van een WordPress-thema geen gemakkelijke taak. Je keuze moet er goed uitzien en alle functies bieden die je nodig hebt — Een compromis is bijna onvermijdelijk.

Aanpassen van je gekozen thema is een manier om dit probleem te omzeilen. WordPress-thema’s moeten echter periodiek worden bijgewerkt. Wanneer de ontwikkelaar van jouw thema een nieuwe versie uitbrengt, kunnen al je aanpassingen worden gereset.

De oplossing?

Maak een WordPress child-thema dat de functionaliteit van het originele thema erft, maar jouw styling behoudt. Zelfs als je een thema-update toepast, blijft jouw aangepaste child-thema intact.

In deze post gaan we dieper in op WordPress child-thema’s — van waarom je er een nodig hebt tot hoe je er zelf een kunt maken. Laten we beginnen!

Wat Is Een Child-thema?

WordPress stelt je in staat een lichtgewicht kopie van elk thema te maken ten behoeve van aanpassing. Het originele thema wordt het parent-thema, en de kopie staat bekend als een child-thema.

Het child-thema is afhankelijk van het parent-thema, gebruikmakend van de functies en het ontwerp van het originele thema. Wanneer het parent-thema een update ontvangt, ontvangt het child-thema deze ook.

Maar net als een tiener, heeft het child-thema enige onafhankelijkheid. Wanneer je het child-thema aanpast, worden de wijzigingen toegepast bovenop het originele parent-thema. Die toevoegingen blijven behouden, zelfs wanneer het parent-thema wordt bijgewerkt of op een andere manier wordt gewijzigd.

Het is ook de moeite waard om op te merken dat aanpassingen aan je child-thema geen invloed hebben op het parent-thema. Ze worden namelijk apart opgeslagen. Dit betekent dat je vrij bent om te experimenteren, zonder je zorgen te maken over het beschadigen van de onderliggende code. Je kunt zelfs je child-thema volledig verwijderen, en dit zal geen effect hebben op het originele parent-thema.

Het gebruik van een child-thema maakt het gemakkelijker om je site te onderhouden en bij te werken. Het helpt je ook om het risico te vermijden van het direct bewerken van het parent-thema, wat overschreven en verloren zou kunnen gaan.

Verschillen Tussen Child-Thema’s En Parent-Thema’s

Er zijn verschillende technische verschillen tussen een parent-thema en een child-thema. Bijvoorbeeld, een parent-thema map bevat doorgaans:

• Een style.css-bestand dat het uiterlijk en de sfeer van je website bepaalt.
• Een functions.php-bestand dat je in staat stelt om functies toe te voegen of het standaardgedrag van WordPress te wijzigen.
• Verschillende sjabloonbestanden die bepalen hoe verschillende pagina’s op je site worden weergegeven.

Daarentegen heeft een map van een child-thema slechts twee essentiële bestanden nodig: style.css en functions.php. Je voegt deze bestanden toe binnen de /wp-content/themes/ directory.

Je kunt een child-thema gebruiken om stilistische wijzigingen aan je website aan te brengen, zoals het wijzigen van het standaard kleurenpalet, lettertypen en lay-outs.

Bijvoorbeeld, stel je wilt het kleurenschema van je site veranderen. Je kunt dit doen door een nieuw style.css bestand in de directory van het child-thema te maken en de volgende code toe te voegen:

body {

background-color:#fff;

}

h1 {

color: #000

}

We hebben de achtergrondkleur en de H1 kleur in de bovenstaande code gewijzigd. Deze aanpassingen zullen de styling van het parent-thema overschrijven en de kleuren op je site bijwerken. Je kunt zoveel wijzigingen aanbrengen als nodig in het style.css bestand van het child-thema.

Een child-thema erft alles van het parent-thema. Dit omvat alle sjabloonbestanden, functies en middelen zoals afbeeldingen en JavaScript-bestanden. Als je wijzigingen wilt aanbrengen in deze elementen, moet je ze kopiëren naar de directory van het child-thema vanuit het parent-thema. Je kunt dan de bestanden bewerken.

Waarom Je Een Child-Thema Zou Moeten Gebruiken

Er zijn verschillende voordelen aan het gebruik van een child-thema op je WordPress-site, waaronder:

• Thema-aanpassingen beschermen tegen automatische updates.
• Visuele elementen van je thema aanpassen.
• Leren hoe je thema’s bewerkt, wat een stap is richting het ontwikkelen van je eigen thema.

Het gebruik van een child-thema vereist ook minimale codeerervaring. In de meeste gevallen hoef je slechts een paar regels code toe te voegen aan het style.css bestand. Dit maakt het eenvoudig om te beginnen met een child-thema, zelfs als je geen thema-ontwikkelaar bent.

Als je dieper wilt duiken, kun je nieuwe elementen en functies toevoegen aan je child-thema via aangepaste code.

Hoe Maak Je Een WordPress Child-Thema Met Een Plugin

Het gebruik van een plugin is waarschijnlijk de gemakkelijkste manier om een WordPress child-thema te creëren. De plugin kan je door het hele proces leiden in eenvoudige stappen, wat betekent dat je geen technische kennis nodig hebt.

In deze handleiding gaan we aan de slag met de Child Theme Configurator plugin. Dit gebruiksvriendelijke hulpmiddel kan je helpen bij het analyseren van je thema op problemen, het creëren van een child-thema en het bewerken ervan om aan je webdesign lay-out en stijlspecificaties te voldoen.

Stap 1: Download En Installeer De Child Theme Configurator Plugin

Om te beginnen moet je de Child Theme Configurator downloaden en installeren. Dit kun je doen door naar de pagina van de plugin te navigeren en op de Download-knop te klikken:

Je computer downloadt de themabestanden in een ZIP-bestand. Navigeer vervolgens naar je WordPress-dashboard en ga naar Plugins > Add New om de bestanden te uploaden.

Klik op Upload Plugin > Kies Bestand, en selecteer de gedownloade map:

Zodra de plugin is geïnstalleerd, hoef je deze alleen nog maar te activeren. Houd er rekening mee dat je ook een WordPress-thema moet kiezen waarvan je je child-thema wilt maken.

Stap 2: Analyseer Het Parent-thema

Vervolgens navigeer naar Tools > Child-thema’s:

De plugin begeleidt je door de stappen om een child-thema te maken. Selecteer gewoon CREËER een nieuw Child-thema om te beginnen:

Je wordt gevraagd om je parent-thema te selecteren uit het dropdownmenu. Als je meerdere thema’s op je WordPress-site hebt, zorg er dan voor dat je degene kiest die je wilt aanpassen:

Klik nu op Analyze om het parent-thema te controleren op mogelijke codeproblemen:

Als de plugin compatibiliteits- of coderingsproblemen vindt, worden deze hier vermeld. Anders zie je een groene succesmelding die je vertelt dat het in orde is om door te gaan met het maken van het child-thema:

Zodra je hebt bepaald dat je parent-thema geschikt is voor een child-thema, kun je doorgaan naar de volgende stap. (Je kunt ook een ruwe data-analyse tonen of ondersteuningsverzoeken indienen bij de maker van de plugin vanaf deze pagina.)

Stap 3: Geef Je Child-Thema Map Een Naam

Hierna word je gevraagd om een naam voor de directory van het child-thema te creëren. Dit is de naam van de map binnen de bestanden van je website.

Je kunt het elke naam geven die je wilt, zolang het uniek is voor je site en alleen toegestane tekens bevat. We gebruiken “twentytwentyfour-child” voor de eenvoud van de zaak:

Houd er rekening mee dat het benoemen van de themadirectory niet hetzelfde is als het benoemen van je child-thema of het toevoegen van een themabeschrijving. Die stappen komen later.

Stap 4: Selecteer De Stylesheets Van De Child- En Parent-Thema’s

Hierna moet je het nieuwe stylesheet voor je child-thema kiezen. Als je het primaire stylesheet (style.css) selecteert, zullen je aangepaste CSS-stijlen de bestaande thema-inhoud overschrijven.

Dit is de standaardoptie, en we raden je aan deze te kiezen als je nieuw bent met child-thema’s:

Je wordt nu gevraagd om je methode voor het afhandelen van het parent-thema stylesheet te kiezen. Er zijn verschillende opties, maar we raden aan om in de meeste gevallen vast te houden aan Gebruik de WordPress-stijlwachtrij:

Als beginner is het beter om de standaardoptie te gebruiken totdat je beter bekend bent met hoe het parent-thema het stylesheet hanteert. De andere opties zijn niet altijd compatibel met alle thema’s.

Stap 5: Geef Je Child-Thema Een Naam

De volgende stap is om je child-thema te benoemen en een beschrijving ervoor te schrijven.

Child Theme Configurator haalt de standaardinformatie uit je parent-thema en toont deze hier. Als je gewoon een child-thema maakt voor persoonlijk gebruik, kun je de gegevens laten zoals ze zijn.

Echter, als je parent-thema de basis zal vormen voor een nieuw thema dat je ontwikkelt, wil je misschien een korte beschrijving en een unieke naam toevoegen.

Stap 6: Kopieer De Instellingen Van Het Parent-thema Naar Het Child-thema

De plugin vraagt je nu om te bevestigen dat het de instellingen van het parent-thema kan kopiëren naar je child-thema:

Deze stap zorgt ervoor dat je child-thema zijn functionaliteit en uiterlijk haalt uit het parent-thema. Let op dat als je werkt met een premium of beperkt thema als het parent, je mogelijk deze stap niet kunt uitvoeren.

Stap 7: Maak Je Nieuwe Child-Thema En Bekijk Het Voorbeeld

De laatste stap is het maken van je child-thema. Klik op de Create New Child Theme knop en wacht tot de plugin zijn werk doet:

Je zou een melding moeten krijgen dat je child-thema succesvol is aangemaakt:

Bekijk altijd je child-thema voor je het activeert op je website. Deze stap helpt je te verifiëren dat alles werkt zoals het hoort. Klik vervolgens op Activeren & Publiceren om te beginnen met je child-thema.

Hoe Je Handmatig Een WordPress Child Thema Maakt

Als je liever geen plugin gebruikt om je child-thema te maken, kun je de handmatige methode gebruiken. Je kunt deze route verkiezen als je al te veel plugins op je website gebruikt.

Daarnaast kun je door handmatig een WordPress child-thema te maken alle wijzigingen aanbrengen die je wilt op een gedetailleerd niveau. Houd er rekening mee dat je een gemiddelde kennis van CSS-code nodig hebt.

Hier is een stap-voor-stap handleiding:

Stap 1: Ontwikkel Een Plan Voor Je Wijzigingen

Eerst vind je een parent-thema dat je leuk vindt en maak je een lijst van de wijzigingen die je wilt aanbrengen. Je kunt de ontwikkelaarstools bekijken en de code van het thema zien om de juiste wijzigingen aan te brengen.

Om de ontwikkelaarstools te bekijken, klik je met de rechtermuisknop ergens op je site terwijl het thema actief is en selecteer Inspect Element. Je ziet dan een pagina met gegevens die er ongeveer zo uitzien:

Hier kun je zoeken naar achtergrondkleuren, lettertype-informatie, marges en meer. Vervolgens kun je een lijst maken van functies die je wilt aanpassen in je child-thema.

Stap 2: Back-up Van Je Site

Het is essentieel om je huidige site een back-up te geven voordat je wijzigingen aanbrengt om te voorkomen dat je jouw instellingen verliest. Je kunt altijd terugkeren naar deze back-up indien nodig. Overweeg ook om een staging website te gebruiken voor het geval je kritieke fouten maakt.

Er zijn een paar verschillende manieren om je site te back-uppen. Je kunt dit handmatig doen met een backup-plugin, wat waarschijnlijk de gemakkelijkste methode is voor de meeste mensen.

Je kunt ook samenwerken met een WordPress-hostingprovider die zorgt voor websiteback-ups. Onze DreamPress beheerde hostingplannen bevatten automatische en op aanvraag back-ups om je gegevens te beschermen.

Stap 3: Maak Een Map Voor Je Child-Thema

Je moet een map aanmaken om je child-thema bestanden in op te slaan. Om dit te bereiken, krijg eerst toegang tot je bestanden via een Secure File Transfer Protocol (SFTP) client zoals Filezilla en navigeer naar de thema’s map:

Hier kun je een nieuwe map voor je child-thema maken. Maak een nieuwe map die de naam van het parent-thema draagt en voeg “-child” toe aan het einde.

Bijvoorbeeld, als de directory van je parent-thema “twentytwentyfour” heet, zal je child-thema directory “twentytwentyfour-child” genoemd worden.

Stap 4: Maak Een Stylesheet Voor Je Child-Thema

Nu moet je een nieuw tekstbestand maken en het “style.css” noemen. Dit bestand vormt de basis van je child-thema. Het heeft wat basis koptekst informatie nodig, inclusief zijn naam, URL, beschrijving, en meer:

Sla nu op en voeg het style.css bestand toe aan de map die je zojuist hebt gemaakt.

Stap 5: De Stylesheets In De Wachtrij Plaatsen

Vervolgens moet je de stylesheets van het parent-thema en child-thema in de wachtrij plaatsen.

De enqueue-functie zorgt ervoor dat je child-thema zijn stijlgegevens van het parent-thema overneemt. Het stelt je ook in staat om het child-thema te bewerken zonder het parent-thema te beïnvloeden.

Maak een nieuw functiesbestand in je child-thema map en noem het “functions.php”. Je kunt vervolgens je child-thema verwijzen naar het basisthema door de volgende code toe te voegen:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

Sla het tekstbestand op en ga naar je WordPress-dashboard om het thema te activeren.

Stap 6: Activeer Het Child-Thema

Eindelijk is het tijd om je child-thema te activeren. Je kunt het handmatig uploaden door naar Appearance > Themes > Upload te gaan. Kies vervolgens een .zip versie van je child-thema map:

Activeer je child-thema. Het zou nu actief moeten zijn!

Hoe Je Child-Thema Aanpassen

Nadat je je nieuwe child-thema hebt geactiveerd, is het tijd om het uit te proberen. Er zijn verschillende manieren waarop je het ontwerp en de functionaliteit kunt aanpassen.

Een principe om te onthouden is dat WordPress automatisch zoekt naar bestanden in de child-directory voordat het de bestanden van het parent-thema scant. Dit betekent dat elk stylesheet of sjabloon dat je aan je child-thema toevoegt, voorrang heeft op hetzelfde bestand in de parent-map.

Het kind-voor-ouder systeem biedt ons veel mogelijkheden.

Aangepaste Stijlen Maken

Voor eenvoudige ontwerpwijzigingen die niet worden gedekt door het Theme Options-paneel, kun je je eigen aangepaste stijlen maken. In de meeste gevallen kun je eenvoudig bestaande stylingregels van het ouderthema herschrijven in een nieuw stylesheet.

De beste manier om de CSS te vinden die je wilt aanpassen, is door gebruik te maken van de Inspector Tools in je browser. Je kunt de CSS en de HTML achter elke webpagina bekijken door er met de rechtermuisknop op te klikken en Inspect Element te selecteren.

Aan de onderkant of de rechterkant van je scherm vind je de code voor de pagina. Beweeg je muis over de code en markeer de HTML in secties:

Als je eroverheen zweeft, worden ook de CSS-regels weergegeven. Je kunt de CSS rechtstreeks bewerken met de ontwikkelaarstools om te zien hoe het eruit ziet.

In dit voorbeeld hebben we de achtergrondkleur veranderd van “#9888fd” naar “#9888fe” om te zien hoe dit eruit zou zien. De achtergrondkleur verandert onmiddellijk, maar is niet permanent.

Je moet nu de CSS-regel kopiëren en toevoegen aan het style.css bestand van je child-thema zoals dit:

body {

Background-color: #9888fe;

}

Sla deze wijzigingen op in het style.css-bestand en ga terug naar je WordPress dashboard om het thema te bekijken. Dit proces kan enkele pogingen vereisen, dus neem de tijd om de stijl te perfectioneren.

Overschrijf Parent Templates

Net zoals we een nieuw stylesheet kunnen aanmaken voor aangepaste CSS, is het mogelijk om parent-templates te overschrijven met nieuwe inhoud. Dit stelt je in staat om grootschalige wijzigingen aan te brengen in de structuur van specifieke onderdelen van je website — zoals de koptekst en het navigatiemenu, de voettekst of de template voor losse berichten.

Laten we ons voorstellen dat je de lay-out van blogposts in je child-thema wilt wijzigen, zodat de titel van elke post boven de uitgelichte afbeelding verschijnt.

Dit gedeelte van je site wordt bestuurd door het content.php sjabloonbestand. Om wijzigingen aan te brengen, download je een kopie van content.php uit de bovenliggende map via SFTP.

Open vervolgens het child-thema in je teksteditor. Je ziet mogelijk zoiets als dit:

twentytwentyfour_post_thumbnail();

<header>
<!-- Titel en andere koptekst informatie hier -->
</header>

Om de indeling van je kop aan te passen, kun je de code wijzigen naar:

<header>
<!-- Titel en andere koptekstinformatie hier -->
</header>

// Post thumbnail
twentytwentyfour_post_thumbnail();

Ten slotte, bewaar het bestand en upload het naar de map van het child-thema. Zorg ervoor dat de originele naam van het bestand behouden blijft, anders herkent WordPress je bewerkte template niet.

Aangepaste Paginasjablonen

Wil je iets totaal anders? Je kunt ook gloednieuwe sjablonen toevoegen aan je child-thema.

Het proces is precies zoals templates ontwikkelen voor een regulier thema, behalve dat je mogelijk ook aangepaste header- en footertemplates moet creëren. Deze bestanden moeten worden verwezen in je nieuwe aangepaste template — en vergeet niet om wat nieuwe CSS toe te voegen via het bestaande child-stylesheet.

Nieuwe PHP-functies Creëren

Als je nieuwe functies wilt introduceren in je child-thema, kun je een child functions.php bestand creëren. Dit werkt samen met het parent functions bestand, in plaats van het te vervangen.

Zo hoef je geen kopie van het originele bestand te maken — schrijf gewoon alle extra scripts die je wilt toevoegen erbovenop. Het bestand met kindfuncties wordt eerst uitgevoerd, gevolgd door de versie van het hoofdthema.

Een functies bestand toevoegen aan je child-thema opent een hele reeks mogelijkheden. Bijvoorbeeld, je zou kunnen:

• Registreer nieuwe widgets en shortcodes.
• Voeg aangepaste berichttypes en taxonomieën toe.
• Maak nieuwe thema-opties.
• Koppel externe stylesheets en JavaScript-bestanden.
• Leg de basis voor het vertalen en lokaliseren van inhoud.
• Overrule bepaalde functies van het parent-thema.

Je kunt meer leren over het maken van deze functies in onze complete gids voor functions.php.

Thema Hooks Gebruiken

De meest efficiënte manier om functies aan je nieuwe functiebestand toe te voegen, is door gebruik te maken van hooks.

Hooks maken deel uit van de kernfunctionaliteit van WordPress. Ze stellen je in staat om verschillende delen van je website aan te passen zonder individuele sjablonen te hoeven bewerken.

In plaats daarvan wijs je jouw code eenvoudig toe aan de relevante haak in het functiebestand. WordPress past dan automatisch deze code toe op overeenkomende elementen in het parent-thema.

In WordPress zijn er twee soorten hooks:

• Action Hooks: Worden gebruikt om aangepaste code “in te haken” op specifieke delen van je WordPress-thema, zoals een nieuw widgetgebied of een aangepast bericht dat na elke blogpost wordt weergegeven.
• Filter Hooks: Worden gebruikt om inhoud die door WordPress of een parent-thema is gegenereerd, te wijzigen voordat het naar een browser wordt gestuurd of in de database wordt opgeslagen. Wat betreft child-thema’s worden ze meestal gebruikt om de lengte van uittreksels aan te passen.

De meeste hooks hebben slechts een kleine codefragment nodig. Bijvoorbeeld, hier is de code die je nodig hebt om wat inhoud aan de voettekst van je site toe te voegen:

function my_custom_footer_content() {
echo '<div>Aangepaste voettekst inhoud hier</div>';
}
add_action('wp_footer', 'my_custom_footer_content');

Zie je dat ‘wp_footer’ stukje? Dat is de haak, en het vertelt WordPress waar deze code moet komen. In dit geval moet jouw aangepaste functie direct na het voettekst sjabloon komen — waar dat ook binnen jouw thema wordt aangeroepen. Netjes, hè?

Veelgestelde Vragen Over WordPress Child-Thema’s

We willen graag denken dat deze gids tot nu toe behoorlijk uitgebreid is geweest. Maar als je nog steeds vragen hebt, hebben wij antwoorden:

Moet Ik Een Parent- Of Een Child-Thema Activeren In WordPress?

Er geldt hier een simpele regel: activeer het thema dat je wilt gebruiken.

Als je terug wilt naar het oorspronkelijke ontwerp als je actieve thema, activeer dan de parent. Maar als je die geweldige aanpassingen wilt inschakelen, zorg er dan voor dat je het child-thema activeert.

Wat zijn de nadelen van het gebruik van een child-thema?

Er zijn niet veel nadelen aan het gebruik van een child-thema. Het is iets technischer dan het aanpassen van je site via het Dashboard. Om grotere veranderingen aan te brengen, heb je ten minste enige basiskennis van HTML, CSS en PHP nodig.

Het is ook de moeite waard om te vermelden dat een slecht geoptimaliseerd child-thema je site kan vertragen, en je zult altijd afhankelijk zijn van het parent-thema.

Kan een child-thema bestaan zonder een parent-thema?

Nee, een child-thema werkt niet zonder een parent-thema.

Het concept van een child-thema is inherent afhankelijk van een parent-thema. Onthoud dat de parent alles levert behalve de aangepaste stijlen en sjablonen die je toevoegt. Bovendien zou de hele mapstructuur van je site in de war raken als je de parent-map verwijdert.

Als je jouw child-design wilt scheiden, overweeg dan om het om te zetten naar een zelfstandig thema.

Kun je meerdere child-thema’s hebben voor één parent-thema?

Ja, dat kan. Dit betekent dat je meerdere versies van dezelfde site kunt maken om aan te passen aan verschillende doelgroepen. Je zou zelfs op deze manier A/B-testing kunnen uitvoeren.

Wat zijn de beste plugins voor het maken van WordPress child-thema’s?

Naast Child Theme Configurator, waarmee we eerder hebben gewerkt, bekijk WP Child Theme Generator en Child Theme Wizard.

WordPress.org heeft ook zijn eigen experimentele child-thema plugin, genaamd Create Block Theme.

Wat is het verschil tussen een child-thema en een aangepast thema?

Afhankelijkheid is waarschijnlijk het grootste verschil. Een child-thema steunt op de kernbestanden van een parent-thema, terwijl een aangepast thema zelfstandig is.

Die onafhankelijkheid betekent dat thema-ontwikkelaars nieuwe kernfuncties en meer aanpassingsmogelijkheden kunnen introduceren. Aan de andere kant moet je vertrouwd zijn met code om een aangepast thema te creëren en te onderhouden.

Het kost ook veel meer ontwikkeltijd om een compleet thema vanaf nul te bouwen.

Bescherm Je Thema-aanpassingen En Updates

Het gebruik van een child-thema helpt je om de complicaties van het direct bewerken van een parent-thema te vermijden. Een child-thema is gemakkelijk aan te passen, waardoor je ingrijpende ontwerpwijzigingen aan een bestaande website kunt maken. Bovendien wordt het niet beïnvloed door automatische thema-updates.

Hier is een snelle samenvatting van hoe je handmatig een child-thema maakt:

• Maak een plan.
• Maak een back-up van je huidige site.
• Maak met een SFTP-client een map voor je child-thema.
• Maak een stijlblad en upload dit naar je site.
• Plaats de stijlbladen van het child- en parent-thema in de wachtrij.
• Activeer en bekijk je child-thema.
• Maak wijzigingen met behulp van CSS.

Een mooie theme hebben is slechts een deel van het succesvol runnen van een website. Je hebt ook een hostingprovider nodig die bij jouw behoeften past. Bekijk DreamHost’s Shared Hosting pakketten voor betaalbare plannen die websiteprestaties prioriteren, met een uptime-garantie van 100%!