Sådan laver du et child theme i 5 simple skridt

Det er virkelig ikke så svært, så nu jeg står og skal lave et child theme til mit Twenty Fifteen tema, kan du jo lige så godt se med

Grunden til at jeg opretter et child theme er fordi jeg gerne vil have et logo (billede) ind i sidebaren istedet for temaets standard sidetitel og tagline som du kan ændre under Udseende > Tilpas, i wp-admin.

Under Udseende > Tilpas finder du din sidetitel som er navnet på din hjemmeside, og mulighed for en beskrivelse.
Under Udseende > Tilpas finder du din sidetitel som er navnet på din hjemmeside, og mulighed for en beskrivelse.

Jeg vælger at lade felterne, og især beskrivelsen være udfyldt og afkrydset til at blive vist i headeren, selvom jeg rent faktisk kommer til at fjerne dem i mit kommende child theme. Det gør jeg for at bruge felterne her til at give min side en meta beskrivelse som måske kan hjælpe lidt på SEO’en ;)


Nu er vi klar til at oprette de filer et Child tema består af.

Faktisk er det kun en fil, nemlig style.css altså en cascading style sheet fil som skal ligge i et bibliotek med det navn du gerne vil have at dit child theme skal hedde.

UPDATE:

Tiderne skifter og min viden skulle lige opdateres, så selvom videoen her viser noget der fungerer, så anbefaler WordPress nu at man enqueuer (sætter i kø) ens style sheet filer, og ikke laver en @import som var den gamle måde.

For at få det til at lykkedes er det nødvendigt at have en functions.php fil i ens child theme også. Så artiklen er så den reflektere denne best practice.

Se en video af mig der går gennem de 5 skridt på ca 35 sekunder ;)
#oldschool @import måde – fyfy…

 

1.

Via FTP, f.eks. FTP programmet FileZilla skal du navigere ind til dit tema bibliotek i din WordPress installation.

Det ser nogenlunde sådan ud:

/wp-content/themes/

Vær opmærksom på at der godt kan være et par biblioteker FØR dine WordPress filer når du browser dig frem til dem via FTP, f.eks. WWW/ eller HTDOCS/.

 2.

Opret et nyt og tomt bibliotek under themes/. Jeg vælger at oprette et tema kaldet dejliglama2015, så mit bibliotek kommer til at se sådan ud:

/wp-content/themes/dejliglama2015/
Læg mærke til at dejliglama2015 er åbent, men tomt
Læg mærke til at dejliglama2015 er åbent, men tomt.

Jeg anbefaler at bruge små bogstaver hele vejen gennnem ens biblioteks og fil navne generelt, da det er det flest servere kan forstå.

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

3.

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

wp-content/themes/dejliglama2015/style.css

style.css fil oprettet men tomNavnet style.css er vigtigt, da det er den fil WordPress kigger efter for at finde ud af hvad der gemmer sig i et bibliotek under /themes 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, men vi laver ikke et helt tema, men vælger blot at refererer et eksisterende tema for de elementer WordPress måtte kræve af et tema, hvis de da ikke findes i vores child theme mappe.

En gang til – altså, vi laver et tema, men siger til WordPress – “HEY, hvis du ikke kan finde de filer du plejer at bruge til at vise et tema, så kig lige i den her mappe.” Vi skal altså angive den her anden mappe, også kaldet parent mappen, eller parent theme.

WordPress vil i vores tilfælde så kigge efter ALLE andre filer end den ene vi har lavet, nemlig style.css. Og faktisk vil WordPress ikke nøjes med at kigge på filerne, men også inde i dem, så selvom vi har style.css så har parent temaet jo også en style.css. Dens design elementer, altså css’en vil gøre sig glædende i alle de tilfælde hvor vores child theme IKKE har en css definition.

Et Child theme overskriver på den måde de  CSS definitioner et parent tema måtte have.

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

/*
Theme Name: Twenty Fifteen Child
Description: A Twenty Fifteen Child Theme
Author: DejligLama
Author URI: http://example.com
Template: twentyfifteen
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 dejliglama2015, og det kunne f.eks. godt hedde DejligLama child tema for 2015.

“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, gerne dit WordPress.org brugernavn 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 “twentyfifteen” 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 igang med at ændre på ens kode ;)


For at give vores nye style.css fil vægt, skal den enqueues 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: DejligLama 2015
Description: Et Twenty Fifteen Child Theme
Author: DejligLama
Author URI: http://dejliglama.dk
Template: twentyfifteen
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.
Aktiver dit child theme

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 (og meget mere).

 

Kan du selv finde rundt på din hjemmeside ?

Du kender det sikkert selv, man kommer ind på en hjemmeside, og så kan man ikke finde det man kom der for…

Det sker typisk hvis hjemmesiden ikke har et klart formål, eller efter længere tid hvor indhold har fået lov til at få hjemmesiden til at “sande til”; altså at vi har indhold liggende lidt på må og få, så det forstyrrer mere end det oplyser og vejleder.

Når vi bygger hjemmesider er et “See/ Do” flow diagram et godt værktøj til at skabe et nødvendigt overblik på hjemmesidens kommende struktur, også inden vi overhovedet har skrevet en linje kode, designet eller forfattet en smart tekst…. det er smart.

Start med forsiden

Udfyld de to elementer See; hvad en besøgende ser, og Do; hvad en besøgende kan gøre på netop den side, for at komme videre ind til dit indhold.

For hver ny side, eller ting en besøgende kan (Do) som kræver lidt beskrivelse men ikke nødvendigvis en hel ny side, laver du en ny See/ Do. Efterhånden hænger dine See/ Do-papirlapper sammen, og danner grundstrukturen for din hjemmeside.

Det er OK, ikke at udfylde det hele på en See/ Do inden du går til næste – kom tilbage til en side når det giver mening i forhold til det flow du gerne vil understøtte på din hjemmeside. Husk også at en side på din hjemmeside kan have flere formål og derfor være en del af flere flows.

Har du allerede en side som er lidt svær at bruge

Så det er også en god test for at finde ud af om din hjemmeside hjælper til at opfylde formålet (MÅLET) med hjemmesiden… kan folk finde derhen hvor du gerne vil have dem, f.eks. en køb eller kontakt knap ?

 

Gratis download lige her

Download min See-Do-skabelon lige her, og kom igang NU.

Jeg lever af at rådgive om WordPress og online strategi. Har jeg hjulpet dig videre, må du gerne hjælpe mig, ved at give mig en kommentar med på vejen her eller på facebook.

Jeg hjælper dig selvfølgelig også gerne igang med dit See/ Do træ.