Child theme maken

Wat zijn de stappen die je moet volgen om een child theme te maken?

Onderdelen Child theme

Een Child theme heeft tenminste de volgende onderdelen nodig:

  • child theme folder
  • stylesheet: style.css
  • functions.php

Dat is het minimum. Om je Child theme een gezicht te geven is het ook goed een screenshot.png te maken.

Child theme folder

De folder waarin je je child theme bestanden komen, plaats je in de folder wp-content/themes. De naam van je child theme folder heeft één voorwaarde: geen spaties. Verder ben je vrij welke naam te kiezen. Het kan handig zijn dat de naam verwijst naar het parent theme.

Voorbeeld:

  • naam parent theme: ocean
  • naam child theme: ocean-child, oceanchild, ocean-artic, articocean

Alle child theme namen zijn geldig.

Child theme stylesheet: style.css

Deze stylesheet bevat alle CSS opmaakregels voor je child theme. De stylesheet begint met een lijst comments waarin informatie over het child theme staat. Deze stylesheet header is bijna gelijk met die van een 'gewoon' theme.

Eenvoudig voorbeeld van een child theme stylesheet header:

/*
 Theme Name: Artic Ocean
 Description: Ocean Child Theme
 Author: Wouter van der Zee
 Author URI: http://www.woutervanderzee.nl
 Template: Ocean
 Version: 1.0
*/

De Template comment is verplicht voor een child theme. Bij de Template comment vul je de naam van de parent theme in. Dit is exact dezelfde naam als de folder van je parent theme.

Dus in dit voorbeeld ziet de theme folder er als volgt uit:

  • wp-content/themes:
    • ocean
    • ocean-child

Voor meer informatie over de stylesheet header, zie de Child Theme WordPress Codex pagina.

Child theme functions.php

Functions.php is nodig om de stylesheets van de parent en child theme goed te laden. Hiervoor maak je gebruik van de WordPress  wp_enqueue_scripts action en de wp_enqueue_style() functie.

Automatisch laden parent theme stylesheet

De eerste, meest eenvoudige voorbeeld:

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

Aanname hierbij is dat de parent theme maar één stylesheet gebruikt, namelijk style.css en dat deze automatisch geladen wordt.

Handmatig laden parent theme stylesheet

Een tweede, wat uitgebreider voorbeeld:

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
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 )
 );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Deze code zorgt ervoor dat:

  • de parent theme stylesheet geladen wordt
  • de child theme stylesheet geladen wordt NA die van de parent theme

Laden child theme stylesheet als allerlaatste

Sommige parent themes gebruiken meerdere stylesheets. Om ervoor te zorgen dat je child theme stylesheet als allerlaatste wordt geladen, kun je de volgende code toevoegen aan je functions.php:

// add 15 for priority argument so stylesheets loads latest add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 15 );

Stylesheet parent theme verwijderen

Het kan zijn dat er een stylesheet wordt geladen in je parent theme, die je niet wilt gebruiken. Bijvoorbeeld een stylesheet voor het laden van Google FontsJe kunt eenvoudig een Google Font naar keuze laden via de enqueue functie., terwijl je zelf een ander font wilt gebruiken. Hiervoor gebruik je de  wp_dequeue_style() functie.

Een voorbeeld van deze functie:

wp_dequeue_style( 'stylesheet-name' );

Daarbij vervang je stylesheet-name met de naam van de stylesheet die je wilt verwijderen.

Deze functie kun je opnemen in de theme_enqueue_style functie zoals eerder weergegeven:

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
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 )
 );
 // dequeue parent stylesheet
 wp_dequeue_style( 'stylesheet-name' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

bronnen: Loading CSS Into WordPress the Right Way op tutsplus.com Adding Scripts and Styles to WordPress the Right Way With Enqueueing op wpmudev.org Function Reference: wp dequeue style op wordpress.org 

Screenshot.png, het gezicht van je child theme

Screenshot.png is de afbeelding die wordt weergegeven in het Thema's overzicht in je WordPress CMS. Het is niet verplicht - je child theme gaat niet stuk - maar het ziet er wel zo leuk uit. Voor het maken van je child theme screenshot.png gelden de volgende regels:

  • afmetingen: 880 x 660 px.
  • formaat: .png
  • locatie: hoogste niveau van je child theme folder

Bronnen:

Child Themes pagina van de WordPress Codex