WordPress och Child Themes

WordPress Child Themes

Child themes (eller “barnteman”) i WordPress kan verka krångliga och onödiga för den oerfarne. Jag fick en förfrågan om jag kunde skriva en artikel om just child themes, och självklart kan jag göra det.

Sanningen är att child themes inte är så krångliga som många tror, och det finns flera fördelar med dem. I den här artikeln kommer jag berätta vad child themes är och dess fördelar, men även vilka nackdelar det finns med dem. Sedan kommer jag gå igenom hur de fungerar och till slut hur man skapar ett child theme — allt förklarat på ett sätt som är barnsligt enkelt att förstå.

Vad är child themes?

Vi ska börja med att klargöra vad child themes inte är; att ett tema kallas för just barntema betyder inte att det har något med barn att göra, utan pekar istället på var i hierarkin temat ligger. Jag skulle hellre kalla dessa teman för underteman som faktiskt säger lite mer om vad det är för något, men eftersom att både child theme och barntema används flitigt så ska även jag göra det.

Ett child theme är med andra ord ett tema som utgår från ett vanligt tema, vanligtvis kallat för förälder- eller huvudtema. Det är den enklaste formen av WordPress-tema, och att göra ändringar genom ett child theme istället för direkt i huvudtemat har flera fördelar:

  • När huvudtemat uppdateras så försvinner inte dina ändringar.
  • Går (ofta) snabbare att jobba med.
  • Enklare att jobba med för nybörjare.

Men, som med det mesta, så finns det även nackdelar:

  • Man använder sig oftast av @import, vilket är dåligt för webbplatsens prestanda.
  • Vid många ändringar blir stilmallarna onödigt långa.

Ifall man har höga krav på prestandan och har tänkt göra väldigt många ändringar så är det med andra ord bättre att göra ett vanligt tema än ett barntema. För de flesta går det dock alldeles utmärkt att köra med ett barntema.

Värt att veta är att det inte går att skapa ett barntema med ett annat barntema som förälder.

Hur fungerar child themes?

I mina exempel kommer jag utgå från ett barntema som vi kallar “Mitt tema”. Hur du skapar ett barntema kommer jag berätta mer om senare i denna artikel.

I “Mitt tema” har vi endast följande filer:

  • style.css
  • header.php
  • footer.php
  • functions.php

När man arbetar med child themes finns det främst två saker man ska komma ihåg:

  • De PHP-filer som inte finns i barntemat hämtas istället från huvudtemat.
  • Undantaget är functions.php där båda hämtas — först från barntemat, därefter från huvudtemat.

För att göra detta ännu enklare att förstå så har jag gjort nedanstående illustration med vårt exempel.

Hur child themes fungerar

WordPress tittar först om filen finns i barntemat — ifall den inte finns så hämtas den istället från huvudtemat. Detta innebär att när du arbetar med barnteman ska du bara kopiera över de PHP-filer som du har tänkt ändra något i. När det i framtiden kommer en uppdatering till huvudtemat så kan du lugnt hämta uppdateringen utan att de ändringar du gjort försvinner.

Och functions.php?

Som jag berättade tidigare så hämtas filen functions.php först från barntemat och sedan från huvudtemat. Detta gör så att du kan ersätta funktioner i huvudtemat med dina egna.

I ett vanligt tema kan en funktion i filen till exempel se ut så här:

if(!function_exists('do_something'))
{
    function do_something()
    {
        //Gör något
    }
}

Eftersom koden kontrollerar så att funktionen do_something() inte redan existerar, och för att koden kommer köras efter vår egen functions.php, så kan vi enkelt ersätta funktionen med vår egen:

function do_something()
{
    //Gör något annat
}

Hur skapar man ett child theme?

Att skapa ett barntema är väldigt enkelt. Öppna mappen /wp-content/themes/ och skapa en ny mapp där. Det är en god vana att döpa mappen för ett barntema till det samma som huvudtemat med “-child” i slutet, och eftersom “Mitt tema” kommer ha “Twenty Thirteen” som huvudtema så döper vi mappen till twentythirteen-child.

Stilmallen

I mappen skapar vi en ny fil vid namn style.css med följande innehåll:

/*
 Theme Name:   Mitt tema
 Template:     twentythirteen
*/

/* Importera stilmallen från huvudtemat */
@import url('../twentythirteen/style.css');

Observera att Template: twentythirteen är det som anger att det här är ett barntema till “Twenty Thirteen”, vars mapp heter twentythirteen.

Mer än så behövs inte. Om du sparar filen, loggar in i din admin-panel och går till Utseende > Teman så kommer du se ditt nya barntema där och kan aktivera det. Eftersom du hittills inte har gjort några ändringar så kommer du dock inte så någon skillnad mellan barntemat och huvudtemat.

Raden med @import säger åt webbläsaren att hämta en annan stilmall, i det här fallet rör det sig om originalstilmallen från huvudtemat. Alla ändringar du gör i stilmallen måste ske efter importen, annars kommer de inte gälla.

För att hitta det du vill ändra i stilmallar rekommenderar jag utvecklingsverktyget som finns inbyggt i din webbläsare.

PHP-filer

Säg att du vill ändra någon HTML-kod i sidhuvudet på din webbplats. Då kopierar du först twentythirteen/header.php till twentythirteen-child/header.php, därefter gör du dina ändringar i den nya kopian. Som jag förklarade tidigare så kommer WordPress nu att hämta header.php från ditt barntema och resten av alla PHP-filer från huvudtemat.

Slutord

Det är faktiskt inte svårare än så att skapa ett barntema. Om du vill fördjupa dig mer så finns resten väl dokumenterat.

Vad föredrar du att jobba med — barnteman eller vanliga teman?

Ivar Johansson

Skriven av

Ivar började med webbutveckling för tio år sedan och har sedan dess utvecklat breda kunskaper inom framför allt webbprestanda, sökmotorer och användarupplevelse. Idag driver han eget företag där han skapar webbplatser som är snabba, säkra och enkla att hantera.

  1. Catlin

    5 januari, 2014

    Tackar så mycket för en mycket välskriven artikel, nu ska här göras barnteman :-)

  2. Ivar Johansson

    5 januari, 2014

    Tack för dina ord, Catlin, och kör hårt!

  3. Patrick Hansson

    6 januari, 2014

    Bra skrivet om ett vettigt ämne! Hade planer att skriva ihop något liknande då child themes (”barntema” låter så fel! :) ) ofta är något som efterfrågas och rekommenderas i olika supportforum. Nu kan jag istället länka dem hit för en ordentlig genomgång.

  4. Ivar Johansson

    6 januari, 2014

    Kul att höra, Patrick! Ja det är synd att det inte finns ett vettigare ord på svenska som redan används flitigt. :-)

  5. Johan

    20 april, 2014

    Hej.
    Undrar över en sak. Om jag ska ändra något i style.css i ett barntema är detta rätt? Gör något fel iomed att det inte fungerar :/

    /*
     Theme Name:   Barntema
     Template:     twentyeleven
    */
    
    /* Importera stilmallen från huvudtemat */
    @import url('../twentyeleven/style.css');
    
    .main-page-title .page-title {
    	font-size: 16px;
    	font-weight: 400;
    	line-height: 120%;
  6. Ivar Johansson

    21 april, 2014

    Hej Johan! Det ser korrekt ut, bortsett från att du har missat den sista klammern, }.

    Ifall det inte fungerar kan du använda utvecklingsverktyget i webbläsaren för att se vad som försiggår. Om du inte ser dina ändringar där så kan du även kika på första frågan i den här artikeln och se ifall det hjälper dig. :-)

  7. Johan

    21 april, 2014

    Det är så skumt. För att nu rättade jag till den som du sa.
    http://pastebin.com/WPZ1di8p

    Och om jag kollar med utvecklingsverktyget så läser den fortfarande från förälder temat. Jag har både refreshat och provat kolla på siten i ”incognito mode”.

  8. Ivar Johansson

    21 april, 2014

    Kan hända att selektorerna är så pass specifika i föräldertemat att du behöver använda !important för att skriva över stilarna, t ex font-size: 1px !important;.

  9. Marta

    5 maj, 2014

    Hej
    Jag försöker att modifiera en fil som befinner sig i min huvud thema (html fel som orsakade validerings errors) och laddade upp en ny i min child thema och återskapade strukturen så klart men WP verkar inte vilja läsa den filen tyvärr. Kan de bero på att min lilla fil anropas från huvudmallen genom en annan sökväg? Hur ska jag kunna använda mig av min version av filen utan att behöva skriva om själva sökvägen i huvudmallen? Finns det ngn lösning?

  10. Ivar Johansson

    5 maj, 2014

    Hej Marta!

    Det är jättesvårt för mig att veta utan att se hur du har gjort. Dubbelkolla gärna alla steg i artikeln för att säkerhetsställa att du har gjort rätt, därefter kan du återkomma med hur din style.css ser ut. :-)

    Sedan kan jag tipsa om den officiella WordPress-gruppen, där är vi flera som brukar svara på frågor — på så vis bör du få ett svar snabbare.

  11. Marie

    7 februari, 2015

    Hej,
    tittade på din länk till WordPress Codex. De vill inte att man använder @import.
    ” Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to use wp_enqueue_script() in your child theme’s functions.php.”
    What you say?

  12. Ivar Johansson

    11 mars, 2015

    Hej Marie!

    Tack för din kommentar, och en jätteursäkt för mitt sena svar.

    Det stämmer det du säger, att det bästa sättet är att inkludera stilmallen via functions.php istället för att använda @import. Anledningen till att jag använder @import i artikeln är för att det är enklare att förstå och använda för nybörjare.

    Jag nämner även i artikeln att ”man använder sig oftast av @import, vilket är dåligt för webbplatsens prestanda”, men jag kanske borde förstärka budskapet och hänvisa till lösningen med functions.php för webbplatser i drift.

  13. Christer

    24 april, 2015

    Hej! Har ett problem och det är att den inte hittar det befintliga temat, var i koderna är det som är fel? Pekningarna till modertemat ja. Men det ligger i samma mapp, men hur? Hmm beror det på @import? Eller vart? Ska function do_something()
    {
    //Gör något annat
    } in någonstans? eller är det bara ett exempel? Samt i hantera teman, så säger wordpress att det är skadat och valet är ”radera”. Hur göra och vart finner jag mer kunskap i detta?

    Tack för hjälpen! MVH Christer

  14. Ivar Johansson

    27 april, 2015

    Hej Christer!

    När du säger att den inte hittar det befintliga temat, så tolkar jag det som att du inte ser barntemat under Utseende > Teman.

    Observera att barntemat inte ska ligga i modertemats katalog. Temana ska istället ligga parallellt i katalogen /wp-content/themes/, sedan är det viktigt att ”Template” i barntemats style.css är det exakta namnet på modertemats katalog.

    Hoppas detta hjälpte dig något!

Mejla mig: