Maak een child theme met wordpress

223

Een child theme wordt aangemaakt om wijzigingen aan te brengen in de huidige layout, met behoud van de huidige stijl en functies. Het thema waarop je je gaat baseren wordt de “parent theme” genoemd.

Voordelen van een child theme

  • Bij het updaten van een thema kunnen de wijzigingen verwijderd worden, opdeze manier hou je dat tegen
  • Het gaat vlugger om een bestaand thema te wijzigen, dan een nieuwe aan te maken
  • Een goeie manier om te experimenteren en te leren

Hoe?

Er zijn 2 manieren:

Via plugins ( vlug)

  • Installeer de plugin: “Child Theme Configurator”
  • Ga naar hulpmiddelen en selecteer “Child themes”
  • Druk op “Analyze” en wijzig de Child attributes naar uw smaak
  • Druk op Configure Child Theme

Manuele manier ( leerzamer, trager)

Ga naar het pad wp-content/themes in je wordpress installatie. Maak daarin een map aan, mijn-thema-child. Gebruik geen spaties in uw thema naam.

Hierin zijn 2 bestanden nodig, de stylesheet style.css en functions.php

Voorbeeld style.css

/*
Theme Name: WebXpert Child
Theme URI: https://www.webxpert.be
Template: Newspaper //komt overeen met de mapnaam van het parent-theme!
Author: Nico Sap
Author URI: http://www.sapico.me
Tags: black,white,one-column,two-columns,fixed-layout
Version: 8.1.1505891997
Updated: 2017-09-20 07:19:57
*/

Voorbeeld functions.php ( met parent theme css)

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

Voorbeeld functions.php ( met parent theme css en eigen css in het thema

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

Op het einde van bovenstaande aanpassingen, moet je het volgende bekomen:

Hoe werkt het?

Als WordPress een layout zoekt voor een bepaalde pagina, zal deze de layout of functionaliteit eerst zoeken in de child theme.

Als deze daar niet gevonden wordt, gaat het de layout of functionaliteit zoeken in de parent theme.

DUS….

Wil je bepaalde functionaliteit aanpassen? Kopiƫer het bestand naar de child theme en pas het daar aan.

Verdere informatie op de website van wordpress