Wordpress child themes: import css van de parent

Het is goede praktijk om niet in de oorspronkelijke code te rommelen maar wijzigingen wanneer mogelijk altijd in een "overlay" te plaatsen. Dit "override" principe is in Drupal gemeengoed maar is in Wordpress wat minder ingebakken. Bij het gebruik van thema's kan het echter wel worden toegepast door gebruik te maken van "child themes". Dit zijn thema's die een ander thema als basis gebruiken.  

Een child theme maken

Dit is erg eenvoudig. Maak een nieuw thema aan door in de map wp-content/themes een nieuwe map te maken met de naam van je nieuwe thema: in dit voorbeeld maken we voor het thema "gemeen" dus een map aan met diezelfde naam.

Maak in deze map een bestand aan met de naam style.css en 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 definiëren die de templates importeert van Thematic

CSS koppelen

De CSS bestanden uit het parent thema kunnen in dit stylesheet worden geïmporteerd. Dit heeft echter tot nadeel dat de CSS bestanden sequentieel, dus een voor een na elkaar worden geladen. Beter is het om de stylesheets met HTML style tags aan te roepen. Ze worden dan parallel en dus sneller geladen worden.

Dit kan worden gerealiseerd door ze niet binnen het stylesheet maar in functions.php aan te roepen. Daarvoor moet dan het bestand functions.php in onze thema directory worden gemaakt met daarin het volgende code fragment:


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

Reactie toevoegen