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.