Créer des child thèmes WordPress manuellement en 2024

Dernière modification le 04 mars 2023 à 21:13 heures

Contenu de l'article

Les child thèmes WordPress, c’est quoi ?

Un child thème WordPress ou thème enfant est un thème qui hérite des fonctionnalités et de l’apparence d’un thème parent. Il permet aux utilisateurs de personnaliser leur site web sans altérer le code du thème parent.

Il existe de nombreux avantages à utiliser des child thèmes WordPress :

Tout d’abord, les child thèmes WordPress permettent de sauvegarder les personnalisations effectuées sur le site. Si vous effectuez des modifications directement sur le thème parent, elles seront perdues lors de la mise à jour du thème. Avec un child thème, vous pouvez mettre à jour le thème parent sans craindre de perdre vos personnalisations.

Ensuite, les child thèmes WordPress sont plus sûrs. Comme les modifications sont effectuées dans un thème distinct, il est moins probable qu’elles causent des erreurs ou des problèmes de compatibilité. Cela évite également les conflits de code entre les différents plugins et thèmes installés sur le site.

De plus, les child thèmes WordPress offrent une plus grande flexibilité. Vous pouvez ajouter des fonctionnalités supplémentaires ou personnaliser l’apparence de votre site sans avoir à créer un thème entièrement nouveau. Cela vous permet également de conserver la mise en page et les fonctionnalités du thème parent, tout en apportant des modifications pour les adapter à vos besoins spécifiques.

Enfin, les child thèmes WordPress sont plus faciles à gérer. Vous pouvez facilement activer ou désactiver les différentes personnalisations en les activant ou désactivant au niveau du child thème lui-même, sans toucher au thème parent. Cela vous permet de tester en direct de nouvelles modifications sans affecter le reste du site. Il est également plus facile de débugger les erreurs ou les problèmes de compatibilité en ayant un child thème distinct plutôt que de modifier directement le thème parent.

En résumé, les child thèmes WordPress sont des outils pratiques pour personnaliser votre site web sans altérer le code du thème parent. Ils permettent de sauvegarder les personnalisations, sont plus sûrs, offrent une plus grande flexibilité et sont plus faciles à gérer. En utilisant des child thèmes WordPress, vous pourrez créer un site web adapté à vos besoins spécifiques tout en conservant les fonctionnalités et l’apparence du thème parent.

Pourquoi créer un child thème WordPress manuellement plutôt que d’utiliser de plugin ?

l y a plusieurs raisons pour lesquelles il peut être préférable de créer un child thème manuellement plutôt qu’utiliser un plugin dédié pour personnaliser votre site WordPress :

Contrôle total : En créant un child thème manuellement, vous avez un contrôle total sur les fichiers et le code qui s’exécute sur votre site. Vous pouvez personnaliser le code pour répondre exactement à vos besoins et vous assurez que le code ne contient pas de vulnérabilités de sécurité.
Meilleure sécurité : Les plugins peuvent être une source potentielle de vulnérabilités de sécurité pour votre site. En utilisant un child thème, vous pouvez limiter l’utilisation de plugins et améliorer la sécurité de votre site.
Mises à jour plus simples : Les mises à jour de plugins peuvent être un véritable casse-tête, surtout si vous utilisez plusieurs plugins sur votre site. En utilisant un child thème, vous pouvez facilement mettre à jour votre thème parent sans avoir à vous inquiéter des incompatibilités avec les plugins.
Meilleures performances : Les plugins peuvent ralentir votre site en ajoutant des fonctionnalités inutiles ou en exécutant des scripts lourds. En utilisant un child thème, vous pouvez optimiser le code pour améliorer les performances de votre site.

En créant un child thème WordPress manuellement, vous pouvez bénéficier de tous ces avantages tout en évitant les inconvénients potentiels liés à l’utilisation de plugins pour personnaliser votre site.

Les étapes de la création d’un child thème du thème standard twentytwentythree.

création du répertoire du child thème
création du fichier style.css
création du fichier functions.php
ajout d’une image ‘screenshot’ pour votre child thème

création du répertoire du child thème

Connectez-vous à votre instance WordPress avec par exemple WinScp et créez un sous-répertoire dans ‘/wp-content/themes/‘. Le nom de ce sous-répertoire est libre et ne doit pas nécessairement contenir le nom du child thème WordPress. Ici par exemple je l’ai appelé ‘mon-child-theme‘.

création du fichier style.css

Dans le sous-répertoire du child thème, créez d’abord un fichier style.css.

L’entête du fichier style.css doit obligatoirement contenir au moins deux définitions:

Theme Name: qui va contenir une description de votre child thème en texte libre. Ici j’ai entré ‘mon twentytwentythree child theme’ pour indiquer que le child thème sera dérivé du thème standard twentytwentythree.
Template: le nom du répertoire du thème parent, ici ‘twentytwentythree‘

Vous pouvez ajouter d’autres définitions comme Author et Version.

/*

Theme Name: mon twentytwentythree child theme
Template: twentytwentythree
Author: NoelNac
Version: 1.0.0

*/

Rendez-vous dans le dashboard, appearance, thèmes pour constater que votre child thème a bien été pris en compte par WordPress.

Vous pouvez à ce moment l’activer et constater que votre site reste bel et bien actif dans son état original.

création du fichier functions.php

Pour que les styles que vous allez définir dans le fichier style.css de votre child thème soient pris en compte, vous devez créer un fichier functions.php dans lequel vous allez déclarer que votre child thème va hériter des styles du thème parent.

Voici un fichier générique functions.php qui va rendre actifs les styles contenus dans le fichier style.css de votre child thème.

<?php
if (! defined('WP_DEBUG')) {
	die( 'Direct access forbidden.' );
}
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style('noelnac-child-style', get_stylesheet_uri());
});

ajout d’une image ‘screenshot’ pour votre child thème

Vous pouvez ajouter une image personnalisée pour visualiser votre child thème dans le dashboard. Ce fichier image au format jpeg ou png, aura de préférence une taille de 1200×900 pixels.

Voici l’aperçu dans le dashboard:

Et voici l’arborescence de fichiers de mon nouveau child thème.

Test du fichier style.css dans le nouveau child thème

Voici l’aspect par défaut d’un article dans le thème twentytwentythree:

A ‘aide du module ‘inspector’ des ‘tools-web developpers tools’ de firefox, nous pouvons trouver que la classe de style du titre est ‘wp-block-post-title’

Nous allons modifier la couleur par défaut du titre des articles dans style.css

/*

Theme Name: mon twentytwentythree child theme
Template: twentytwentythree
Author: NoelNac
Version: 1.0.0

*/

.wp-block-post-title {
    color: red;
}

Et nous pouvons constater que le titre est bien passé de noir à rouge comme défini dans le fichier style.css de mon child thème.