Een kindthema maken in WordPress: een eenvoudige handleiding 

Als eigenaar van een WordPress-website is het heel natuurlijk dat je wilt experimenteren met het ontwerp en de functionaliteit van WordPress-thema's. Maar hoe doe je dat het beste zonder het originele thema aan te passen? Een child theme in WordPress is een uitstekende manier om je thema te wijzigen en te testen zonder het risico te lopen je originele thema te verstoren.

Het gebruik van een WordPress-childthema is een slimme manier om de code van je thema veilig aan te passen zonder je werk in gevaar te brengen. Als je van plan bent om wijzigingen aan te brengen in de CSS, HTMLof PHP, is een childthema de beste optie. Waarom? Omdat zonder childthema elke update van je hoofdthema je wijzigingen ongedaan kan maken.

Om het je gemakkelijk te maken, hebben we een beginnersvriendelijke handleiding samengesteld die uitlegt hoe een child theme werkt, hoe je het instelt en hoe je de gewenste wijzigingen aanbrengt. Ga vol vertrouwen aan de slag en pas je thema aan!

Inzicht in child-thema's in WordPress

Een child themeis, zoals de naam al suggereert, een soort 'add-on' voor je hoofdthema ,waarbij de functies en stijlen ervan worden overgenomen. Wanneer je je WordPress-thema wilt aanpassen, kan het riskant zijn om direct in de themabestanden te duiken, omdat elke wijziging het kernthema kan veranderen. Daar komen child themes van pas: ze bieden een veiligere manier om aanpassingen te maken zonder de originele bestanden aan te raken.

Een child theme erft automatisch de hoofdstijl van het style.css-bestand van het parent theme, dat de algehele look and feel van het thema bepaalt. Met een child theme kun je deze stijl eenvoudig aanpassen of uitbreiden door je eigen bestanden toe te voegen of de bestaande bestanden te wijzigen. Dit geeft je de flexibiliteit om het thema aan te passen zonder de originele bestanden te hoeven wijzigen.

Kindthema's worden opgeslagen in een eigen map, los van het hoofdthema, en zijn voor hun functionaliteit afhankelijk van het hoofdthema, tenzij je besluit om iets te wijzigen. Wanneer je een kindthema activeert in WordPress, wordt het gekoppeld aan het hoofdthema en controleert WordPress eerst de bestanden van het kindthema. Als een bestand niet is gewijzigd, gebruikt WordPress simpelweg de versie van het hoofdthema.

Houd er wel rekening mee dat een child theme niet zelfstandig kan werken. Het heeft het parent theme nodig dat ernaast geïnstalleerd is om goed te functioneren.

Lees meer over: WordPress-plugin- en thema-ontwikkeling uitbesteden

Voordelen van het gebruik van een child theme in WordPress

Het maken van een child theme is een slimme manier om wijzigingen aan je WordPress- site aan te brengen zonder het risico te lopen al je harde werk kwijt te raken. Als je de bestanden van het parent theme rechtstreeks zou bewerken, zouden al je aanpassingen bij elke update verloren gaan. Dit kan je voor een frustrerende keuze stellen: ofwel alle toekomstige updates overslaan, wat kan leiden tot compatibiliteits- en beveiligingsproblemen, ofwel updaten en de tijd en moeite die je in het aanpassen van je WordPress theme.

Met een child theme hoeft u die keuze echter niet te maken. Al uw aanpassingen worden veilig opgeslagen in een aparte map, waardoor uw wijzigingen behouden blijven, zelfs als het parent theme wordt bijgewerkt. Bovendien maakt deze opzet het gemakkelijk om uw aanpassingen van de ene site naar de andere te verplaatsen, wat u tijd bespaart als u aan meerdere sites werkt of naar een nieuwe site migreert.

Een ander groot voordeel van het gebruik van een child theme is dat het een uitstekende manier is om in een veilige omgeving meer te leren over het ontwikkelen van aangepaste thema's . Je kunt experimenteren met wijzigingen en nieuwe functies, en als iets niet volgens plan verloopt, kun je het child theme eenvoudig uitschakelen. Je website keert dan direct terug naar het oorspronkelijke uiterlijk en de functionaliteit van het parent theme, dus er is geen schade aangericht.

Leer hoe je headers in WordPress eenvoudig kunt bewerken en aanpassen.

Wat je moet doen voordat je een child theme in WordPress maakt

We zien vaak dat WordPress-gebruikers enthousiast aan de slag gaan met het aanpassen van hun sites, maar vervolgens tegen onverwachte fouten aanlopen. Dat is volkomen begrijpelijk; het lijkt misschien spannend om met een child theme aan de slag te gaan, totdat de technische problemen zich voordoen.

Daarom is het essentieel om je een beetje voor te bereiden voordat je begint, net zoals je je zou voorbereiden op een examen. Hier zijn een paar tips die je kunt gebruiken voordat je begint met het maken van je child theme:

Begrijp de basisprincipes van programmeren

Werken met een child theme betekent dat je met code te maken krijgt. Een basiskennis van HTML, CSS en PHP is in ieder geval handig (en eventueel JavaScript als je het wat geavanceerder wilt aanpakken). Als je nog niet zo bekend bent met programmeren, is de WordPress themahandleiding een goede plek om snel wat informatie te vinden.

Leer hoe je Figma naar code converteert: React, HTML, Vue, JS, CSS

Kies het juiste ouderthema

Kies een basisthema dat qua uiterlijk en functionaliteit al dicht in de buurt komt van wat je wilt. Idealiter vind je er een die slechts een paar kleine aanpassingen nodig heeft, waardoor het aanpassen van je thema soepeler verloopt. Als je volledig van thema wisselt, bekijk dan onze checklist met dingen die je moet doen voordat je van WordPress-thema verandert; dat bespaart je een hoop kopzorgen!

Gebruik een lokale of testomgeving voor het testen

Het is het beste om eerst te experimenteren op een lokale site of een testomgeving in plaats van direct naar je live website te gaan. Op die manier heb je, als je een fout maakt, geen invloed op het uiterlijk of de functionaliteit van je live website.

Maak een back-up van uw website

Voordat je wijzigingen aanbrengt, maak een back-up van je website. Als je dit voor de eerste keer doet, kan een plugin zoals Duplicator het back-upproces vereenvoudigen en stressvrij maken. Zo kun je je site snel herstellen als er iets misgaat.

Als je deze basisprincipes onder de knie hebt, kun je vol vertrouwen onze stapsgewijze handleiding volgen om het thema voor je kind te creëren!

Leer: De beste oplossingen voor het maken van back-ups van meerdere WordPress-websites

Handmatig een child theme maken in WordPress: 5 eenvoudige stappen

Het maken van een child theme in WordPress is eenvoudiger dan het lijkt, en het is een geweldige manier om te begrijpen hoe child themes werken zonder je hoofdthema in gevaar te brengen.

Laten we eens bekijken hoe je een child theme maakt op basis van het standaard Twenty Fifteen-thema van WordPress en een paar aanpassingen doen om het proces in actie te zien.

Stap 1: Maak een map voor een subthema aan

Begin met het aanmaken van een nieuwe map op je computer waar alle bestanden voor je child theme komen te staan. Deze map upload je later naar je website.

Je kunt de map de naam van je hoofdthema geven met "-child" erachter. Als je hoofdthema bijvoorbeeld "Twenty Twenty-Two" heet, zou de map van je subthema "twentytwentytwo-child" heten. Zo is het makkelijk te herkennen dat het een subthema van het hoofdthema is.

Stap 2: Een stylesheet instellen voor je child theme

Maak vervolgens een style.css-bestand aan in de map van je nieuwe child-thema. Dit bestand bevat alle aangepaste stijlen voor je child-thema.

Om de stylesheet correct in te stellen, voegt u de volgende header-commentaren helemaal bovenaan uw style.css-bestand toe. Dit vertelt WordPress dat uw nieuwe thema een subthema is van het hoofdthema:

Themanaam: Twenty Twenty-Two Child Theme URI: https://wordpress.org/themes/twentytwentytwo/ Auteur: WordPress Team Auteur URI: https://wordpress.org/ Sjabloon: twentytwentytwo Beschrijving: Child Theme voor Twenty Twenty-Two Versie: 1.0 */

Nadat je het hebt opgeslagen, ga je naar je WordPress-dashboard en vervolgens naar Weergave → Thema's. Je zou je child theme nu in de lijst moeten zien staan.

Stap 3: Koppel de stylesheets van het ouder- en kindthema

Om ervoor te zorgen dat de stijlen van je hoofdthema worden toegepast, moeten we het stylesheet ervan koppelen aan het child-thema. Dit doe je door een functions.php-bestand aan te maken in de map van je child-thema en de volgende code toe te voegen:

<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}

Deze code laadt het stylesheet van het hoofdthema, zodat uw subthema alle styling ervan overneemt.

Leer hoe je een WordPress-database kunt repareren en herstellen.

Stap 4: Bewerk het stylesheet (style.css) van het child theme

Je kunt nu direct je eigen stijlen toevoegen in het style.css-bestand van het child-thema. Om bijvoorbeeld de kleur van links op je site te wijzigen, kun je het volgende toevoegen:

een {kleur: #D54E21;tekstdecoratie: geen;}

Deze regel overschrijft de linkstijl van het hoofdthema zonder de rest van het ontwerp te beïnvloeden.

Weet je het goed: moet je je website bouwen met code, zonder code of met een websitebouwer?

Stap 5: Een sjabloonbestand wijzigen

Met een child theme kun je ook individuele templates aanpassen. Stel dat je de weergave van berichten wilt wijzigen door het bestand single.php te bewerken.

• Kopieer het bestand single.php uit het hoofdthema en plak het in de map van je subthema.
• Open het bestand in een teksteditor en breng de gewenste wijzigingen aan.

Als je bijvoorbeeld het reactiegedeelte van pagina's met individuele berichten wilt verwijderen, zoek dan dit gedeelte van de code op:

if ( comments_open() || get_comments_number() ) :comments_template();endif;

Verwijder het of zet het in commentaar om de reacties te verbergen. WordPress gebruikt het aangepaste single.php-bestand uit de map van het child-thema, dus eventuele updates van het parent-thema zullen je aanpassingen niet overschrijven.

Leer hoe je een aangepaste paginasjabloon maakt in WordPress.

Hoe maak je een child theme met een plugin (zonder te hoeven programmeren)?

Als je niet zo van programmeren houdt, maar toch een child theme wilt maken, dan heb je geluk! Hoewel er verschillende plugins zijn die je kunt gebruiken om een ​​child theme in WordPress te maken, gaan we de Child Theme Configurator plugin gebruiken om het proces uit te leggen.

Met deze plugin is het supergemakkelijk om een ​​child theme in te stellen en aan te passen voor klassieke (niet-blok) WordPress-thema's. Hier is een eenvoudige, stapsgewijze handleiding om je op weg te helpen.

Stap 1: Installeer en activeer de plugin

Ga eerst naar je WordPress-dashboard, zoek in het gedeelte Plugins naar "Child Theme Configurator" en installeer de plugin. Zodra deze is geactiveerd, ga je naar Tools → Child Themes.

Stap 2: Het child-thema instellen

Ga in de Child Theme Configurator naar het Parent/Child . Je ziet een optie om een ​​actie te kiezen; selecteer 'Een nieuw child theme maken' om te beginnen.

Stap 3: Kies je hoofdthema

Selecteer vervolgens het hoofdthema waarop u wilt voortbouwen in het keuzemenu. Laten we voor dit voorbeeld het Hestia-thema gebruiken. Nadat u uw thema hebt gekozen, klikt u op de knop 'Analyseren' om te controleren of het thema geschikt is voor het maken van een child theme.

Stap 4: Geef de map voor uw subthema een naam

Vervolgens wordt u gevraagd een naam te kiezen voor de map waarin het child theme wordt opgeslagen. U kunt hier creatief mee zijn of het simpel houden met een naam zoals "Hestia-child" om alles overzichtelijk te houden.

Stap 5: Bepaal waar u de aangepaste stijlen wilt opslaan

Hier is een belangrijke keuze: je kunt nieuwe aangepaste stijlen opslaan in het primaire stylesheet (style.css) van je child theme, of in een apart stylesheet-bestand.

• Primair stijlbestand: Dit is het hoofdbestand waarin stijlen standaard worden opgeslagen. Wijzigingen hierin overschrijven de oorspronkelijke themastijlen.

• Aparte stijlpagina: Met deze optie worden uw aangepaste stijlen in een nieuw bestand opgeslagen, zodat de stijlen van het originele thema ongewijzigd blijven.

Voorlopig gebruiken we het primaire stylesheet, maar je kunt gerust de aparte optie proberen als je de look van het hoofdthema volledig wilt behouden.

Meer weten? De beste softwaretools voor webdesign waarmee je prachtige en gebruiksvriendelijke websites kunt maken.

Stap 6: Stel de afhandeling van het stylesheet van het bovenliggende thema in

Scroll naar beneden en kies hoe je het stylesheet van het hoofdthema wilt laden. We houden het bij de standaardoptie "Gebruik de WordPress-stijlwachtrij", omdat de plugin dit dan automatisch afhandelt.

Stap 7: Details van het child-thema aanpassen

Wanneer je bij stap 7 bent, klik je op 'Klik om de kenmerken van het child-thema te bewerken'. Hier kun je details toevoegen zoals de naam, beschrijving en versie van het child-thema.

Stap 8: Menu's en widgets kopiëren

Normaal gesproken worden je menu's en widgets gereset wanneer je een child theme aanmaakt. Om dit te voorkomen, vink je in stap 8 het vakje aan om ze van het parent theme naar het child theme te kopiëren.

Maak je eigen kinderthema

Klik ten slotte op 'Nieuw child-thema maken'. De plugin maakt automatisch een map aan voor uw child-thema, inclusief de style.css- en functions.php-bestanden die nodig zijn voor toekomstige aanpassingen.

Voorbeeldweergave en activeren

Voordat je het thema activeert, klik je op de preview-link bovenaan het scherm om te controleren of alles er goed uitziet. Als de preview van je child theme er goed uitziet en er geen elementen beschadigd zijn, klik je op 'Activeren en publiceren' om het live te zetten!

En voilà! Je child theme is nu actief. Vanaf nu ziet en functioneert het precies hetzelfde als je parent theme. Je kunt nu veilig aanpassingen toevoegen aan het child theme zonder het originele thema te beïnvloeden. Veel plezier met aanpassen!

Ontdek de beste WordPress-studiothema's voor creatieve bedrijven.

Wat te doen als je WordPress-childthema niet werkt?

Worden je wijzigingen niet weergegeven in je child theme? Geen zorgen, hier zijn een aantal veelvoorkomende problemen en oplossingen om het weer naar behoren te laten werken.

Controleer je functions.php-bestand nogmaals

Begin met ervoor te zorgen dat je het stylesheet van het child-thema hebt toegevoegd aan je functions.php-bestand. Als dit niet is gebeurd, zal het child-thema niet correct laden en blijft je website het parent-thema weergeven, waardoor het lijkt alsof je wijzigingen niet zichtbaar zijn.

Interessant leesvoer: Laravel versus WordPress: de grootste rivalen van PHP nemen het tegen elkaar op.

Controleer of uw stylesheet de naam style.css heeft

Controleer goed of je je stylesheet de naam style.css hebt gegeven en niet stylesheet.css of iets anders. WordPress verwacht dat de hoofdstylesheet van het child-thema style.css heet. Als de naam anders is, herkent je functions.php-bestand het niet en worden je aangepaste stijlen niet toegepast.

Controleer de sjabloonnaam in style.css

In je style.css-bestand moet het veld Template exact overeenkomen met de naam van de map van je parent-thema. Dit vertelt WordPress welk thema als parent-thema moet worden gebruikt. Als de naam onjuist is, weet WordPress niet op welk thema het child-thema gebaseerd moet zijn.

Wis je cache

Soms kan de cache ervoor zorgen dat je updates niet ziet. Probeer je cache te wissen, vooral als je een caching-plugin gebruikt. Het is ook handig om je browsercache te wissen of je site in een incognito-venster te openen om te zien of je wijzigingen worden weergegeven. Als je actief aan het child-thema werkt, overweeg dan om alle caching-plugins uit te schakelen totdat je klaar bent.

Gebruik !important in je CSS-code

Als je merkt dat de stijlen van het hoofdthema nog steeds je aangepaste CSS overschrijven, probeer dan !important toe te voegen aan de stijlen die je prioriteit wilt geven. Hierdoor krijgen de stijlen van je subthema voorrang boven die van het hoofdthema. Bijvoorbeeld:

p {achtergrondkleur: grijs !belangrijk;}

Deze truc kan handig zijn voor specifieke elementen, ID's en CSS-klassen om ervoor te zorgen dat je wijzigingen worden toegepast.

Neem contact op met de themaondersteuning of raadpleeg de forums

Als je al deze stappen hebt geprobeerd en je child theme nog steeds niet werkt, kun je contact opnemen met de supportafdeling van het thema of het themaforum op WordPress.org. Soms hebben thema's unieke configuraties of aangepaste code die van invloed kunnen zijn op de werking van child themes, en de ontwikkelaar heeft mogelijk specifiek advies.

Conclusie

En dat was het dan! Inmiddels heb je een goed begrip van wat een WordPress-childthema is en hoe het samenwerkt met een parentthema. Het installeren van een thema is slechts het begin bij het bouwen van een WordPress-website.

Hoewel de ingebouwde Gutenberg-editor of de themabuilder je kunnen helpen bij het aanpassen van het ontwerp, biedt het maken van een child theme nog veel meer mogelijkheden. Met een child theme kun je niet alleen het ontwerp aanpassen, maar ook de functionaliteit personaliseren zonder de kernbestanden aan te raken. Dit geeft je volledige vrijheid om je website echt uniek te maken.

Veelgestelde vragen over het maken van een child theme in WordPress