Child theme maken

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

Child theme onderdelen

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.

Voor meer informatie over de stylesheet header, zie de Theme Development pagina op wordpress.org.

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.

Laden child theme stylesheet

Om er voor te zorgen dat de stylesheet van je child theme gebruikt wordt, moet je functie opnemen in functions.php. Er zijn twee manier: automatisch en handmatig.

Automatisch laden

Staat er geen custom CSS in je child theme stylesheet, dan kun je de volgende functie gebruiken:

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' );
}

Handmatig laden

Staat er in je child theme stylesheet wel custom styling, dan gebruik je beter de volgende functies (zie hieronder). Deze functie zorgt voor twee dingen. Laad eerst de stylesheet van je parent theme en pas daarna die van je child theme. Dit zorgt ervoor dat wijzigingen die je wilt aanbrengen met je child theme ook daadwerkelijk weergegeven worden. Bij CSS is 'cascading', dat wil zeggen dat op volgorde wordt uitgevoerd. In dit geval wil je je child theme stylesheet als laatste laden.

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

De naam van de functie en variabelen kun je uiteraard naar eigen inzicht aanpassen.

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:

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' );

screenshot.png

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 / verder lezen