Child theme i WordPress – när du behöver det och hur du gör

Kort svar: Ett barntema (child theme) är ett litet tema som ärver allt från ett annat tema, huvudtemat (parent theme), och bara innehåller dina ändringar. När huvudtemat uppdateras ligger dina ändringar kvar.

Du behöver ett barntema om du ändrar i temats filer: CSS, functions.php, mallar eller theme.json. Du behöver det inte om du bara ändrar via Webbplatsredigeraren eller Anpassa, eftersom de ändringarna sparas i databasen och redan överlever uppdateringar.

Behöver du ett barntema?

Barntema för ett blocktema

Testat i vår labbmiljö på WordPress 7.1.3 med Twenty Twenty-Five som huvudtema. Det räcker med två filer.

1. Skapa en mapp i wp-content/themes/, till exempel twentytwentyfive-barn.

2. Skapa style.css i mappen:

/*
Theme Name: Twenty Twenty-Five Barn
Template: twentytwentyfive
Version: 1.0
*/

Template måste vara exakt samma som mappnamnet på huvudtemat, inte temats visningsnamn.

3. Skapa theme.json med bara det du vill ändra:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "styles": {
    "color": {
      "background": "#fdf6ec"
    },
    "elements": {
      "link": {
        "color": { "text": "#b2391c" }
      }
    }
  }
}

Barntemats theme.json slås ihop med huvudtemats. Du behöver inte kopiera hela filen, bara det du ändrar. I vårt test fick sajten den nya bakgrunds- och länkfärgen medan typsnitt, storlekar och avstånd ärvdes från Twenty Twenty-Five.

4. Aktivera barntemat under Utseende → Teman.

Vill du ändra en mall kopierar du den från huvudtemats mapp templates/ (eller parts/ för sidhuvud och sidfot) till samma plats i barntemat och ändrar där. Barntemats version används då i stället för originalet.

Barntema för ett klassiskt tema

Även här börjar du med en mapp och en style.css med Template satt till huvudtemats mappnamn:

/*
Theme Name: Mitt tema Barn
Template: mitt-tema
Version: 1.0
*/

/* Dina CSS-ändringar här */

Skillnaden är att du ofta måste se till att stilmallarna laddas. WordPress laddar inte automatiskt huvudtemats style.css åt barntemat. Hur du gör beror på hur huvudtemat laddar sina stilar:

• Laddar huvudtemat både sin egen och barntemats stilmall (många moderna teman gör det): du behöver ingen functions.php alls.
• Laddar huvudtemat bara sin egen stilmall: lägg till följande i barntemats functions.php så att din style.css också laddas:

<?php
add_action( 'wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'mitt-tema-barn-style',
    get_stylesheet_uri(),
    array(),
    wp_get_theme()->get( 'Version' )
  );
} );

Testa genom att aktivera barntemat och kontrollera att sajten ser ut som innan. Gör den inte det saknas huvudtemats stilar, och du behöver även ladda dem med get_parent_theme_file_uri( 'style.css' ). Kontrollera temats dokumentation: många populära klassiska teman har en färdig barntemamall att ladda ned.

Bra att veta

• Byt till barntemat tidigt. Inställningar och ändringar i Webbplatsredigeraren eller Anpassa sparas per tema och följer inte automatiskt med när du byter från huvudtema till barntema.
• Huvudtemat måste vara installerat och får inte tas bort, men det behöver inte vara aktivt.
• Håll barntemat litet. Ju mer du kopierar från huvudtemat, desto mindre får du av huvudtemats förbättringar vid uppdatering.

Läs mer om hur blockteman är uppbyggda i Blockteman och Webbplatsredigeraren förklarade.