WordPress Child-Theme maken

Een WordPress child theme is een thema dat alle functionaliteit erft van een ander thema. Het stelt in staat een bestaand thema aan te passen of functionaliteit toe te voegen zonder het Parant theme in de code aan te passen. Erg handig om te voorkomen bij updates van het Parent theme functionaliteit en/of style elementen worden overschreven.

Een child theme maken is vrij simpel, maak een directory knal er een style.css file in en dat is het eigenlijk al. Natuurlijk kan het veel uitgebreider en complexer… maar in essentie is dit al een child theme.

Het child theme staat in zijn eigen directory in wp-content/themes. Als voorbeeld nemen we Twenty-Eleven, het standaard WordPress thema die je bij een installatie van WordPress krijgt meegeleverd.

Stap 1
Maak een map twentyeleven-child in public_html/wp-content/themes

Stap 2
Maak (de verplichte) style.css file aan, en open dit stylesheet bestand
Buiten de CSS file is het optioneel om bestanden als functions.php / template files er bij te zetten. Bij het modificeren van een thema zal blijken welke files je wilt aanpassen. Deze zet je dan van de parent naar het child theme zodat deze wordt overschreven.

Stap 3
Begin je style.css file met de volgende lijnen code:

/*
Theme Name: Twenty Eleven Child
Theme URI: http: //mijnurl.com/
Description: Beschrijving van het thema
Author: Paul te Kortschot
Author URI: http: //example.com/about/
Template: twentyeleven
Version: 0.1.0
*/

Theme Name (naam van het child theme) en Template (directory van het parent theme) zijn verplicht, de rest is optioneel. Dit zijn tevens de gegevens die in het Dashboard bij de thema’s zichtbaar zijn.

Stap 4
Voeg onder de header van je child css file (stap 3) de volgende regel tekst:

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

Dit importeert de parents stylesheet, onder deze regel kan je gewoon stylesheet regels toepassen. Boven deze regel en onder de header mogen geen CSS regels staan. De browser zal namelijk eerst je custom CSS lezen en vervolgens de parent CSS laden welke je custom CSS weer overschrijft. De eerste aantal regels van een child theme’s CSS file kan er dus als volgt uitzien:

Theme Name: Mijn eigen thema
Theme URI: http: //mijnurl.com/
Description: Child theme for the Twenty Eleven theme
Author: Je naam
Author URI: http: //mijnurl.com/overmij/
Template: twentyeleven
Version: 0.1.0
*/

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

div#site-wrapper { background-color: #fff; border: 1px solid #000; }

Stap 5
Laad in het Dashboard het child theme, Dashboard > weergave > themes