Innehåll

    När man kommit igång med wordpress och börjat gräva sig lite djupare så har man troligen hört termen child/barn tema. Vi kommer att kalla de child tema och detta är precis vad det låter som, ett barn tema till föräldern som är de temat du använder just nu. Det som är så bra med child teman är de att du använder huvudtemat som en bas och sedan gör du ändringar i childet. Detta är viktigt att göra för att kunna uppdatera ditt tema men fortfarande behålla dina egna inställningar och scripta som du gjort. Om du fortfarande håller på att lära dig grunderna i WordPress rekommenderar vi att du sparar detta till ett senare skede när du är i behov utav det. För att använda sig utav child tema bör man ha grundläggande kunskaper i PHP som är språket WordPress är byggt i.

    Hur skapar man ett child tema till wordpress?

    Det finns ett antal olika sätt att skapa child tema, alla olika alternativ resulterar dock i samma sak. Man kan använda sig utav plugins för att skapa child teman men vi rekommenderar inte detta alternativ. Det fungerar utmärkt med plugins men den manuella vägen är väldigt simpel den också. Vill du använda dig utav ett plugin för att skapa ditt child tema rekommenderar vi att använder One-Click Child Theme. Detta fungerar bra men känns som en överdrift att använda plugin för detta simpla uppdrag. Nu kommer vi gå igenom hur du skapar ditt egna child tema från grunden.

    Skapa ett child tema manuellt

    Allt som behövs för att få ett fungerande child tema är bara att skapa en mapp i wp-content/themes vanligtvis döper man det till sitt temas namn, i vårt fall Divi vilket resulterar i Divi-child. I denna mapp så skapar vi nu en fil som heter style.css denna behöver sedan innehålla följande

    /*
        Theme Name: Divi child 1.0
        Template: Divi (Ditt huvud temas namn)
    */

    Nu när du har gjort ovan, skapat en map i wp-content/themes och sedan skapat en style.css fil där i så kommer du kunna gå in under “Utseende > Teman” i admin på din sida. Där kommer du då se ditt tema döpt till det som står under “Theme Name” i din style.css. Du kan dock fylla i fler parametrar om du vill. Nedan finner du alla olika parametrar som går att använda sig utav:

    Theme Name:   Twenty Fifteen Child
    Template:     twentyfifteen
    
    Theme URI:    http://example.com/twenty-fifteen-child/
    Description:  Twenty Fifteen Child Theme
    Author:       John Doe
    Author URI:   http://example.com
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain:  twenty-fifteen-child

    Se även: https://codex.wordpress.org/Child_Themes

    Börja använda ditt child tema

    Nu när vi har skapat oss ett child tema så kanske ni undrar vad man ska använda detta till? När du kommer vidare i din wordpress kunskap kommer du se hur stor del utav inställningar som du vill ha görs via kod och inte direkt i wodpress admin. Jag skapar alltid upp ett child tema till mitt huvud tema direkt när jag skapar en ny sida. Detta för att ha möjlighet att bestämma över vad som ska visas på vilka sidor och även kunna lägga till egen css styling. Om du har jobbat i en lite mer anvancerad miljö, där man använder NPM paket så kan man jobba med scss/sass som är ett modulbaserat sätt att jobba med styling.

    Nedan kommer jag att dela med mig utav mitt projekt som jag alltid använder när jag skapar nya wordpress sidor och dess child tema. Detta kräver som ovan nämnt NPM och lite kunskap inom javascript. Detta bygger på gulp som gör det möjligt att skriva scss kod istället för vanlig css. Detta gör det lättare att hålla ordning på sin kod och man kan även skapa variablar som är lätta att byta ut om man till exempel vill uppdatera någon färg eller liknande.