Comment créer un thème enfant ?

La structure de base

Si on s'attarde un peu sur la structure de votre site, vous savez que vos thèmes sont situés dans le répertoire suivant : /wp-content/themes/

Dans cet exemple, nous allons identifier le thème parent fictif positionné dans : /wp-content/themes/vador/ et qui s’appellera “Dark vador”.

Ce thème contient tous les fichiers d'un thème “normal”, c'est à dire au minimum une feuille de style (style.css), les fichiers modèles (index.php, page.php, etc...), le fichier des fonctions (functions.php) et éventuellement d'autres fichiers comme des ressources (images, librairies, etc...).

Étape 1 – Créer le répertoire du thème enfant

La première étape pour créer votre thème enfant est de créer un répertoire pour celui-ci. Avec l'aide d'un client FTP ou directement sur votre serveur si vous l'administrez à la “mano” ou en local, vous allez devoir créer un nouveau répertoire qui, dans notre cas, portera le nom : “luc”.

Ce répertoire va devoir être créé ici : /wp-content/themes/luc/

Une fois le répertoire créé, on passe à l'étape suivante.

Étape 2 – Créer une feuille de style “enfant”

La deuxième étape pour créer votre thème enfant est de générer une feuille de style qui va indiquer que ce nouveau thème est... justement un thème “enfant” de votre thème “parent”.

Voici le code à utiliser pour cette feuille de style :

1
/*
2
 Theme Name:   Luc Skywalker
3
 Theme URI:    https://www.polenumerique.re/dl2017/devlog.exx/monSite
4
 Description:  Description de mon thème enfant
5
 Author:       Stagiaire DL 2017
6
 Author URI:   https://www.polenumerique.re/dl2017/devlog.exx
7
 Template:     twentyseventeen
8
 Version:      1.0.0
9
*/

  • Theme Name : Le nom du thème que vous allez créer.

  • Theme URI : L'adresse où l'on peut télécharger celui-ci si vous faites une release.

  • Description : La description du thème.

  • Author : L'auteur du thème... y mettre votre nom.

  • Author URI : L'adresse où l'on va retrouver des infos sur l'auteur.

  • Template : Le thème parent qui va être utilisé. Il faut y mettre le nom du répertoire de celui-ci.

  • Version : Si vous tenez des numéros de version (c'est mieux), c'est par ici que cela se passe.

Étape 3 – Importer le style du thème parent

Pour cela vous allez devoir créer un fichier « functions.php ».

À l'intérieur, entrez le code suivant :

1
<?php
2
/** On indique qu'il faut charger notre feuille de style du thème enfant**/
3
function my_enqueue_styles(){
4
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
5
}
6
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

À première vue, nous pouvons voir qu'une fonction 'my_enqueue_styles()' est déclarée et associée au hook action « wp_enqueue_scripts » (un hook est un moyen de modifier WordPress).

Pour vous en dire un peu plus, ce hook permet de dire à WordPress de charger des styles CSS ou scripts Javascript dans le thème.

Dans notre cas, il s'agit de charger le fichier « style.css » du thème parent.

En effet, charger ce fichier est indispensable sinon le thème enfant ne pourra pas reprendre les styles CSS du parent et donc s'afficher correctement.

L'avantage avec cette méthode est qu'il n'y a rien à modifier. Cela fonctionnera pour n'importe quel thème enfant.

Sauvegardez le tout pour finaliser la création de votre thème enfant.

Si vous activez maintenant ce nouveau thème, vous pourrez voir que... rien ne change. Génial, non ? ^^

Bref, les réglages sont justes et l'appel du thème “parent” est fonctionnel.

Complément

Afin d'égayer un peu votre gestionnaire de thèmes WordPress, vous pourrez aussi mettre un fichier screenshot.jpg (600x450 px conseillé) qui affichera la miniature de votre thème enfant dans le gestionnaire de thèmes.

Étape 4 – Adapter le thème enfant

Bien ! C'est maintenant que tous vos talents de développeur et web-designer vont être mis à rude épreuve... Car vous pouvez maintenant apporter toutes les modifications que vous souhaitez.

Quelles sont les actions que vous aller pouvoir mener ?

Apporter des modifications à la feuille de style

En ajoutant vos modifications à la suite de l'import de la feuille de style parente (dans le fichier « functions.php »), vous allez pouvoir modifier la mise en forme de l'ensemble des éléments graphiques du site.

Que ce soit les couleurs, les positionnements, les tailles des textes, les polices... bref, vous avez la main.

Personnellement, j'ai pris l'habitude de tester mes modifications en direct en utilisant les outils pour les développeurs intégrés à Google Chrome accessibles en faisant un clic droit sur la page puis en cliquant sur "Inspecter" (ou Ctrl + Maj + I).

J'apporte ensuite les modifications “en live” pour tester les mises en forme de manière itérative.

Quand celles-ci me conviennent, il suffit d'ajouter les éléments au thème enfant.

Adapter le code d'un modèle de page à vos besoins

Le principe d'un thème “enfant” est le suivant : il est maître sur tous les modèles de page, sauf si ceux-ci n'ont pas été créés dans le thème “enfant”.

Hmm... Oui, c'est pas clair. En gros, les modèles de pages que vous allez créer dans votre thème enfant viendront écraser les modèles de pages du thème parent.

Je m'explique avec un exemple :

Imaginons que vous souhaitez modifier la signature en pied de page de votre site pour y ajouter votre copyright ou ce que vous voulez.

Pour ce faire, il va falloir copier le fichier “footer.php” qui se trouve normalement dans votre thème “parent” puis le copier dans votre thème “enfant”.

Maintenant que ce fichier “existe” dans votre thème enfant, c'est lui qui est utilisé : il “écrase” le “footer.php” du thème parent. Pour les autres modèles (“header.php”, “page.php”, etc...) votre thème continuera d'utiliser les éléments présents dans le “parent”.

La prochaine étape est donc d'identifier la ligne dans le code qui correspond au copyright et d'y ajouter vos différentes mentions en modifiant le code HTML.

Attention

Attention, vous pourriez être tenté de copier “tous les fichiers” de votre thème parent pour pouvoir les modifier à loisir dans votre thème enfant. C'est tentant... Mais c'est aussi une très mauvaise pratique.

En effet, si vous faites cela, vos nouveaux fichiers auront toujours la main sur les fichiers du parent, et donc... les mises à jour des modèles de pages ne seront pas effectives sur votre site.

Ne copier les fichiers et modifiez QUE les éléments dont vous avez vraiment besoin et que vous ne pouvez pas impacter dans les feuilles de style.

Ajouter de nouvelles fonctions à votre thème

Pour les fonctions du thème (celles qui se trouvent dans le fichier “functions.php”), c'est l'exception qui confirme la règle. En effet, les fonctions du thème parent seront toujours chargées quoi qu'il arrive... même si vous créez un nouveau “functions.php” dans le thème enfant.

Les fonctions de votre fichier dans le thème “enfant” seront chargées juste avant celles du thème parent. L'avantage, c'est que vous pouvez apporter toutes les nouvelles fonctions que vous souhaitez en étant sûr, qu'au moins, le fichier d'origine ne sera pas cassé.

Par exemple, le code suivant désactive la fonctionnalité de recherche WordPress:

1
function disable_search( $query, $error = true ) {
2
    if ( is_search() ){
3
        $query->is_search = false;
4
        $query->query_vars[s] = false;
5
        $query->query[s] = false;
6
        // to error
7
        if( $error == true ){
8
            $query->is_404 = true;
9
        }
10
    }
11
}
12
add_action( 'parse_query', 'disable_search' );
13
add_filter( 'get_search_form', create_function('$a', "return null;" ));