Le codex de WordPress, qui est le guide d’utilisation de WordPress, explique ce qu’est un thème enfant, son utilité et comment en créer un. Avec cet article, je vais tenter de vulgariser tout cela comme je le fais habituellement avec mes autres articles pour vous expliquer le pourquoi du comment du thème enfant.

Qu’est-ce qu’un thème WordPress ?

Avant de parler de thème enfant, peut-être que vous ne savez pas ce qu’on appelle un « thème » ?

Il s’agit du template, de l’habillage d’un site ou blog fait sous WordPress. C’est ce qu’on appelle « modèle » chez Blogger ou Canalblog.

En effet, on peut modifier toute la structure, la mise en page, l’apparence d’un blog, tout en conservant le contenu (articles, pages, commentaires, images, vidéos etc.).

Il existe des milliers de thèmes WordPress, on peut les trouver sur le répertoire de WordPress ou bien sur d’autres sites qui proposent des versions gratuites ou payantes.

On les ajoute sur notre blog de plusieurs manières possibles, que je détaille dans un article sur les thèmes WordPress féminins.

Le thème est constitué de plusieurs dizaines (voire centaine) de fichiers qui permettent d’afficher d’une certaine manière le blog. Les fichiers sont des bouts de code en langage informatique : html, php, css, javascript… Voici les fichiers les plus connus sous WordPress car ce sont ceux qu’on va pouvoir modifier pour changer l’aspect du blog :

• header.php pour afficher le haut du blog (logo, menu, etc.)
• page.php pour définir la structure d’une page,
• single.php pour la structure d’un article,
• sidebar.php pour la colonne verticale à gauche ou à droite,
• footer.php pour le footer,
• comments.php pour gérer les commentaires,
• et beaucoup d’autres comme navigation.php, widgets.php, 404.php, archive.php, search.php, author.php, etc. etc. Je ne peux pas tous les citer ici car le type de fichiers (ou leur nom) peut aussi varier d’un thème à l’autre, même si la plupart sont quand même récurrents.

Vous voyez donc qu’on a plein de bouts de site (en-tête, commentaires, colonne verticale…), qui utilisés conjointement, permettent d’avoir un blog entier :

• dans header.php, on y indique où trouver le logo, à quel endroit le placer, les dimensions de l’en-tête, le contenu du menu, son emplacement, sa couleur, sa taille, etc.
• etc pour chacun des fichiers,
• dans page.php, on va faire appel à header.php, comments.php, sidebar.php, footer.php en plus du contenu qui caractérise les pages.

Ainsi, on n’a pas besoin de répéter X fois les mêmes codes pour le header si on a X pages différentes par exemple. Et si on a envie de modifier le contenu du header, on n’aura qu’à le faire une seule fois au lieu de X fois.

C’est ce qui permet d’avoir un site dynamique et non statique comme les débuts du web.

Idem pour le contenu du blog : on fait appel à la base de données qui contient (entre autres) tout le texte des articles, on n’a pas besoin de créer une page en html entière pour chaque article que l’on souhaite afficher (on n’a pas un fichier html par article de blog !).

Deux autres fichiers sont également importants dans un thème WordPress :

• style.css : ce fichier gère la mise en page d’un site WordPress. J’ai fait un raccourci quand je vous ai parlé du fichier header.php plus haut. On n’y trouve pas la taille du menu, son emplacement, sa couleur, sa typographie etc dans le fichier header.php mais le menu est défini par une balise qui est reprise dans style.css. Ainsi, si on souhaite que tout le texte du blog soit dans une certaine police, on ne fait la modification qu’une seule fois dans le fichier style.css au lieu de devoir le changer dans chacun des fichiers .php. Les fichiers php permettent en fait de définir quel contenu on va retrouver, avec une mise en page brute (tout à la suite les uns les autres)
• functions.php : ce fichier gère toutes les fonctions, les fonctionnalités, les actions d’un site WordPress.

Un thème WordPress est appelé un thème parent dès qu’on lui attribue un thème enfant.

Qu’est-ce qu’un thème enfant ?

Maintenant qu’on a vu dans les grandes lignes comment était constitué un thème WordPress, on va voir ce qu’est un thème enfant : celui-ci est constitué de quelques fichiers (au minimum 2) qui permettent d’utiliser un thème existant et de pouvoir lui y ajouter des modifications.

C’est comme si on posait un papier calque sur un dessin : on verra toujours le dessin principal si on ne fait rien de plus. Mais si on dessine un trait en plus sur le calque, on aura à la fois le dessin avec le trait supplémentaire.

En gros, on utilise le thème (parent) et on lui ajoute des personnalisations sur le thème enfant.

Pourquoi faut-il créer un thème enfant ?

Restons sur l’exemple du dessin : si on n’avait pas utilisé de calque et qu’on avait dessiné le trait directement sur le dessin initial, si on change le dessin, le trait aura disparu.

En d’autres termes, si par exemple, je veux utiliser un thème existant et changer l’emplacement du menu par rapport au logo. Si je modifie le fichier header.php directement, je vais modifier le fichier de base fourni par le développeur dans le thème.

Or, il arrive souvent que le développeur fasse des mises à jour du thème, soit pour apporter des nouvelles fonctions et améliorations, soit pour réparer une faille de sécurité. Si je mets à jour la nouvelle version du thème, tous les nouveaux fichiers vont remplacer ceux que j’ai actuellement, dont le fichier header.php : je vais donc perdre les modifications que j’avais apportées pour le menu.

Et si je ne mets pas à jour le thème, je ne bénéficierai pas des améliorations qu’il aura apportées sur les autres fichiers et je risque de me faire pirater.

Avec un thème enfant, on peut ainsi modifier autant qu’on veut un thème existant, tout en gardant les optimisations apportées par son créateur (sauf si bien sûr le créateur a modifié un fichier qu’on a repris).

Comment créer un thème enfant ?

Choisissez d’abord le thème parent et installez-le sur votre blog WordPress. Il vaut mieux quand même prendre un thème parent qui se rapproche le plus du résultat fini souhaité, pour avoir le moins de modifications possibles à faire.

Vous devez accéder aux fichiers de votre site, à l’aide d’un logiciel client FTP comme Filezilla.

Il y a ensuite plusieurs étapes à respecter pour créer le thème enfant.

1. Créez le dossier du thème enfant

Dans vos fichiers via le FTP, allez dans le chemin www/wp-content/themes/ et créez un dossier que vous appellerez comme vous voudrez. Les bonnes pratiques font que si le thème parent s’appelle « twentyeleven » par exemple, on va appeler le thème enfant « twentyeleven-child ». Ainsi, si vous avez plusieurs thèmes dans votre répertoire, vous saurez à quoi il correspond.

2. Créez un fichier style.css

Dans Filezilla, faites un clic droit dans le répertoire du thème enfant et cliquez sur « Créer un nouveau fichier ». Nommez ce fichier « style.css ».

Ouvrez ensuite ce fichier à l’aide d’un logiciel d’édition de texte comme « Bloc Notes » pour Windows ou « TextEdit » pour Mac. Puis copiez-collez le texte suivant dans le fichier :

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       Votre nom
 Author URI:   http://votresite.com
 Template:     twentyfifteen
 Version:      1.0.0
*/

Modifiez les lignes comme vous le souhaitez, mais celle qui doit être bien renseignée est « Template » : elle doit correspondre au nom du thème parent.

3. Créez un fichier functions.php

De la même manière que pour le fichier style.css, créez un fichier que vous allez nommer « functions.php ».

Ce fichier va vous permettre de dire à votre thème enfant quel est le thème parent à utiliser.

Copiez-collez le texte ci-dessous :

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

?>

4. Activez le thème enfant

Dans votre admin WordPress, allez dans « Apparence » puis « Thèmes et activez le thème enfant.

Voilà, votre thème enfant est mis en place !

Remarque : normalement, il ne devrait pas y avoir d’image sur la liste des thèmes car vous n’avez pas ajouté de photo, mais si vous voulez vraiment en ajouter une, vous pouvez copier-coller dans le thème enfant le fichier screenshot.png contenu dans le thème parent.

5. Personnalisez votre thème WordPress

Vous pouvez maintenant personnaliser le thème comme vous voulez, tout en gardant intact le thème parent. Si vous ne faites aucune modification, vous voyez que le thème enfant est identique au thème parent.

Pour personnaliser le thème enfant, modifiez les fichiers qui vous intéressent :

• style.css : si vous souhaitez modifier le design d’un contenu existant, il vous suffit de rajouter dans ce fichier les lignes de code correspondantes, à la suite du texte que vous avez créé tout à l’heure. Le thème enfant va en effet charger le fichier style.css du thème parent pour prendre en compte le design défini dans le thème initial, puis ensuite charger le fichier style.css du thème enfant. C’est comme si le contenu de style.css de l’enfant était à la suite de style.css du parent. Les lignes qui arrivent après vont ainsi prendre le dessus sur les précédentes, on dit qu’elles les « écrasent ». Par exemple, si vous écrivez d’abord que tout le texte est de couleur noire, puis que ce même texte est de couleur bleue, c’est le bleu qui va primer. (si je résume sans entrer dans les détails)
• functions.php : ici aussi, rajoutez les lignes de fonctions que vous souhaitez. Mais contrairement au style.css, le fichier functions.php du thème enfant ne va pas écraser celui du thème parent, il va même se charger avant que le parent donc renseignez-vous bien avant de rajouter une fonction car c’est un peu plus compliqué que le css.
• header.php, page.php, archive.php et autres fichiers php (hormis functions.php) : pour modifier ces fichiers, copiez-collez tout le fichier dans le répertoire enfant et modifiez directement le fichier complet. Ce n’est pas comme les fichiers style.css et functions.php où les fichiers parent et enfant sont chargés. Ici, le fichier le remplace entièrement et les fichiers non copiés du thème parent continuent d’être utilisés. Par contre, ne copiez-collez vers le thème enfant, seulement les fichiers que vous souhaitez modifier (et non tous les fichiers du thème parent), sinon vous ne bénéficierez pas des mises à jour du thème car elles ne seront pas répercutées sur le thème enfant.

Tous ces fichiers sont à manier avec attention, car le moindre espace en trop, la moindre erreur peut faire planter tout votre blog. Pour en savoir plus sur les thèmes enfants de WordPress, vous pouvez lire le codex.

Si vous n’avez pas un minimum de connaissances en langage informatique, évitez de toucher au code et passez par un professionnel.

A vous de jouer

Est-ce que vous aviez créé un thème enfant pour votre blog WordPress ? Pas trop compliqué à faire ? Si vous avez d’autres questions, n’hésitez pas à les poser dans les commentaires ci-dessous car j’imagine que ce ne doit pas être très simple lorsque c’est la première fois qu’on en entend parler.

• À propos
• Articles récents

Mia

Mia, de son nom de plume, est trafiquante de blogs depuis plus de 15 ans et partage ses compétences dans le blogging et le marketing digital.
Ancienne responsable e-commerce pour une marque de luxe, elle est l'auteure du livre "Augmenter le trafic de son blog" paru aux Editions Eyrolles.
Elle s'adresse à tous ceux dont la passion est le moteur.
Voir sa description détaillée.

Les derniers articles par Mia (tout voir)

• Je vous invite dans ma bibliothèque (plein de cadeaux pour vous) - 2 avril 2019
• Je suis maman, blogueuse, guitariste, sportive et bien d’autres… - 28 mars 2019
• Le blog a 5 ans ! Un jeu-concours pour fêter ça - 8 mars 2019