Tech Thursday: Jobba med Child Themes i WordPress

wordpress child themes

I mitt senaste inlägg på Tech Thursday berättade jag om tekniken bakom WordPress och beskrev hur en CMS som WordPress är uppbyggd. I dag ska vi prata om child themes i WordPress och varför du borde skaffa ett idag.

Det är här är något för den som är lite mer kod-van och gillar att trixa och fixa med sin blogg på egen hand. Det kan verka lite svårt och komplicerat men det är ett jättebra sätt att börja bekanta sig lite mer med koden som styr ens blogg och påbörja vägen mot att bli en riktig WP-hacker! Det går verkligen att bli riktigt kreativ om man bara vågar komma igång och försöka.

Att ändra i sitt tema

Temat i WordPress är det som plockar ihop de olika pusselbitar av innehåll som WordPress erbjuder och presenterar dem för besökarna av din blogg. Vem som helst kan skapa och publicera ett eget tema. WordPress tillhandahåller också en rad egenproducerade teman.

Hela poängen med WordPress är ju att det är open source, alltså att du får tillgång till koden och kan ändra i den precis som du vill. Problemet som kan uppstå om du ändrar något i källkoden till ditt tema är att du inte kan uppdatera ditt tema i framtiden.

Att inte uppdatera sitt tema innebär först och främst en säkerhetsrisk men det kan också göra att det uppstår problem med plugins och liknande. Så: tumregeln är att du ALLTID vill kunna uppdatera ditt tema. Det är här metoden att jobba med child themes kommer in!

Vad är ett child theme?

Ett child theme eller ett ”barntema” har, precis som namnet indikerar, en förälder som den bygger på. På så vis slipper du bygga ett helt eget tema, vilket är både tidskrävande och komplicerat, samtidigt som du kan göra de förändringar du vill.

Barntemat lägger sig som ett genomskinligt lager över temat som det bygger på, skulle man kunna säga. Där kan du sedan göra de förändringar du vill i endast de delarna du vill. Därefter går föräldratemat in och sköter resten. Detta gör att du utan problem kan uppdatera föräldratemat och ha kvar alla dina justeringar och förändringar.

När ska du använda ett child theme?

Om du vill ändra i källkoden till ditt tema genom att ta bort eller lägga till saker så bör du skapa ett child theme. Till exempel om du vill kunna lägga till egen kod i head-segmentet som Google Analytics-script eller egna typsnitt.

Om du endast vill ändra i CSS-koden i ditt tema så måste du inte skapa ett child theme för WordPress har byggt in en funktion där du kan lägga till egen CSS som finns kvar även när du uppdaterar temat. Dessa förändringar försvinner dessvärre om du byter tema så vill du designa om ett tema kan det vara en bra idé att använda ett child theme.

Är du lite kodkunnig och funderar på att bygga ett eget tema så är child themes också ett bra alternativ eftersom det är enklare och snabbare.

Tänk på:

Om du har ett tema med massor av egna inställningar eller om du gjort massa inställningar i ”Anpassa”-menyn i WordPress så kommer dessa nollställas när du aktiverar ditt child theme. Därför är det enklare att sätta upp ett child theme i samband med ett tema-byte eller en designuppdatering.

Så här skapar du ett child theme till ditt befintliga tema

Du behöver:

  • Inloggningsuppgifterna till din FTP-server så du kommer åt dina wordpressfiler på webbhotellet. Dessa har du kanske fått på mail från webbhotellet när du registrerade dig eller så kan du få dem genom att logga in på adminpanelen på ditt webbhotell. Du behöver: värd, användarnamn och lösenord.
  • Ett FTP-program t.ex. FileZilla
  • Ett kodskrivarprogram är ett plus men inget krav, vanliga textredigeraren går också bra men kodskrivarprogram gör det enklare att läsa koden. Har du Adobe Creative Cloud kan du använda DreamWeaver. Sublime text är ett annat populärt program. Gratisvarianter är t.ex. Atom eller Aptana.

Gör så här:

Följande steg är baserade på WordPress egna Child Themes-guide men med lite mer förklaringar.

Skapa en mapp för ditt child theme

Öppna ditt FTP-program och lägg till en ny plats. Använd dina inloggningsuppgifter för FTP: användarnamn, lösenord och värd. Portalternativet är oftast 21 (om du behöver ange det).

child themes i wordpresschild themes i wordpress

När du är inne i din webbserver leta upp mappen där dina WP-filer ligger. Det ska finnas tre mappar som heter wp-admin, wp-includes och wp-content (plus en massa andra filer).

Gå in i wp-content > Themes och kolla vad namnet är exakt på ditt nuvarande tema.

Gör nu en ny mapp på din dator (inte på skrivordet utan en bra och logisk plats i ditt filsystem t.ex. blogg > WordPress).

Döp mappen till exakt samma sak som ditt nuvarande tema + ”-child”. Så om jag använder twentysixteen just nu skapar jag en mapp som heter twentysixteen-child.

Skapa filerna style.css och functions.php

Gå nu till textredigeraren (på mac välj Format > Gör om till ren textfil) eller ditt kodskrivarprogram. Skapa ett nytt dokument.

I kodprogram kan du välja filtyp CSS, men radera eventuella automatiserade saker som skrivs in dokumentet.

Spara dokumentet i din nya child theme-mapp och döp den till style.css. Skapa ett till nytt dokument (filtyp PHP om du kan välja) och spara det som functions.php. Se till att ingen kod följer med från programmet.

Hämta stilmallen från föräldratemat

Nu börjar vi med style.css-dokumentet. I det ska du skriva in dessa uppgifter men bytt ut Twenty Sixteen mot det tema du baserar ditt tema på:

/*
Theme Name:   Twenty Sixteen Child
Description:  Twenty Sixteen Child Theme
Author:       Ditt Namn
Author URI:   http://dinbloggadress.se
Template:     twentysixteen
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  twentysixteen-child
*/

Det är viktigt att temanamnet du skriver som ”Template:” stämmer exakt med vad namnet är på mappen som ditt föräldratema ligger i.

När du skrivit in detta så sparar du din style.css-fil. Rent principiellt så borde detta kunna funka i sig men det är inte ”best practice” enligt WordPress så därför ska vi införa en till liten kodsnip.

Så vi går in i functions.php-filen vi skapat i vår child theme-mapp på datorn.
Klistra in följande kod:


<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')

);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Spara filen.

OBS! Det här förfarandet bygger på att ditt föräldratema använder endast en css-fil. Om du har ett premiumtema med en massa extrafunktioner kan du kolla på temats hemsida om de har en guide till hur man gör ett child theme baserat på deras tema.

Vissa teman kommer också med en child theme template-mapp i temamappen – så kolla efter det! Här finns annars en beskrivning hur du kan kalla in flera css-filer.

För om ditt föräldratema till exempel har ett css-dokument som heter style.css och en som heter mobile-style.css och så vidare så kommer inte ditt child theme hämta alla stilar och då kommer det inte funka som det ska.

Det är viktigt när du jobbar med PHP-kod att du har ALLA tecken med så gå försiktigt fram när du jobbar med koden.

Ladda upp ditt child theme på servern

Nu ska vi tillbaka in i FTP-programmet. På vänster sida i fönstret som visar dina lokala mappar så går du in i mappen där du lagt din child theme-mapp. På servern (det högra fönstret) går du in i wp-content > Themes.

Nu kan du bara klicka och dra över din child theme-mapp till tema-mappen på din server så den laddas upp.

child themes wordpress

Aktivera ditt nya child theme

När du nu går in i adminpanelen på din blogg och till temapanelen ska ditt nya childtheme finnas som ett alternativ att aktivera. När du aktiverar temat ska din blogg se exakt likadan ut som vanligt – då har du gjort allt rätt!

aktivera child theme wordpress

Så kan du använda ditt child theme

Om du till exempel vill lägga in Google Analytics-kod i headern på bloggen så kan du bara kopiera ned header.php-filen från ditt föräldratema på servern. Lägg den kopierade filen i din child theme-mapp på datorn. Sedan kan du gå in i filen och klistra in Google Analytics-koden.

Den ska då ligga under <head> och innan </head>-taggen men INTE inom en <?php ?>-tagg.

header-code

När du nu laddar upp din header.php-fil till din childthemes-mapp på servern så kommer den användas istället för föräldratemats header-fil. Så när du uppdaterar föräldratemat så kommer du inte behöva lägga in koden igen.

Du kan även ändra CSS-stilar för ditt tema. Om du t.ex. vill ändra typsnitt, färger, avstånd eller vad som helst i ditt tema så kan du enkelt göra det i css-filen du skapat i din childthemes-mapp.

Mer om hur det funkar kommer jag berätta en annan torsdag när vi ska prata om CSS-kod.

Elin Häggberg

Digital designer, teknikbloggare och journalist. Bloggar om teknik och internet på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

6 Comments
    1. Smart! Perfekt att använda när man väl fattat principen så man vet VAD tillägget faktiskt gör åt en. Genvägar funkar ju som känt bäst när man väl lärt sig den ”långa” vägen.

  1. Hrrm, testade det här men det verkar som alla inställningar som görs via Customise i WordPress skrivs in direkt i html-koden i mitt tema, inte i styles.css… För när jag aktiverar child ser temat helt annorlunda ut – header försvinner, färger blir inte rätt etc.

    Kan jag komma runt det här och ändå använda childtheme för CSS?

    (ex:
    img#wpstats{display:none}

    #logo { padding:8px 0; }

    #navigation, .slicknav_menu { background:#000000; }
    #navigation .menu li a, .slicknav_nav a { color:#ffffff; }
    #navigation .menu li a:hover { color:#ed7600; }
    .slicknav_nav a:hover { color:#ed7600; background:none; }

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>