Press "Enter" to skip to content

Een verbeterde vorm voor het maken van een WordPress Child Theme met functions.php

Een tijdje terug is de WordPress Codex pagina over het aanmaken van Child Themes aangepast. Er is met name een verandering gemaakt hoe je de stylesheet van het hoofdthema in je child theme aanroept.

Er is veel mysterie en onduidelijkheid over de vraag waarom dit onlangs door WordPress is aangepast. Hieronder lees je wat er verandert is en waarom.

De oude manier hoe je een Child Theme aanmaakt

Dit was de oude manier hoe je een child thema kon aamaken: (voor het Twenty Fourteen thema)

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
 -------------------------------------------------------------- */

De nieuwe Codex over hoe je een WordPress Child Theme met functions.php aanmaakt

WordPress Child ThemeDe WordPress Codex geeft een goede uitleg hoe je vanaf heden een Child Theme kan aamaken.
De nieuwe vorm wijkt op het eerste gezicht niet veel af van de oude manier. In het voorbeeld maak ik een Child Theme aan voor het Twenty Fifteen thema.

Maak een map aan in de thema folder en geeft deze een naam, bijvoorbeeld twentyfifteen-child. Vervolgens maak je in die map een bestand aan genaamd style.css. In dat bestand plak je onderstaande code:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Wat meteen opvalt is dat deĀ @import regel ontbreekt waarmee de stylesheet van het hoofdthema wordt opgehaald. Volgens de WP Codex is dit niet langer de beste manier. Om de stylesheet van het hoofdthema in je Child Theme op te halen kun je nu gebruik maken van wp_enqueue_script() in de functions.php van je Child Thema.

Je maakt hiervoor in de map van je Child Theme een nieuw bestand aan, genaamd functions.php en je zet daar deze code in:

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_uri(), array( 'parent-style' ) );
}

Deze code zorgt ervoor dat de stylesheet van het Child Theme onder de stylesheet komt van het Hoofd Theme en dus de styles van het Hoofd Theme overschrijft.

Waarom is wp_enqueue_script() beter dan @import?

Het is met name dat op deze manier de snelheid van je website wordt verhoogd. Moderne browsers laden alle stylesheets van een website parallel na elkaar in. Als de functie @import word gebruikt dan is dat niet het geval. De bedenker van deze nieuwe vorm Konstantin Kovshenin zegt hierover:

De browser moet eerst de eerste.css downloaden, parsen en uitvoeren voordat het ontdekt dat het de tweede.css moet downloaden.

Hij gaat verder:

Dat betekent dat in plaats van 200 milliseconden, de @import ervoor zorgt dat de webbrowser er 400 milliseconden over doet om beide stylesheets te laden.

Dat scheelt dus enorm in de snelheid van je website. Dus alleen daarom al zullen de makers van WordPress deze manier boven de oude manier hebben gesteld.

Marco van der Ziel
Marco van der Ziel

View all posts

Geef een reactie