Vi får ofta frågor om hjälp med uppdatering i olika former. En av de saker vi återkommande upptäcker är att det inte finns ett barntema (child theme) installerat på sidan utan man har installerat ett tema och sedan gjort ändringar direkt i det temats filer.

Skulle man uppdatera temat så kommer alla kodändringar du eller tidigare utvecklare gjort att försvinna. Detta gäller då speciellt om du använder dig av WooCommerce och om du använder dig av WooCommerce template-filer eller hooks i ditt tema.

Ett sätt att komma undan denna oro är att skapa ett barntema för att vara säker på att inga ändringar av koden är gjord i grundtemat.

Skapa ett child theme – så här gör du

Det du behöver göra är att skapa en map på din dator för temat. I vårt fall så skapar vi ett barntema till grundtemat Storefront från WooCommerce.

Döp din mapp till vad du vill men det brukar vara bra att inkludera att det är ett barntema så att andra förstår det direkt när de tittar över din sida. I mappen behöver du enbart skapa två filer för att du ska kunna få det att fungera.

• functions.php
• style.css

Du kan skapa dessa med hjälp av olika textredigeringsprogram som Notepad, Sublime Text etc.

Öppna textredigeraren och skapa en ny fil som du döper till style.css. Filen behöver innehålla följande text:

/*
 Theme Name: Storefront Child Theme
 Theme URI: http://example.com/storefront-child/
 Description: Storefront Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: storefront
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options
 Text Domain: storefront-child-theme
*/
/* Add your own css here */

Beroende på vad du har för grundtema så behöver du ändra:

Template: storefront

till just ditt grundtemas namn.

För att få WordPress att förstå att det är ett barntema och att vi ska hämta style.css från huvudtemat först så behöver du ladda style.css från huvudtemat i barntemats functions.php. Filen behöver då innehålla som minst följande kod:

<?php
/**
 * Storefront Child Theme Style setup 
 */
function my_theme_enqueue_styles() {

 $parent_style = 'parent-style';

 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 )
 );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Då laddas först grundtemats style.css och därefter barntemats style.css . Detta gör att alla ändringar du gör i barntemats style.css skriver över grundtemats styling.

Ladda upp temat till WordPress

När du har skapat dessa två filer i din mapp så behöver du lägga till dem på din hemsida. Det kan du göra på två olika sätt; antingen skicka upp det genom ftp/sftp eller göra en zip-fil av din mapp och sedan dra och släppa den zip-filen som en installation av ett nytt tema i WordPress admin.

Genom det här upplägget skapar du en miljö som innebär att du på ett tryggare sätt kan uppdatera huvudtemat när nya versioner blir tillgängliga och minska risken för att komplikationer uppstår.