Sådan laver du et WordPress Child theme

WordPress Child theme

Grunden til at jeg opretter et Child theme er fordi jeg gerne vil have at de tema ændringer jeg foretager efterfølgende bliver gemt ved opdatering af original temaet.

På den måde slipper jeg for hver gang der er større tema opdateringer, efterfølgende at gå ind og genskabe de ændringer jeg har foretaget.

1. Det første man skal gøre er at tilgå hjemmesiden via FTP, her navigere man ind til tema biblioteket i WordPress installationen.Hvis din installationen ligger i roden på sitet, ser det nogenlunde sådan ud:

/wp-content/themes/

2. Opret en ny og tom mappe også kaldet for et  bibliotek under themes.
Jeg vælger at oprette et tema kaldet frankroth-2017, så mit bibliotek kommer til at se sådan ud:

/wp-content/themes/frankroth-2017/

Jeg anbefaler altid kun at bruge små bogstaver til navngivning af biblioteket og af fil navne generelt, da det er det flest servere kan forstå

Store bogstaver, æ, ø, å og andre speciale tegn her under også mellemrum skal man holde sig fra når der oprettes filer eller biblioteker.

3. Gå ind i det nye bibliotek og opret en ny Stylesheet fil. Filen skal hedde style.css

/wp-content/themes/frankroth2017/style.css

Det er vigtigt at navnet style.css bruges til denne fil, da det er den fil WordPress kigger efter for at finde ud af hvad der gemmer sig i et bibliotek under /themes/frankroth2017 mappen.

Når et tema er aktivt inde i wp-admin, aflæses style.css filen for at afgøre hvorledes temaet tager sig ud.

4. Vi skal nu sørge for at vores nye mappe og ene fil faktisk ER et tema. Vi laver ikke et hele temaet, men vælger blot at refererer til det eksisterende tema og de elementer WordPress kræver af temaet. Det gør vi i tilfælde af, hvis WordPress ikke kan finde vores child theme mappe.

Et child theme har første prioritet i forhold til det original tema, derfor overskriver det css definitioner forældre temaet måtte have, med de definitioner man selv ønsker.

Her kan du se hele den tekst, eller KODE som du skal skrive ind i din tomme style.css

/*
 Theme Name: Divi child tema
 Author: Frank Roth
 Author URI: http://www.frankroth.dk
 Template: Divi
 Version: 1.0.0
 */
 /* =Dit child temas css overskrivninger starter her
 -------------------------------------------------------------- */

 

Alt tekst der står mellem en /* og en */ er en kommentar, og ikke noget kode andre systemer end WordPress bruger til noget.

“Theme name:” er dit selvvalgte navn til dit tema. Her må du gerne være vildere end frankroth2015, og det kunne f.eks. godt hedde frankroth child tema for 2017.

“Description:” er en forklaring til temaet som vises i wp-admin området under Udseende – Temaer, så her kan det betale sig at give en forklaring på hvad dette tema gør eller kan.

“Author:” er dit navn. Benyt gerne dit brugernavn fra WordPress.org, så folk kan finde dig hvis de gerne vil have hjælp 😉

“Author URI:” er en henvisning til hvor folk kan finde dig på nettet.  Det er måske ikke super relevant hvis du bare laver dit eget tema, men det er her du kan finde ophavsmanden til andre temaer du bruger.

“Template:” er SUPER VIGTIG, og skal være 100% lig med parent temaets biblioteksnavn. I mit tilfælde er det “Divi” med små bogstaver lige som biblioteksnavnet.

Det er blandt andet her vi fortæller WordPress at vi bygger dette tema oven på et andet, en template 😉

“Version:” ikke vigtig, men for kodenørder er det godt at holde styr på hvor mange gange man har været i gang med at ændre på ens kode 😉

For at give vores nye style.css fil vægt, skal den inkluders via en functions.php fil

Når vi sætter vores nye style.css fil i kø efter parent temaets style fil, vil vores child theme overskrive parent temaets styles.

functions.php filen oprettes på samme måde som style.css, og skal indeholde:

<?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 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')
 );
 }

Her beder vi WordPress sætte parent themets style.css i kø før vores child theme style.css.

Alt fra parent temaets style.css kommer altså til at stå før de CSS definitioner vi laver i vores child theme. Det er derfor vi kan overskrive et parent themes CSS.

Min style.css fil kommer med mit child theme navn til at se således ud:

/*
 Theme Name: frankroth2017
 Description: Divi Child Theme
 Author: Frank Roth
 Author URI: http://www.frankroth.dk
 Template: Divi
 Version: 1.0.0
 */
 /* =Theme customization starts here
 -------------------------------------------------------------- */

5. Når style.css og functions.php filerne er gemt, er det tid til at gå ind under:

Udseende > Temaer

Før musen hen over temaet med dit navn, og tryk på den grå “Aktiver” knap.

Skete der ikke noget specielt ? – Så har du gjort det hele rigtigt, og din side kører nu et tomt child theme, klar til dine egne CSS ændringer.

En anden metode

 

Hvis du måske syntes det lyder besværligt eller, du bare er for doven til at installere sætte et Child theme fra bunden, findes der også en anden mulighed. Der er flere udviklere der har programmeret gratis plug-ins der kan gøre for dig f.eks , hvis Child Theme Configurator plugin jeg selv har brugt flere gange.

Den tredje metode

 

Hvis man bruger Divi eller Extra som Parant theme, kan man som et alternativ til at benytte et plugin oprette et Child theme via forskellige online tjenester som f.eks.:

https://divi.space/divi-child-theme-builder/

Her udfylder man et skema og når man trykker på “GENERATE” bliver  der sendt en mail til dig, som indeholder et downloadlink til dit Child theme.

Så er der bare tilbage at installere Child themet som et hvert andet tema og aktivere det.

God fornøjelse