Een WordPress childthema bouwen houdt weinig in, toch is het niet voor iedereen duidelijk wat het nut is of hoe het werkt. In deze blogpost leer je hoe je er één bouwt, wat de voordelen zijn en tevens leg ik je ook uit of je er echt wel één nodig hebt.
Waarom een childthema?
Childthema’s in één zin: ‘Een childthema erft de functionaliteit en de opmaak van het hoofdthema (parent)’. Wil je dus de werking van het thema lichtjes wijzigen qua functionaliteit, dan heb je een childthema nodig.
Het grootste voordeel is het behouden van je aanpassingen wanneer er een update van het thema geïnstalleerd wordt. Vaak gaan site eigenaars direct aan de slag in het hoofdthema, voeren ze zonder nadenken een update uit en zijn ze de aanpassingen bij gevolg kwijt.
TIP: Heb je enkel uiterlijke wijzigingen nodig via CSS code? Ga dan naar weergave → Customizer en stop je CSS code in het ‘Extra CSS’ veld. Op die manier heb je geen childthema nodig.
Hoe maak je een childthema?
Toch een childthema nodig? Een childthema heeft maar 2 vereiste bestanden nodig. Namelijk een style.css en een functions.php. Hieronder een voorbeeld van een style.css bestand:
/*
Theme Name: Sitefly
Theme URI: https://sitefly.be
Description: Childthema voor sitefly.be
Author: Jeroen Rotty
Author URI: https://sitefly.be
Template: twentytwenty
Version: 1.0
*/
.hero-posts .post:hover {
cursor: default;
}Het stukje commentaar bovenaan is de vereiste header. Zonder dit stuk zal WordPress het niet zien als een thema en werkt het niet. Hier schrijf je alle details van je thema. De belangrijkste regel is ‘Template: slug’. Hier verwijs je naar het hoofdthema en moet de juiste benaming worden ingevuld.
Als tweede bestand hebben we functions.php om op de correcte manier de CSS stijlen te laden (enqueuen). Gebruik dus niet meer de oude methode @import. Ook extra hooks, filters of actions komen hier in te staan.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}Met deze twee bestanden heb je al een werkend childthema. Plaats deze bestanden in een aparte map onder /wp-content/themes. Daarna kan je via Weergave > Thema’s het childthema zien en activeren.
En nu?
We hebben nu een werkend childthema, maar hebben de eigenlijke werking van het hoofdthema nog niet gewijzigd. De aanpassingen die je dus nodig hebt in de functionaliteit van je thema, moeten nu worden voorzien in de map van het childthema.
Je kopieert dus het bestand waar wijzigingen in moeten komen op de identieke plek in de map. Stel dat je bijv. een template bestand wil wijzigen die in templates\page-full-width.php zit, moet er ook een templates map worden aangemaakt binnen de map van het childthema.
Een nog betere werkwijze dan bestanden kopiëren vanuit het hoofdthema en aanpassen in het childthema, is werken met actions, filters en hooks. Die code plaats je dan rechtstreeks in je functions.php bestand.
Op die manier kan je nooit met oude en mogelijks niet langer werkende code in de bestanden opgescheept zitten die niet langer in een nieuwere versie aanwezig zijn.
Mogelijke problemen
Bij grotere updates van thema’s kan het gebeuren dat de code drastisch wordt herschreven, zodanig dat een bestand in het childthema niet meer functioneert. Controleer dan ook altijd je website na een thema update. Denk niet dat er nooit iets kan mislopen omdat je een childthema in gebruik hebt!
Heb je nog specifieke vragen omtrent childthema’s? Laat dan zeker een reactie achter.
Geef een reactie