Wordpress theming

Werken met Child themes: import css van de parent

Een child theme maken

Maak een niewu thema aan door in de map wp-content/themes een nieuwe map te maken met de naam van je nieuwe thema: in dit voorbeeld het thema gemeen.

Maak in deze map een bestand aan met de naam style.css rn plaats daar onderstaande code in:

/*
Theme Name: Gemeen
Description: A Child Theme of Fusion
Template: Thematic
*/

Dit is genoeg om een nieuw thema Gemeen te definieren die de templates importeert van Thematic

CSS koppelen

De CSS bestanden uit het parent thema kunnen in dit stylesheet geimporteerd worden. Dit heeft echter tot nadeel dat de CSS bestanden sequentieel, dus een voor een na elkaar worden geladen. Wanneer de stylesheets met html style tags worden aangeroepen zullen ze parallel en dus sneller geladen wordem.

Dit kan eenvoudig worden gedaan door ze niet in het stylesheet maar via functions.php te laten laden. Daarvoor moet dan het bestand functions.php in de thema directory worden gemaakt waarin de volgende code wordt geplaatst:


function childtheme_create_stylesheet() {
  $templatedir = get_template_directory_uri();
  wp_enqueue_style( 'reset', $templatedir . '/css/reset.css' );
  wp_enqueue_style( 'base', $templatedir . '/css/base.min.css' );
  ...
  ...
}
add_filter('wp_enqueue_scripts', 'childtheme_create_stylesheet');