Blokthema’s en theme.json geven je veel flexibiliteit, waardoor het lijkt alsof child-thema’s overbodig zijn. Maar in veel gevallen zijn ze nog steeds essentieel.
Het gebruik van een child-thema is nog steeds de juiste zet als je echte controle wilt over het ontwerp van je site zonder de kernbestanden van het hoofdthema aan te raken.
In dit artikel gebruiken we het thema Twenty Twenty-Five als basis en helpen we je bij het maken van een child-thema met blokken, met een eigen style.css en functions.php. Je leert hoe je veilig stijlen kunt overschrijven, custom blokstijlen kunt definiëren en zelfs je eigen stijlvariaties kunt instellen. Het is niet alleen een stylingtruc – het is een stap in de richting van het bouwen van je eigen volledige blokthema.
Hoewel deze oefening eenvoudig lijkt, verkennen we een aantal valstrikken waar je mogelijk in zou kunnen trappen. Laten we dus snel beginnen met het maken van een custom child-thema en vervolgens een custom stijlvariatie implementeren.
Een blok child-thema registreren
Het registreren van een blok child-thema is veel eenvoudiger dan het registreren van een klassiek thema.
Technisch gezien hoef je het helemaal niet te registreren. De registratie gebeurt automatisch wanneer een map met de juiste naam van een child-thema zowel een theme.json bestand als een style.css bestand bevat.
Waarom is het bestand style.css dan nog nodig?
Net als voorheen bevat het een verplichte header (zie hieronder) die metadata bevat die WordPress gebruikt om het thema te identificeren, inclusief de naam en het hoofdthema dat het uitbreidt. Hoewel stijlen en instellingen nu worden behandeld in theme.json, speelt style.css nog steeds een cruciale rol om WordPress je thema te laten herkennen, zelfs als het geen eigenlijke CSS bevat.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Een functions.php bestand is niet nodig, tenzij je scripts wilt enqueuen of PHP-gebaseerde functionaliteit wilt toevoegen. Dat doen we later.
Als je niet bekend bent met theme.json of een snelle opfrisser wilt, bekijk dan onze gids over Werken met properties en key-value paren in theme.json.
Drie basiswijzigingen aanbrengen in ons child-thema.
Laten we beginnen met het bijwerken van de globale achtergrond- en tekstkleuren, samen met het stylen van het Button blok.
In het bestand theme.json van het child-thema (dat dient als de standaardstijl) definiëren we het volgende:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Terwijl de achtergrond- en tekstkleuren van toepassing zijn op alle stijlvariaties, is de styling van het Button blok alleen van toepassing op de standaardvariatie.
Stijlvariaties opheffen
Om dezelfde knopstijl toe te passen op verschillende variaties, kun je het beste een .json bestand maken dat overeenkomt met de naamgevingsconventie voor variaties van het hoofdthema.
Om bijvoorbeeld de rand van de knop in de Evening stijlvariatie te overschrijven, maak je een bestand met de naam 01-evening.json in de hoofdmap van je child-thema (of in een submap /styles):
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}Hier hebben we een bredere, gestippelde rand gebruikt om de knop te laten opvallen. Omdat dit meer specifieke stijlen zijn, overschrijven ze de algemene stijlen van theme.json.
Een custom stijlvariatie maken
Laten we nog een stapje verder gaan door een geheel nieuwe stijlvariatie te maken met de naam Kinsta. Deze variatie erft de globale instellingen van het theme.json bestand van het child-thema en past zijn eigen custom kleurenpalet en knopstyling toe:
Sla het volgende op als /styles/kinsta.json:
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Deze “Kinsta” variatie geeft ons een aparte look, volledig gebouwd binnen de structuur van het child-thema.
Hoe en waarom style.css enqueueen
In een echt blokthema zoals Twenty Twenty-Five is het niet nodig om stylesheets handmatig te enqueuen met PHP voor zowel het parent- als het child-thema. WordPress core genereert dynamisch CSS op basis van het theme.json bestand.
Als je echter custom stijlen wilt schrijven in een style.css bestand, dan moet je ze handmatig enqueuen.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Deze code zorgt ervoor dat zowel de parent als de child style.css bestanden worden geladen op de front-end.
Probeer de volgende CSS toe te voegen aan het bestand style.css van je child-thema om te controleren of je stijlen correct worden opgevraagd:
body {
color: #ffff00;
background: #0000ff;
}Dit geeft alle stijlvariaties een blauwe achtergrond en gele tekstkleur – alleen op de front-end.
Even over styles.css
Je vraagt je misschien af: Waarom zou je überhaupt CSS gebruiken? Is het niet theme.json niet alles?
Niet helemaal.
theme.json ondersteunt bijvoorbeeld geen pseudoklassen zoals :hover. Om een hover-effect op alle knoppen te stijlen, kun je deze CSS gebruiken:
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Dit geldt voor alle knopblokken in alle variaties op de voorkant.
Stel dat je dit hover-effect wilt beperken tot een specifieke variatie of blok. In dat geval moet je geavanceerdere methoden gebruiken, zoals voorwaardelijke body classes, blokfilters of gerichte blokspecifieke CSS.
Een blokstijlvariatie toevoegen
Laten we nu eens kijken hoe we een nieuwe stijlvariatie kunnen toevoegen aan het Button blok met behulp van PHP en CSS.
Als je denkt aan het toevoegen van een variations array aan theme.json, dan werkt dat niet voor dit gebruik. Terwijl theme.json de globale en blokstijlen afhandelt, moeten blokstijlvariaties – zoals alternatieve knopstijlen – op een andere manier worden geregistreerd.
We maken een nieuwe stijlvariant met de naam Alternative Outline, die naast de standaard stijlen Fill en Outline verschijnt in de editor UI en correct wordt weergegeven op de front-end.
De stijl registreren in PHP
Voeg de volgende code toe aan het bestand functions.php van je child-thema. Hiermee wordt de stijl geregistreerd nadat core is geladen, maar voordat een pagina wordt gerenderd:
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Custom stijlen toevoegen aan style.css
Definieer nu de stijlen voor deze variatie – inclusief een :hover status – in het bestand style.css van je child-thema:
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}De color variabelen die hier worden gebruikt, zijn gedefinieerd in je theme.json palet, zodat ze consistent zijn voor de hele site.
Variaties in blokstijlen maken met JSON
Vanaf WordPress 6.6 kun je stijlvariaties van coreblokken volledig registreren met JSON – geen PHP nodig.
Hier is een voorbeeld dat een nieuwe variatie met de naam Purple Background toevoegt aan het blok Group. Het verschijnt in de zijbalk van de editor met een gestileerde preview:
Maak een bestand met de naam block.json in de map /styles/purple-background/ van je thema:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}De variatie Purple background verschijnt in de zijbalk van de editor zoals in de afbeelding hieronder:
Als je met meerdere stijlvariaties werkt, is het een goed gebruik om ze in een submap /styles te plaatsen. In dit geval is het bestandspad: /styles/purple-background/block.json.
Hier zijn nog wat laatste opmerkingen over de JSON methode:
- Deze aanpak vereist geen PHP en kan het gewicht van de pagina verminderen omdat WordPress alleen de relevante CSS laadt wanneer dat nodig is.
- Omdat we werken met een child-thema van Twenty Twenty-Five – dat al gebruik maakt van
theme.jsonen dynamische styling – is het niet nodig om handmatig stijlen te enqueuen. - Sommige blokken ondersteunen mogelijk nog niet alle stylingopties via JSON. Als je achterwaartse compatibiliteit belangrijk vindt, kun je optioneel een PHP fallback toevoegen met
register_block_style().
Samenvatting
Blokthema’s bieden een opmerkelijke flexibiliteit en openen de deur naar talloze ontwikkelingsmogelijkheden. In dit artikel wilden we je kennis laten maken met de wereld van child-thema’s voor blokthema’s – en hopelijk inspireren om je eigen ideeën tot leven te brengen.
We hebben ook twee benaderingen onderzocht voor het toevoegen van custom coreblokstijlvariaties – een met PHP en CSS en een andere met alleen JSON.
Zoals je je misschien kunt voorstellen, kan elk voorbeeld dat we hebben behandeld meerdere wegen bewandelen. WordPress is rijk aan opties en biedt vaak meerdere manieren om hetzelfde probleem op te lossen.
Je zou bijvoorbeeld een blokthema kunnen maken dat theme.json gebruikt voor instellingen, maar volledig vertrouwt op style.css voor styling, waarbij je gebruik maakt van de bredere mogelijkheden van CSS. Of je kunt stijlen voorwaardelijk enqueuen, zodat ze alleen worden geladen als een specifieke variatie in gebruik is.
De mogelijkheden zijn eindeloos!
Bij Kinsta bieden we een volledig pakket ontwikkeltools, zowel basis als geavanceerd, om je WordPress workflow te versnellen, op te schonen en te verbeteren. Probeer Kinsta 30 dagen gratis uit.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
