In deze tutorial gaan we een Child Theme maken. Een Child Theme maken is niet lastig en kan je later een hoop ellende besparen. In dit artikel ga ik je eerst uitleggen wat een Child Theme is. Daarna gaan we er zelf een maken.
Wat is een Child Theme
Een Child Theme is een theme bovenop een andere theme. Stel je voor dat je Twenty Eleven gebruikt als theme voor je website en je wilt dat de tekst vergroot wordt naar 16px. Je kunt dan in de theme bestanden duiken en in style.css wat codes aanpassen. Probleem opgelost? Helaas, als je zo aanpassingen aanbrengt op je website zullen deze verdwijnen bij een update van de theme.
Om te voorkomen dat je aanpassingen verdwijnen bij een update kun je kiezen voor een Child Theme. Dit is een theme waarbij alleen de style.css verplicht is. In de style.css zet je dan de aangepaste codes. Deze zullen niet worden verwijderd als je de basistheme update.
Een Child Theme maken
Om een Child Theme te maken moet je toegang hebben tot je WordPress bestanden. Log in met bijvoorbeeld FTP en ga naar je wp-content folder. Ga in de folder ’themes’ en maak zelf een nieuwe folder aan. In dit voorbeeld gaan we een Child Theme maken voor Twenty Eleven. Geef je folder een herkenbare naam. Ik geef hem nu ’twentyeleven-child’.
Tip: Onthoud hoe je basistheme heet in de ’themes’ folder. Heet je theme op de WordPress dashboard bijvoorbeeld Twenty Eleven, in de folder ’themes’ heet hij ’twentyeleven’. Let hier dus goed op.
Nu moeten we een bestand toevoegen aan de twentyeleven-child folder. Open een text-bewerker (zoals Kladblok of een html-editor, géén Word of iets dergelijks) en voeg de volgende code toe:
/* Theme Name: Twenty Eleven Child Theme URI: https://www.wphulp.nl/ Description: Child Theme voor Twenty Eleven Author: Marijn Bent Author URI: https://www.wphulp.nl Template: twentyeleven Version: 1.0 */
Voordat je dit kunt gebruiken moet je nog een aantal dingen aanpassen. Als eerste kun je de naam veranderen. Het maakt niet uit wat je hier typt. Verder kun je de theme url, beschrijving, auteur en auteur url aanpassen. Let wel even op bij ‘Template’. Zet hier de naam neer van de theme die je in de map ’themes’ zag. Als je hier een typfout maakt dan werkt je child theme niet. Doet deze het dus niet aan het eind van dit artikel, check dit als eerst.
Nu je alles hebt aangepast kun je het bestand opslaan als style.css en uploaden naar je server. Je zult de theme nu kunnen activeren onder ‘Weergave’ –> ‘Thema’s’. Als je nu naar je website gaat zul je zien dat dit niet is zoals jij wilde. De opmaak is helemaal weg. Om je theme weer te laten functioneren zoals hij eerst deed moet je nog een regel code toevoegen aan je style.css.
@import url("../twentyeleven/style.css");
Weer geldt, verander ’twentyeleven’ met de naam van de theme die je onder ’themes’ zag en plak deze code onder de informatie van net. Je style.css ziet er nu zo uit:
/*
Theme Name: Twenty Eleven Child
Theme URI: https://www.wphulp.nl/
Description: Child Theme voor Twenty Eleven
Author: Marijn Bent
Author URI: https://www.wphulp.nl
Template: twentyeleven
Version: 1.0
*/
@import url("../twentyeleven/style.css");
Als je dit bestand nu upload naar je server en naar je website gaat, zul je zien dat hij er nu weer uitziet zoals normaal.
Nu kunnen we beginnen met het toevoegen van je eigen CSS. Heb je weinig verstand van CSS? Download dan de browser Google Chrome. In de geanimeerde afbeelding hieronder zie je hoe je de browser kunt gebruiken om aan de goede code te komen.
Met CSS code kun je erg veel doen. Heb je hulp nodig, reageer hieronder of stuur een email via de contact pagina.
