een WordPress

Het Engelse woord 'child' suggereert al wat een childtheme zou kunnen zijn: het thema heeft een 'ouder'. Het thema werkt dan ook samen met het parenttheme om de site te presenteren.Een childtheme bevat net als een gewoon thema een mapje. Daarin zit in ieder geval style.css. Deze begint weer met een aantal commentaarregels, die het thema laat (samen)werken binnen WordPress.

Waarom een childtheme?

Themes ontwikkelen voor WordPress kan nogal ingewikkeld en tijdrovend zijn als er veel specifieke eisen aan het thema gesteld worden. Je zou dan natuurlijk een bestaand thema kunnen kiezen en deze vervolgens met je eigen code aan je wensen aanpassen.
Dit heeft een belangrijk nadeel. Omdat WordPress zo polulair is, moet er extra aandacht aan beveiliging besteed worden. Daarom zijn er geregeld updates. Als je jouw thema niet update loopt jouw site dus onnodig risico's.

Een update overschrijft echter het thema en je moet dan opnieuw alle code weer door en aanpasen naar jouw wensen.
Het is duidelijk dat dit niet wenselijk is.
In jouw child-theme staan alle aanpassingen op het parenttheme. Dit parentheme kun je vervolgens geregeld een update geven. Jouw wijzigingen, die in het childtheme staan, blijven dan gewoon werken. Je hebt dus een functionele veilige site, die alle updates moeiteloos meepikt.

1. Maak een keuze voor het parenttheme
2. Maak een mapje in de thema-map van WordPress en geef dat een naam van je childtheme. Tot nu toe is het dus net alsof je zelf een thema gaat maken. In dit mapje kun je misschien al een screenshot.png afbeelding plaatsen als je al een screenshot kunt maken, anders doe je dat bij de afronding van deze opdrachten.
3. Dit mapje bevat in ieder geval style.css.
   Misschien verbaast je dat niet. Wat wel frappant is dat index.php niet altijd noodzakelijk is.
4. style.css begint met de volgende commentaar-regels:
   

   /*
    Theme Name:   De naam van het childtheme
    Theme URI:    http://linkNaarMijnChildthemeSite
    Description:  De beschrijving van mijn childtheme
    Author:       Theo den Blanken
    Author URI:   http://blanken5.home.xs4all.nl/
    Template:     twentyfifteen
   */
           

   De laatste regel verwijst naar het parenttheme. Het is de naam van het mapje van het parenttheme.
5. Importeer de style.css van het parent-theme in jouw style.css met de volgende code:

               @import url('../twentyfifteen/style.css');
           

   Je ziet aan de url-verwijzing dat je eerst jouw thema-mapje verlaat, en vervolgens de map van het parenttheme ingaat op zoek naar style.css. Alle stijlregels die je hierna toevoegt, vullen dan de stijlregels van het parenttheme aan of over overschrijven die.
6. Je kunt nu ook andere php-bestanden maken: index.php, header.php, footer.php en sidebar.php zullen de versies van het parenttheme vervangen. Je verwijdert dus elementen daaruit of voegt die eraan toe.
   Als je een functions.php in je childtheme plaatst, vult die de functions.php van het parenttheme aan.

Er is toch nog een belangrijk verschil met het maken van een eigen thema als je een childtheme maakt. Dat manifesteert zich als je wilt verwijzen naar je eigen (childtheme-)map. Als we met bloginfo('template_directory') werken, blijkt dat toch de map van het parenttheme wordt gekozen.

Om je eigen map te vinden ga je naar functions.php en voeg je de volgende php code toe:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>