Av 
Ett barntema är en egen mapp i wp-content/themes med en style.css som pekar ut ett annat tema som förälder. WordPress laddar föräldern som vanligt, lägger dina filer ovanpå, och när föräldern uppdateras rörs inte din mapp. Allt du vill ändra i ett köpt eller nedladdat tema ska ligga där, aldrig i temat självt.
Här är ett färdigt barntema att ladda ner. Det innehåller style.css, functions.php, theme.json och en kort LASMIG.txt. Jag har testat det som barn till Twenty Twenty-Five i WordPress 7.1, och det fungerar som mall för de flesta teman med tre ändringar.
Så använder du det
- Packa upp zip-filen, öppna
style.cssoch bytTheme Nametill det namn du vill se under Utseende → Teman. BytTemplatetill mappnamnet på ditt föräldratema, exakt som det heter iwp-content/themes, till exempelastraellergeneratepress. Är föräldern Twenty Twenty-Five behöver du inte ändra något. - Packa ihop mappen till en zip igen och gå till Utseende → Teman → Lägg till tema → Ladda upp tema. Har du SFTP-åtkomst kan du i stället lägga mappen direkt i
wp-content/themes/. - Aktivera barntemat. Föräldern ska finnas kvar installerad men inaktiv.
Vill du slippa redigera filerna för hand fyller barntemageneratorn i namn, Template och textdomän åt dig och ger dig en zip direkt.
Har du redan gjort ändringar via Utseende → Anpassa eller i webbplatsredigeraren följer de inte med automatiskt. De är kopplade till det aktiva temat, så ta en skärmdump eller anteckning innan du byter.
Varför du ska ha ett barntema
Det första skälet är uppdateringar. När ett tema uppdateras byter WordPress ut hela mappen. Varje rad du skrivit i förälderns style.css eller functions.php försvinner, utan varning. Jag har tagit över flera sajter där ägaren slutat uppdatera temat av just det skälet, och då sitter man med ett tema som har tre år av säkerhetsrättningar kvar att hämta.
Det andra skälet är support. Temaleverantörer felsöker gärna mot sitt eget tema, men ett redigerat tema är ett annat tema. Med ett barntema kan du aktivera föräldern i tio sekunder, visa att felet finns kvar och få hjälp.
Det tredje skälet är flyttbarhet. Ett barntema är en liten mapp där allt eget ligger samlat. Den går att lägga i Git, kopiera till en staging-miljö eller lämna över till en annan utvecklare, som ser på en minut vad som är anpassat. Letar du efter egna ändringar i ett tema på 400 filer är det en halvdag.
Vad barntemat består av, fil för fil
style.css
Huvudet överst i style.css är det enda WordPress kräver. Theme Name är det enda obligatoriska fältet för ett vanligt tema, och Template är det som gör temat till ett barntema. Så här ser huvudet ut i det nedladdningsbara temat.
/*
Theme Name: Mitt barntema
Theme URI: https://wordpressutveckling.se/barntema-i-wordpress/
Description: Ett generellt barntema. Byt "Theme Name", "Template" och textdomänen, lägg dina ändringar här.
Author: Ditt namn
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitt-barntema
*/Template måste matcha förälderns mappnamn till hundra procent, inklusive gemener. Version är inte bara dekoration: functions.php använder det som cache-brytare när stilmallen laddas, så höj det när du ändrat CSS. Resten av fälten behövs för temakatalogen men skadar inte här.
Under huvudet i filen ligger en CSS-variabel och tre bortkommenterade exempel. Allt du skriver i filen laddas efter förälderns CSS och vinner därför vid samma specificitet.
functions.php
Barntemats functions.php ersätter inte förälderns. Båda laddas, barnets omedelbart före förälderns. Det är därför filen hookar allt i stället för att anropa förälderns funktioner direkt, och det är därför du aldrig ska kopiera in kod från förälderns functions.php: funktionen finns redan, och PHP stoppar sajten med ett ”cannot redeclare”.
Här är filen i sin helhet.
<?php
/**
* Mitt barntema – functions.php
*
* Child theme functions are loaded before the parent's, so hook everything
* instead of calling parent functions directly.
*
* @package mitt-barntema
*/
defined( 'ABSPATH' ) || exit;
/**
* Load the child style.css after the parent's stylesheet.
*
* Block themes (like Twenty Twenty-Five) do not enqueue style.css by themselves,
* so this is needed there too. For a classic parent theme, add the parent's
* stylesheet handle to the dependency array so the order is guaranteed:
* wp_enqueue_style( 'mitt-barntema', ..., array( 'parent-handle' ), ... ).
*/
add_action( 'wp_enqueue_scripts', 'mitt_barntema_styles' );
function mitt_barntema_styles() {
$version = wp_get_theme()->get( 'Version' );
wp_enqueue_style( 'mitt-barntema', get_stylesheet_uri(), array(), $version );
}
/**
* Example: load the child theme's translations from /languages.
*/
add_action( 'after_setup_theme', 'mitt_barntema_setup' );
function mitt_barntema_setup() {
load_child_theme_textdomain( 'mitt-barntema', get_stylesheet_directory() . '/languages' );
}
/*
* Example: a custom image size for cards. Remove the leading slash-star to enable.
*
add_action( 'after_setup_theme', 'mitt_barntema_image_sizes' );
function mitt_barntema_image_sizes() {
add_image_size( 'mitt-kort', 800, 500, true );
}
*/
/*
* Example: remove the emoji script that WordPress adds to every page.
*
add_action( 'init', 'mitt_barntema_remove_emoji' );
function mitt_barntema_remove_emoji() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
}
*/Den första funktionen är den som gör jobbet. get_stylesheet_uri() ger adressen till style.css i det aktiva temat, alltså barnets när barnet är aktivt. Föräldern pekar på sin egen fil med get_parent_theme_file_uri(), så de två krockar inte. Den tomma arrayen är beroendelistan. Har föräldern ett klassiskt tema som registrerar sin stilmall under ett handle, lägg det där så garanterar WordPress ordningen. Handle-namnet hittar du i förälderns functions.php, i anropet till wp_enqueue_style().
Den andra funktionen laddar översättningar från mappen languages i barntemat. load_child_theme_textdomain() använder get_stylesheet_directory() som standard om du utelämnar sökvägen, så andra argumentet är med mest för tydlighetens skull. Byt textdomänen mitt-barntema och prefixet mitt_barntema_ om du vill ha egna namn, men byt dem då på alla ställen.
De två sista blocken är avstängda exempel. Jag visar dem påslagna längre ner.
theme.json
Den här filen betyder bara något när föräldern är ett blocktema. Då läser WordPress förälderns theme.json, slår ihop barnets ovanpå, och barnet vinner där de överlappar. Du behöver alltså inte kopiera hela förälderns fil, bara skriva det du vill ändra. Filen i nedladdningen lägger till en färg i paletten och använder den som länkfärg.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "mitt-accent", "color": "#0f3d3e", "name": "Accent" }
]
}
},
"styles": {
"elements": {
"link": {
"color": { "text": "var(--wp--preset--color--mitt-accent)" }
}
}
}
}Är föräldern ett klassiskt tema utan egen theme.json tar du bort filen. Den gör ingen skada, men den aktiverar inställningar i redigeraren som temat inte är byggt för.
Mallfiler, bilder och typsnitt
Vill du ändra en mall kopierar du filen från föräldern till exakt samma sökväg i barntemat och redigerar kopian. I ett blocktema är det templates/single.html, parts/header.html eller en fil i patterns/. I ett klassiskt tema är det single.php eller template-parts/content.php. Finns filen i barntemat används den i stället för förälderns.
Egna bilder och typsnitt lägger jag i en mapp assets/ i barntemat. I style.css refererar du till dem med relativa sökvägar, url(assets/fonts/manrope.woff2), eftersom sökvägen tolkas relativt stilmallen. I PHP använder du get_stylesheet_directory_uri(), som pekar på barntemats mapp. get_template_directory_uri() pekar på förälderns, och det är ett vanligt sätt att blanda ihop dem.
Klassiskt tema eller blocktema: det här skiljer
I ett klassiskt tema laddar föräldern sin style.css själv i functions.php, och gamla guider lät barntemat göra samma sak. Det behövs sällan längre. Det som behövs är att barntemats stilmall laddas efter förälderns, och det löser beroendelistan i wp_enqueue_style(). Mallarna är PHP-filer, och ett barntema skuggar dem fil för fil.
I ett blocktema finns inget som laddar barntemats style.css automatiskt. Twenty Twenty-Four laddar ingen stilmall alls, Twenty Twenty-Five laddar bara sin egen. Utan funktionen ovan händer ingenting med din CSS, och det är det vanligaste felet jag ser hos folk som ”gjort ett barntema men inget syns”. Det mesta av utseendet i blockteman styrs via theme.json, och där slås barnets fil ihop med förälderns som beskrivet ovan. Mallar och malldelar är HTML-filer med blockmarkering i templates/ och parts/, och skuggas på samma sätt som PHP-mallar: samma filnamn i barntemat vinner. Mönster i patterns/ kräver också samma Slug i filhuvudet för att ersätta förälderns.
Ovanpå båda ligger användarens egna ändringar från webbplatsredigeraren. De sparas i databasen, inte i filer, och vinner över både barn och förälder. Handboken kallar det ett slags barnbarnstema. Det är praktiskt för en redaktör, men ingenting du vill ha som utvecklare, eftersom det inte följer med i Git.
Fyra vanliga ändringar
Allt nedan ligger i barntemat. CSS i style.css, PHP i functions.php.
Byta länkfärg
I style.css räcker en regel. Variabeln --mitt-accent finns redan överst i filen.
.entry-content a {
color: var(--mitt-accent);
}I ett blocktema får du samma sak snyggare via theme.json, som i filen ovan. Då syns färgen också i redigerarens palett, och redaktören kan använda den på knappar och rubriker utan att skriva CSS.
Dölja datumet på inlägg
Blockteman skriver ut datumet med blocket core/post-date, som får klassen wp-block-post-date. Regeln ligger som avstängt exempel i style.css.
.wp-block-post-date {
display: none;
}Vill du ta bort datumet på riktigt, inte bara gömma det, kopierar du templates/single.html till barntemat och tar bort blocket där. I ett klassiskt tema ligger datumet i en mallfil, ofta template-parts/content.php, och klassen varierar från tema till tema.
En egen bildstorlek
Det här är det första avstängda exemplet i functions.php, påslaget. WordPress skapar storleken för bilder som laddas upp efter att koden är på plats. Befintliga bilder får du köra om med ett plugin för regenerering eller wp media regenerate.
<?php
add_action( 'after_setup_theme', 'mitt_barntema_image_sizes' );
function mitt_barntema_image_sizes() {
// 800x500, cropped, for card layouts in listings.
add_image_size( 'mitt-kort', 800, 500, true );
}Ta bort emoji-skriptet
WordPress lägger ett litet skript och en bit CSS för emoji i varje sida. De flesta sajter behöver det inte, och de få kilobyte syns i Lighthouse. Det andra avstängda exemplet tar bort båda.
<?php
add_action( 'init', 'mitt_barntema_remove_emoji' );
function mitt_barntema_remove_emoji() {
// Priority 7 matches where core adds the detection script.
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
}Fallgropar
Fel värde i Template är den vanligaste. WordPress visar då ”Huvudtemat saknas. Installera huvudtemat ”xyz”.” under Utseende → Teman, och barntemat går inte att aktivera. Värdet är mappnamnet, inte temats visningsnamn: twentytwentyfive, inte Twenty Twenty-Five. Kontrollera stavningen mot mapplistan i wp-content/themes innan du letar någon annanstans.
Mallfiler måste kopieras till samma sökväg. template-parts/content.php ska ligga i template-parts/ i barntemat, inte i roten. Ligger den fel ignoreras den utan felmeddelande, och du sitter och undrar varför ändringen inte syns.
När CSS-ändringar inte syns är det nästan alltid cache. Barntemats stilmall får versionsnumret från style.css som parameter i adressen, så höj Version varje gång du ändrar något. Finns det ett cache-plugin eller en cache på webbhotellet behöver den tömmas också, och i webbläsaren hjälper en hård omladdning.
Ett barntema till ett tema som redan är ett barntema fungerar inte. WordPress tillåter två nivåer, och pekar Template på ett barntema får du ”Temat ”xyz” är inte ett giltigt huvudtema”. Peka på den ursprungliga föräldern i stället.
Kopiera aldrig in funktioner från förälderns functions.php. Båda filerna laddas, så en kopierad funktion blir deklarerad två gånger och sajten slutar svara. Vill du ändra något föräldern gör, ta bort dess hook med remove_action() eller remove_filter() och lägg till din egen.
Nästa steg
Lägg barntemat i Git från dag ett, även om det bara är tre filer. Då har du historik på varje ändring och kan flytta sajten utan att leta. Barntemageneratorn ger dig samma filer med dina namn ifyllda, men strukturen ovan är hela hemligheten: en style.css med rätt Template, en functions.php som laddar stilmallen, och resten bara när du behöver det.
Vanliga frågor
Försvinner mina ändringar när föräldratemat uppdateras?
Nej. En uppdatering byter ut filerna i förälderns mapp och rör inte barntemats mapp. Det är hela poängen med ett barntema. Det som kan hända är att föräldern byter klassnamn eller mallstruktur, och då behöver du anpassa dina överskuggningar.
Kan jag göra ett barntema till ett tema som redan är ett barntema?
Nej. WordPress tillåter bara två nivåer, förälder och barn. Pekar du Template på ett barntema får du felet ”Temat … är inte ett giltigt huvudtema”. Peka på den ursprungliga föräldern och kopiera över det du behöver från det andra barntemat.
Måste barntemat ha en functions.php?
Nej, bara style.css med Theme Name och Template krävs. Men i ett blocktema laddas inte barntemats style.css utan den, så i praktiken behöver du den så fort du vill skriva egen CSS.
Fungerar det här barntemat med Astra, GeneratePress eller Kadence?
Template-huvudet ska vara mappnamnet i wp-content/themes, så byt det till astra, generatepress eller kadence. Funktionen i functions.php laddar barntemats style.css oavsett förälder. Jag har bara testat zip-filen mot Twenty Twenty-Five.
Jag har redan ändrat direkt i föräldratemat. Hur får jag över det?
Ta en kopia av föräldern innan du gör något. Jämför sedan den mot en ren nedladdning av samma version, så ser du exakt vilka rader som är dina. CSS går i barntemats style.css, PHP i functions.php och ändrade mallfiler kopieras till samma sökväg i barntemat.