Om du har använt WordPress en längre tid är barntema (eng. child theme) säkert ett begrepp som du har snubblat över vid något tillfälle. Om inte är det hög tid. Ett barntema är ett tema som ärver funktionalitet från ett annat tema – ett föräldratema (eng. parent theme). Genom att använda ett barntema kan du modifiera funktionaliteten i presentationen i ett tema utan att du behöver oroa dig för att ändringarna förändras eller skrivs över av uppdateringar.

I den här guiden kommer jag att gå igenom vad ett barntema är och hur du kan använda barnteman till att på ett enkelt och säkert sätt göra ändringar i WordPress-teman.

Varför barnteman?

Det finns flera bra anledningar till att använda barnteman.

  1. Om du gör dina ändringar i ett barntema kan du när som helst avaktivera och/eller tar bort temat utan att dess föräldratema påverkas.
  2. Om du gör ändringar i ett tema och temat uppdateras kommer dina ändringar att försvinna. Gör du ändringarna i ett barntema bevaras ändringarna även om dess föräldratema uppdateras.
  3. Det är ett snabbt och smidigt sätt att börja bekanta sig med temautveckling för WordPress.

Så skapar du ett barntema

Obs: den här guiden förutsätter att du har en fristående installation av WordPress och en grundläggande förståelse för hur WordPress-teman fungerar.

Som exempel i den här guiden kommer jag att det senaste standardtemat i WordPress: Twenty Twenty One. För att komma igång, gå till temamappen på din WordPress-installation. Du hittar den mappen i Webbplats > wp-content > themes*. Är det en någorlunda ny installation ska den mappen innehålla en mapp med namnet twentytwentyone. Gör den inte det måste du ladda ned det temat från WordPress.org och installera det på WordPress-installationen i fråga.

Skapa en ny mapp i themes-mappen och döp den till ”twentytwentyone-child”. Det är praxis när man gör ett barntema att döpa dess mapp till samma namn som föräldratemat, men med ändelsen ”-child”. Det är dock inget krav. Öppna din nyskapade mapp och skapa en fil med namnet style.css. Öppna den filen och klistra in följande kod:

/*
Theme Name: Twenty Twenty One Child
Description: Twenty Twenty One Child Theme
Author: WordPressguider.se
Author URI: https://www.wordpressguider.se
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("../twentytwentyone/style.css");

Den här koden döper temat till ”Twenty Twenty One Child”, och säger till WordPress (med Template-taggen) att det är ett barntema till temat Twenty Twenty One. @import-taggen säger åt temat att hämta CSS-filen från Twenty Twenty One, så att det inte bara är CSS-koden från barntemat som laddas när sidan visas.

För det här temat behöver du även skapa en fil för olika funktioner i samma mapp du nu har skapat. Skapa en fil med namnet functions.php. Öppna den filen och klistra in följande kod:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Huvudtemat använder en funktion som heter get_template_directory() för att ladda css-filen och därför behöver vi lägga till även barntemats css-fil med denna kod.

Om du nu loggar in på WordPress-webbplatsens adminpanel och går till Utseende > Teman kommer du att se Twenty Twenty One Child i listan. Bara för att bekräfta att allt har fungerat som det ska, gör två radbrytningar under kodblocket i style.css och klistra in följande kod:

* { color: #CA2017 !important; }

Spara filen. Gå till WordPress-installationens Tema-sida igen och aktivera Twenty Twenty One Child. Öppna webbplatsens startsida. Om all text på sidan nu har en mörkröd färg vet du att barntemat fungerar som det ska, och att du kan fortsätta experimentera med temats design i barntemats style.css-fil. Du bör nog börja med att radera raden vi precis lade till.

Men om man går så långt att man skapar ett child theme är det förmodligen inte ändringar i CSS-koden som hägrar. Det finns vagnslastar av tillägg som gör det mycket enklare att göra sådana ändringar. Anledningen till att man skapar ett child theme är vanligtvis att man vill redigera ett temas PHP-filer.

Redigera PHP-filer i child themes

Som exempel för redigering av PHP-filer kommer vi att använda filen som styr visning av sidfoten med standard-formatet i Twenty Twenty One: footer.php. Gå till Twenty Twenty One-mappen i wp-content > themes, kopiera footer.php, gå till barntemats mapp och klistra in kopian. Kontrollera att kopian också heter footer.php. När webbplatsen nu laddas kommer WordPress att se att det finns filer med filnamnet footer.php i både barntemat och föräldratemat, och då kommer barntemats footer.php att användas. De betyder att de ändringar vi nu gör i footer.php i barntemat kommer att reflekteras på webbplatsen.

Som exempel kommer vi att ändra på informationen om vem som skapat webbplatsen med standardformatet i Twenty Twenty One. Öppna footer.php-filen i barntemats mapp. Med start från rad 56 hittar du följande kod:

<div class="powered-by">
<?php
printf(
      /* translators: %s: WordPress. */
     esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
    'WordPress'
);
?>
</div>

Här kan du exempelvis välja att byta ut webbadressen ”https://wordpress.org/” till din egen webbadress och författaren ”WordPress” till dig själv eller namnet för ditt företag eller webbplats. För denna webbplatsen skulle det kunna bli:

<div class="powered-by">
<?php
printf(
      /* translators: %s: WordPress. */
     esc_html__( 'Skapad av %s.', 'twentytwentyone' ),
    'WordPressguider.se'
);
?>
</div>

Vill du ta bort, ändra eller lägga till saker i andra filer upprepar du bara stegen: kopiera filerna från föräldratemat, klistra in dem i barntemat och börja redigera.

Avslutning

Det här var en snabb grundkurs i hur du skapar och börjar jobba med barnteman. När du väl har ett barntema up and running kan du använda det temat som utgångspunkt för många andra guider på WPG: Visa ett inläggs lästid, lägg till stöd för utvalda bilder, lägg till en gilla-knapp för Facebook, och så vidare, och så vidare. Möjligheterna med barnteman är oändliga, och det är ett väldigt bra sätt att doppa tårna i temabyggande i WordPress.