WordPress child thema hoe maak je die en waarom

Een WordPress child thema is een thema dat de functionaliteit van een bovenliggend thema overneemt. Het mooie van een child thema is dat men zonder zorgen wijzigingen kan aanbrengen en eventueel nieuwe functionaliteiten kan toevoegen.

Waarom een WordPress child thema gebruiken?

Het mooie van WordPress dat er vele thema’s zijn om de website een mooi uiterlijk te geven zonder dat men een uitgebreide kennis nodig heeft. Een nadeel is dat veel websites die met WordPress gemaakt worden er min of meer hetzelfde uitzien. We willen toch allemaal een unieke website nietwaar?

Hieronder een overzicht waarom men een WordPress child thema zou moeten gebruiken:

  • Als men aan een bestaand thema wijzigingen aanbrengt en er is een update (wat om veiligheidsredenen erg belangrijk kan zijn), dan gaan alle wijzigingen verloren. Met een child thema kan men dit voorkomen.
  • Het kost veel minder tijd dan een geheel nieuw thema te ontwikkelen.
  • Ook is het een geweldige manier om te leren hoe thema ontwikkeling binnen WordPress werkt.

Om het eenvoudig te houden, het originele thema behoudt zijn functies en eigenschappen totdat die door het child thema worden overgenomen.

Hoe een child thema te maken

Een child thema in WordPress maken gaat als volgt. Mij lijkt het leuk om een thema te gebruiken die nog niet veel mensen zullen gebruiken. Daarom kies ik voor het nieuwste WordPress thema Twenty Seventeen. Dit thema is nog niet beschikbaar in het WordPress thema archief aangezien dit het standaard thema van WordPress 4.7 gaat worden. Momenteel hebben we WordPress 4.7 beta draaien op: websitestesten.nl. Het thema Twenty Seventeen bevind zich in de volgende map: public_html/website/wp-content/themes. Omdat het nog niet een definitieve versie is heet het de map van het thema twenty-seventeen-master. In de thema map maak ik nu een map met de naam twenty seventeen master child aan. Wanneer ik nu in het dashboard bij thema’s kijk zie ik dat de map twenty seventeen master child er staat maar dat hij incompleet is. Er ontbreekt namelijk een Stylesheet.

De volgende stap is dus om in de thema map een bestand met de naam style.css aan te maken. Bekijk de code die ik in de stylesheet heb ingevoerd:

/*
 Theme Name:   Twenty Seventeen Master Child
 Theme URI:    https://webesitestesten.nl/twentyseventeen-master-child/
 Description:  Twentyseventeen Child Thema
 Author:       Rudy Deelen
 Author URI:   https://weblog.prwebservices.nl
 Template:     twentyseventeen-master
 Beschrijving: Twentyseventeen child thema is gebaseerd op het Twentyseventeen thema
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:        one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  Twentyseventeen-master-child
*/

Functions.php

Ik heb nu het stylesheet van mijn nieuwe child thema klaar. Maar wanneer ik het ga testen dan zie ik dat hij nog niet helemaal goed werkt. Om het WordPress child thema goed te laten werken is het nodig om een bestand met de naam functions.php aan te maken. Zie hieronder het voorbeeld van het functions.php wat ik ga gebruiken:

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

}
?>

Dit stukje code zorgt ervoor dat alle afhankelijkheden van het originele thema door het child thema worden overgenomen. Maar we maken een child thema niet voor niks. De kans is groot dat er in het stylesheet nieuwe css regels moeten worden toegevoegd en dat die in de juiste volgorde worden geladen. Dus na de regels van het originele thema. Hiervoor worden de volgende regels aan het functions.php bestand toegevoegd:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // Dit is 'twentyseventeen-style' voor het Twenty Seventeen thema.

    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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Zo het WordPress child thema is nu klaar voor gebruik en we kunnen nu naar hartenlust veranderingen aanbrengen. Wanneer je bijvoorbeeld de copyright tekst in de footer wil veranderen dan kopieer je eenvoudig het footer.php vanuit het originele thema naar het child thema waar je de footer dan rustig kunt aanpassen. Zo werkt dat ook als je het header.php bestand wil aanpassen.

Meer informatie over het maken van child thema’s kun je vinden op: wordpress.org

Geef een reactie