child-themes

Kom i gang med Child Themes til WordPress.


Vil du i gang med at udvikle dine egne WordPress temaer, kommer jeg her med en tutorial til hvordan du kommer i gang med det. Bruger du WordPress kan du nemt at finde en masse temaer, men oftest vil man gerne tilpasse dem til eget behov.

Kort fortalt er der 3 måder at gøre det på: Lav dit eget tema helt fra bunden, lav et Child theme, eller kopier et eksisterende tema.

Når man ændrer tema, er der nogle ting man skal være opmærksom på. Det kan være Google Analytics koder, eller andre ting som er kodet direkte ind i temaet, som er vigtig at få med i det nye tema. Husk også at det altid er en god ide at tage en backup af filer inden du begynder at redigere i dem.

1. Lav dit eget WordPress tema

For at komme i gang med sit eget tema, skal vi kende minimumskravene til et WordPress tema. Der er en række filer som skal være til stede for at et tema virker og kan aktiveres.

Starter man helt fra scratch med sit eget tema, så har man sikkert så meget styr på WordPress, at man ikke behøver læse denne guide, så jeg vil ikke gå helt i detaljer med.

Et tema består af en række filer (CSS & PHP), og eventuelt billeder, som alle ligger i en mappe/folder. Du kan se en liste over temafiler her.

Så gælder det ellers bare om at bygge sine temafiler op med HTML/PHP og sit CSS. Der er en masse funktioner indbygget i WordPress, som du kan tilføje dine temafiler.

Du kan se en liste over de mest brugte i mit WordPress Help Sheet her.

2. Sådan opretter du Child themes

Child themes er en smart måde at arbejde med temaer på. I et child theme, arver man filerne fra et “parent theme”. Det vil sige at du ikke behøver at kode dit tema fra bunden, men kan “bygge videre” på et eksisterende.

Har du for eksempel valgt at bruge TwentyTen, som har været standard tema i WordPress siden version 3.0, så har du sikkert allerede lavet nogle ændringer i det? Problemet med dette er at hvis du opdaterer temaet via kontrolpanelet, så overskriver du de ændringer du har lavet.

Så her kommer en guide til hvordan du opretter et child theme til TwentyTen.

Opret en mappe på din computer, og kald den det dit child theme skal hedde (ex: mit-tema).

I den mappe laver du en CSS fil, som SKAL hedde style.css, og kopiere dette ind:

/*
Theme Name: Mit Tema
Theme URI: http://mit-tema.dk
Description: Mit Child Theme til TwentyTen
Author: Dit navn
Author URI: http://mit-tema.dk
Template: twentyten
Version: 1.0
*/

@import url("../twentyten/style.css");
  • Theme Name: Navnet på dit tema. (*)
  • Theme URI: webadressen til dit tema.
  • Description: En kort beskrivelse af dit tema.
  • Author: Navnet på udvikleren (Dig selv).
  • Author URI: webadressen på udvikleren
  • Template: Navnet på det tema som skal være “Parent”. (Det er navnet på mappen original temaet ligger i du skal skrive her, og skal skrives præcist efter med store og små bogstaver)
  • Version: Versions nummeret på dit child theme. Nogle starter med 0.1, men dette bestemmer du helt selv.
  • Til sidst laver vi en import URL, som henter det originale stylesheet fra vores parent theme som i dette tilfælde er “twentyten”.

Dette er faktisk alt hvad vi behøver for at aktivere vores child theme.

Prøv at uploade mappen “mit-tema” til din WordPress installation i mappen -> wp-content -> themes.
Nu kan du under dit kontrolpanel -> Udseende, se dit tema.

Som du kan se på billedet henter WordPress selv de data du har defineret i style.css.

Vil du tilføje et “screenshot”, så laver du blot et billede med dimensionerne 300×225 og gemmer det som screenshot.png i din tema mappe.

Du kan allerede nu aktivere dit nye tema, men det vil ikke se anderledes ud, da vi ikke har tilføjet nogle ændringer til det endnu.

Hvis du har aktiveret det, kan du nu rette i style.css med den indbyggede editor i WordPres under -> Udseende -> Editor.

Hele ideen med et child theme er netop at den “arver” alt fra original temaet, med mindre vi har defineret noget andet i vores child theme.

For at teste det kan du tilføje dette til style.css:

#wrapper {
background: #444;
}

Dette vil “overrule” #wrapper fra twentyten, og erstatte det med en anden baggrundsfarve. Så nu kan du begynde at tilpasse twentyten temaet, uden at rette i selve temaet.

Det samme kan du gøre med de andre temafiler. Vil du for eksempel tilføje Google Analytics kode til header.php, så kopiere du header.php fra twentyten temaet og ligger filen i din child theme mappe (mit-tema), og retter den til. WordPress vil nu hente style.css og header.php fra dit child theme når det er aktiveret, og automatisk hente de resterende filer fra twentyten temaet.

Download hele kodeeksemplet her (.zip)

3. Kopier eksisterende tema

Ønsker man ikke at arbejde med child themes, men gerne vil tilpasse et tema, så kan man omdøbe temaet, så det ikke overskrives ved en opdatering.

Min blog her på larsbachmann.dk er baseret på temaet TwentyTen, som jeg har tilpasset til min egen stil.

Måden jeg har gjort det på, er ved at lave en kopi af mappen “twentyten”, og kaldt den “wp-larsbachmann”. Så har jeg åbnet style.css, og ændret navnet på temaet, uploadet mappen og aktiveret det.

Frameworks til WordPress

Et framework er et “grund-tema” som du kan arbejde videre på. I princippet er TwentyTen et udemærket framework at arbejde videre med. En af de første frameworks til WordPress var Sandbox, men senere er der kommet mange flere frameworks, som Hybrid, Thematic og Genesis, som er mere avanceret.

WPcandy har lavet en sammenligning af 23 Theme frameworks

Lars Bachmann

Iværksætter og Online nørd.
Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

Prøv lige at se disse indlæg også!

25 kommentarer til Kom i gang med Child Themes til WordPress.

  1. Andreas Linde siger:

    Du er on fire Lars! Super godt indlæg! Jeg er ved at lave en liste over gode wordpress indlæg. Jeg har allerede linket til 9 af dine indlæg :D

  2. Mange tak for gennemgangen, Lars. Der findes et hav af engelske artikler om samme emne, som jeg hver gang er gået kløjs i. Ovenstående efterlader ingen undskyldning for ikke at komme i gang med child themes :-)

  3. Hej Lars,

    Fin og overskuelig gennemgang. Så burde de fletse med lidt grundlæggende css forståelse kunne komme igang med at tilpasse og lave deres egetb tema.

    dbh
    Kenneth

  4. Super godt indlæg om child themes, bruger selv Hybrid som frameworks, på flere af mine wordpress sider, du er inde i en god stime Lars, blive ved :)

  5. Rigtig god artikel!
    Jeg har længe ledt efter en god dansk artikel der gennemgår Child Themes, da det er så irriterende at man mister alle sine ændringer, når man opdaterer sine temaer.

    Så tak for det!

  6. Pernille Nygaard siger:

    Hej Lars.
    I forbindelse med mit arbejde skal jeg nu her til at oprette en række blogs, der skal fungere som private forums til kursister. Og de skal gerne have deres eget tema, og der er dit indlæg virkelig brugbart. Tak for det. :) Men det afføder så det spørgsmål om man bare kan genbruge det grundtema man har lavet? Sådan at en der ikke er så skarp udi blogverden bare kan oprette en ny blog og så vælge det skræddersyede tema?

    Håber du kan hjælpe mig.

    Mvh. Pernille Nygaard

  7. Pernille Nygaard siger:

    Hej igen.

    Tak for svaret. Alle kursister skal kunne vælge det samme grundtema til bloggen, et vi har designet. Kan man det? Det skal gerne være så simpelt som muligt for dem, det er jo ikke designet der skal bruges tid på, men indholdet. :)

  8. Lars Bachmann siger:

    Hej Pernille

    Hvis jeg forstår spørgsmålet korrekt, så skal du oprette en række blogs, og på hver blog skal de enkelte kursister kunne vælge deres eget tema. I har så et standard tema, som ligger i hver WP installation? I så fald, er der ikke noget i vejen for at alle kan bruge “grundtemaet”.

    Håber de svare dit spørgsmål, eller er du velkommen til at spørge igen.

  9. Lars Bachmann siger:

    Hej Pernille
    Kort svar: Ja :)

  10. Søren Hansen siger:

    Hej Lars
    Hvis man har en webshop vil det være muligt at anvende styles.css fra den, sådan at wp får samme udseende som shoppen?

  11. Lars Bachmann siger:

    Hej Søren
    Det vil man som udgangspunkt ikke, da din shop har en anden opbygning og dine div elementer højst sandsynligt hedder noget andet.

  12. Flemming Lund siger:

    Hej Lars. Har du oplevet problemer med child themes hvis selve hovedtemaet på et tidspunkt får en større opgradering, eller er det ikke noget, man skal bekymre sig om?

  13. Lars Bachmann siger:

    Hej Flemming
    Det har jeg ikke.

    Det er som udgangspunkt også kun hvis du bruger WP standard themes (TwentyTen, twentyEleven og TwentyTwelwe) at du skal være opmærksom på det, da det er dem der automatisk bliver opdateret sammen med WP.

  14. Søren Hansen siger:

    Hej Lars
    Skal det forstås sådan at det er et større programmerings arbejde man skal igang med for at få både webshop og wp til at være ens i udseende?
    Det kunne være en udfordring vær.

  15. Lars Bachmann siger:

    Det kan være en større opgave, men ikke nødvendigvis. Jeg har tidligere lavet WP temaer til kunder som en “kopi” af deres webshop.

  16. Kasper Toxvig siger:

    Er det muligt at tilføje et HTML kode? Og hvordan skal det sættes op?
    Vil nemlig gerne tilføje en html kode på min forside, uden at den forsvinder hver gang jeg opdatere themet:-)

  17. Lars Bachmann siger:

    Ja, det er muligt Kasper.
    Hvis du hiver index.php filen med over i dit childtheme, så kan du tilføje HTML koden. Og da den ligger i dit childtheme, så forsvinder den ikke når du opdatere dit parent theme.

  18. Stefan siger:

    Super fedt indlæg.. Jeg vil gå i gang med det samme og forsøge mig frem :)

  19. Gitte siger:

    Hej Lars,

    Når jeg forsøger at oploade mit tema, får jeg denne besked:

    Opdateringspakken kunne ikke installeres. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    Jeg har forsøgt at “un-zippe” den etc. etc. og gemt igen osv.

    På forhånd tak… Gitte

    What to do?

  20. Lars siger:

    Hej Lars

    Når jeg følger ovenstående vejledning, og derefter anvender temaet, så vises mine hjemmeside blot uden noget tema – og det selvom WP har accepteret, at jeg bruger en parent.

    Jeg har gået koden igennem og der er ingen forskel til det du skriver.

    Hvad kan årsagen være?

    mvh. Lars

  21. Julie Jensen siger:

    Hej Lars.
    Rigtig god gennemgang – jeg støder dog på dette problem:
    “Forældertemaet mangler. Installer venligst “Twentyeleven” forældertemaet.”
    Hvilken fil er det den vil have? Jeg kan ikke finde nogen template fil – kan du hjælpe?
    // Julie

    • Lars Bachmann siger:

      Hej Julie
      Problemet opstår fordi du har en ny WordPress installation. Den gang jeg skrev dette indlæg, var TwentyEleven et standard tema som fulgte med. I dag hedder standard temaet i WordPress TwentyFourteen, og da du laver et childtheme til TwentyEleven, kan den ikke finde ud af det.

      Enten skal du under -> udseende -> Temaer – søge efter TwentyEleven og installere det, eller rette dit childtheme, så det refererer til TwentyFourteen i stedet.

      Håber det giver mening for dig?

  1. 29. april 2013

    [...] er lavet som såkaldte “Child Themes“, og er bygget på et WordPress standard tema der hedder TwentyTwelve. Det er gratis og open [...]

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>