{"id":62919,"date":"2025-07-17T16:18:29","date_gmt":"2025-07-17T14:18:29","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=62919&preview=true&preview_id=62919"},"modified":"2025-07-22T14:30:18","modified_gmt":"2025-07-22T12:30:18","slug":"blok-aanpassen-met-child-thema","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/blok-aanpassen-met-child-thema\/","title":{"rendered":"Custom styling voor WordPress blokthema’s met een child-thema"},"content":{"rendered":"

Blokthema’s<\/a> en theme.json<\/a><\/code> geven je veel flexibiliteit, waardoor het lijkt alsof child-thema’s<\/a>\u00a0overbodig zijn. Maar in veel gevallen zijn ze nog steeds essentieel.<\/p>\n

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.<\/p>\n

In dit artikel gebruiken we het thema Twenty Twenty-Five<\/a> als basis en helpen we je bij het maken van een child-thema met blokken, met een eigen style.css<\/code> en functions.php<\/a><\/code>. Je leert hoe je veilig stijlen kunt overschrijven, custom blokstijlen kunt defini\u00ebren 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.<\/p>\n

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.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Een blok child-thema registreren<\/h2>\n

Het registreren van een blok child-thema is veel eenvoudiger dan het registreren van een klassiek thema<\/a>.<\/p>\n

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<\/code> bestand als een style.css<\/code> bestand bevat.<\/p>\n

Waarom is het bestand style.css<\/code> dan nog nodig?<\/p>\n

Net als voorheen bevat het een verplichte header (zie hieronder) die metadata<\/a> 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<\/code>, speelt style.css<\/code> nog steeds een cruciale rol om WordPress je thema te laten herkennen, zelfs als het geen eigenlijke CSS bevat.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Een functions.php<\/code> bestand is niet nodig, tenzij je scripts wilt enqueuen<\/a> of PHP-gebaseerde functionaliteit wilt toevoegen. Dat doen we later.<\/p>\n
Als je niet bekend bent met theme.json<\/code> of een snelle opfrisser wilt, bekijk dan onze gids over Werken met properties en key-value paren in theme.json<\/a>.<\/p>\n
Drie basiswijzigingen aanbrengen in ons child-thema.<\/h2>\n
Laten we beginnen met het bijwerken van de globale achtergrond- en tekstkleuren, samen met het stylen van het Button blok.<\/p>\n
In het bestand theme.json<\/code> van het child-thema (dat dient als de standaardstijl) defini\u00ebren we het volgende:<\/p>\n
{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Black\",\n          \"slug\": \"black\",\n          \"color\": \"#000000\"\n        },\n        {\n          \"name\": \"Yellow\",\n          \"slug\": \"yellow\",\n          \"color\": \"#FFFF00\"\n        },\n        {\n          \"name\": \"Purple\",\n          \"slug\": \"purple\",\n          \"color\": \"#800080\"\n        },\n        {\n          \"name\": \"White\",\n          \"slug\": \"white\",\n          \"color\": \"#FFFFFF\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"var(--wp--preset--color--black)\",\n      \"text\": \"var(--wp--preset--color--yellow)\"\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--purple)\",\n          \"text\": \"var(--wp--preset--color--white)\"\n        },\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--yellow)\",\n          \"width\": \"2px\",\n          \"style\": \"solid\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Terwijl de achtergrond- en tekstkleuren van toepassing zijn op alle stijlvariaties, is de styling van het Button blok alleen van toepassing op de standaardvariatie<\/strong>.<\/p>\n
\"Child-thema
Child-thema met de standaard stijlvariatie in de Site Editor.<\/figcaption><\/figure>\n
Stijlvariaties opheffen<\/h3>\n
Om dezelfde knopstijl toe te passen op verschillende variaties, kun je het beste een .json<\/code> bestand maken dat overeenkomt met de naamgevingsconventie voor variaties van het hoofdthema.<\/p>\n
Om bijvoorbeeld de rand van de knop in de Evening<\/em> stijlvariatie te overschrijven, maak je een bestand met de naam 01-evening.json<\/code> in de hoofdmap van je child-thema (of in een submap \/styles<\/code>):<\/p>\n
{\n  \"version\": 3,\n  \"title\": \"Evening\",\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--white)\",\n          \"width\": \"3px\",\n          \"style\": \"dashed\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
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<\/code>.<\/p>\n