Créer un thème enfant

Un des avantages de la création d'un thème enfant, c'est que vos fonctionnes de votre functions.php pourraient être mises à jour, donc la sécurité est maintenue, sans appliquer des changements sur votre style ou nouvelles structures dans les fichiers.

Les étapes pour créer un child theme (thème enfant) :

Nouveau dossier

Créez un nouveau dossier dans la répertoire /wp-content/themes/, juste où votre thème parent se trouve. Nommez le nouveau dossier du même nom comme votre thème parent et rajoutez le suffixe -child. Dans notre cas on va créer un thème enfant du thème twentyfifteen, donc le dossier de notre thème enfant sera nommé twentyfifteen-child.

 

Le premier fichier obligatoire : la feuille de style (stylesheet)

Copiez la feuille de style de votre thème parent et rajoutez cette copie au dossier du thème enfant, ou vous pouvez créer une feuille de style blanche et rajouter seulement les éléments modifiés ou bien les nouveaux styles. Nommez obligatoirement le fichier style.css. Il faut juste modifier l'entête du fichier comme les suivants :

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://exemple.com/wp-content/themes/twentyfifteen-child/
Description: Child theme for the Twenty Fifteen theme
Author: Votre nom
Author URI: http://votre-site-perso.com/
Template: twentyfifteen
Version: 1.0.0
Text Domain: twentyeleven-child
*/

Comment procède le système avec la vérification du style? Le système vérifie d'abord le style.css original du thème parent, puis il ignore les codes qui existent dans la nouvelle feuille du thème enfant.

Le deuxième fichier obligatoire : le functions.php

Créez un nouveau fichier .php, nommez le obligatoirement functions.php.

Ce document est vérifié par le système de la même manière que la feuille de style, ça veut dire que le functions.php du thème parent et celui du thème enfant, les deux sont chargés. Pour commencer, vous devez rajouter d'abord des codes pour appeler le functions.php du thème parent, puis des nouvelles fonctions que vous ne voulez pas perdre à la prochaine mise à jour du thème parent.

Pour appeler le functions.phph du thème parent (ou plutôt le mettre dans une queue d'attente), rajoutez les codes suivants :

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

Modifier les autres fichiers

Supposons qu'on voudrait rajouter une image d'entête dans toutes les "single" pages. Pour faire ça, vous êtes obligé de recopier le fichier page.php du thème parent (avec le même nom !) dans votre répertoire du thème enfant. Il faut savoir que contrairement aux style.css et functions.php, les autres fichiers ne sont pas chargés des deux répertoires, mais seulement de la répertoire où le fichier existe, le dossier du thème enfant est en priorité.

Dans ce fichier, on ne doit pas changer des codes, juste rajouter ce que vous voulez, par exemple une image (<img src="" alt="" />) entre les balises "content". En détectant ce fichier dans le dossier du thème enfant, celui du thème parent ne sera pas chargé.

Si vous avez un thème enfant du thème Twenty Eleven

Ce thème appelle les style.css différemment, d'abord celui du thème enfant qui se charge, puis l'autre. Dans ce cas les styles du thème parent vont ré-écrire les styles du thème enfant. Pour éviter ce cas, on rajoute une ligne de codes dans les codes mentionnés ci-dessus dans le functions.php du thème enfant :

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Pour le moment j'ai des soucis avec les pages personnalisées (templates) dans mon thème enfant. Quand je vais avoir la solution, je vais partager avec vous en continuant cet article.

Les commentaires sont fermés.