Créer un thème enfant WordPress : modifications du design et des fonctions protégées contre les mises à jour

Créer un thème enfant WordPress : modifications du design et des fonctions protégées contre les mises à jour

Un thème enfant est un thème WordPress subordonné qui reprend les fonctions, les modèles et la mise en page d’un thème parent existant. Il vous permet d’effectuer vos propres adaptations sans modifier directement les fichiers du thème original.

C’est important, car les modifications apportées à un thème parent peuvent être écrasées lors de la prochaine mise à jour du thème. Si vous travaillez donc directement dans des fichiers tels que style.css, functions.php, header.php, footer.php ou single.php d’un thème acheté ou gratuit, vous risquez de perdre vos adaptations lors d’une mise à jour.

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

Le thème parent est le thème principal de votre site WordPress. Il fournit le design de base, les modèles, les fonctions, les feuilles de style et souvent aussi des options de thème. Exemples : Twenty Twenty-Four, Astra, GeneratePress, Kadence, OceanWP ou de nombreux thèmes premium.

Un thème enfant a toujours besoin d’un thème parent. Sans thème parent, il ne peut pas fonctionner correctement, car il hérite de ses fichiers et fonctions.

Avec un thème enfant, WordPress charge en principe le thème enfant comme thème actif, mais revient au thème parent lorsque des fichiers manquent. Vous ne devez donc créer que les fichiers que vous souhaitez réellement adapter.

Pourquoi un thème enfant est judicieux

Un thème enfant est particulièrement utile lorsque vous souhaitez effectuer des modifications qui vont au-delà des simples réglages dans le Customizer, l’éditeur de site ou un page builder.

Les principaux avantages :

• Sécurité lors des mises à jour : Le thème parent peut être mis à jour sans écraser vos adaptations.
• Séparation propre : Votre propre code reste séparé du code original du développeur du thème.
• Meilleure maintenabilité : Les modifications sont plus faciles à trouver, documenter et annuler.
• Flexibilité : Vous pouvez adapter de manière ciblée CSS, fonctions PHP, modèles ou JavaScript.
• Sécurité : Le thème parent peut continuer à recevoir des mises à jour de sécurité.
• Workflow professionnel : Les adaptations se testent mieux dans des environnements de staging, Git ou de développement.

Quand n’avez-vous pas besoin d’un thème enfant ?

Toute petite modification ne nécessite pas un thème enfant. De nombreuses adaptations peuvent aujourd’hui être effectuées sans code. Les thèmes modernes offrent notamment de nombreux réglages pour les couleurs, la typographie, les espacements, l’en-tête, le pied de page et les mises en page.

Un thème enfant n’est généralement pas nécessaire pour :

• les modifications dans le Customizer,
• les modifications dans l’éditeur de site,
• les réglages simples dans le panneau du thème,
• les menus et widgets,
• les contenus dans les pages et articles,
• les petites modifications CSS via Apparence > Personnaliser > CSS additionnel,
• les mises en page de page builder, tant qu’aucun fichier de thème n’est modifié.

Si vous souhaitez seulement modifier les couleurs ou le logo, le Customizer, l’éditeur de site ou le panneau d’options du thème suffit souvent.

Quand un thème enfant est-il recommandé ?

Un thème enfant est recommandé si vous souhaitez intervenir directement dans la structure technique du thème.

Cas d’utilisation typiques :

• gérer vos propres fichiers CSS de manière structurée,
• ajouter vos propres fonctions PHP,
• remplacer des fichiers de modèles,
• adapter header.php ou footer.php,
• intégrer vos propres fichiers JavaScript,
• utiliser des hooks et des filtres,
• remplacer des modèles WooCommerce,
• définir vos propres styles de blocs ou variantes de thème,
• versionner et documenter les modifications.

Thème enfant avec les thèmes classiques et les thèmes de blocs

Pour les thèmes classiques, les thèmes enfants sont depuis de nombreuses années la norme pour des adaptations protégées contre les mises à jour. Les thèmes classiques fonctionnent principalement avec des modèles PHP, du CSS et du JavaScript.

Avec les thèmes de blocs modernes, la situation est un peu différente. Les thèmes de blocs se composent davantage de modèles HTML, de blocs et d’un fichier theme.json. De nombreuses adaptations se font via l’éditeur de site. Malgré cela, les thèmes de blocs peuvent aussi être étendus avec des thèmes enfants, par exemple avec des modèles personnalisés, des adaptations propres de theme.json ou des styles supplémentaires. Dans le Theme Handbook, WordPress distingue les thèmes classiques et les thèmes de blocs ; les thèmes de blocs utilisent l’éditeur de site et se composent nettement plus de blocs. ([developer.wordpress.org](https://developer.wordpress.org/themes/?utm_source=chatgpt.com))

Préparation : utiliser une sauvegarde et un staging

Avant de créer ou d’activer un thème enfant, vous devriez créer une sauvegarde de votre site web. Même si un thème enfant est en principe sûr, des erreurs dans des fichiers PHP ou des fichiers de modèles peuvent affecter le site.

Une sauvegarde est particulièrement importante si :

• le site est déjà utilisé en production,
• WooCommerce ou des formulaires sont actifs,
• un page builder est utilisé,
• des fonctions PHP personnalisées sont prévues,
• des fichiers de modèles doivent être remplacés,
• plusieurs personnes travaillent sur le site.

Un environnement de staging est encore mieux. Vous pouvez y créer, activer et tester le thème enfant sans mettre le site en ligne en danger.

Étape 1 : déterminer le nom du dossier du thème parent

Avant de créer un thème enfant, vous devez connaître le nom exact du dossier du thème parent. Celui-ci est important pour la ligne Template: dans le fichier style.css du thème enfant.

Vous trouverez le nom du dossier sous :

wp-content/themes/

Exemples :

• twentytwenty
• twentytwentyfour
• astra
• generatepress
• kadence

La valeur dans Template: doit correspondre exactement au nom du dossier du thème parent. La casse et l’orthographe doivent être exactes.

Étape 2 : créer le dossier du thème enfant

Connectez-vous à votre compte d’hébergement via SFTP, FTP ou le gestionnaire de fichiers cPanel. Ouvrez le répertoire :

wp-content/themes/

Créez-y un nouveau dossier pour votre thème enfant. Le nom doit être unique et écrit en minuscules.

Exemples :

• twentytwenty-child
• astra-child
• generatepress-child
• curiaweb-theme-child

N’utilisez pas d’espaces et, si possible, pas de caractères spéciaux dans le nom du dossier.

Étape 3 : créer style.css

Créez dans le nouveau dossier du thème enfant un fichier nommé style.css. Ce fichier nécessite un en-tête de thème. L’entrée la plus importante est Template:, car elle indique à WordPress quel thème parent doit être utilisé.

/*
Theme Name: Twenty Twenty Child
Theme URI: https://www.curiaweb.ch/
Description: Thème enfant pour adaptations individuelles du thème Twenty Twenty.
Author: CURIAWEB GmbH
Author URI: https://www.curiaweb.ch/
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/

Adaptez Theme Name, Description, Author et surtout Template à votre thème parent.

Étape 4 : créer functions.php

Créez dans le dossier du thème enfant un fichier nommé functions.php. Dans ce fichier, vous pouvez charger des feuilles de style, des scripts et vos propres fonctions.

Une approche simple et souvent utilisée pour charger la feuille de style du thème enfant ressemble à ceci :

<?php
/**
 * Charger les styles du thème enfant.
 */
add_action( 'wp_enqueue_scripts', 'curiaweb_child_theme_enqueue_styles' );

function curiaweb_child_theme_enqueue_styles() {
    wp_enqueue_style(
        'curiaweb-child-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
}

De nombreux thèmes parents modernes chargent déjà correctement leurs propres styles. Dans ces cas, il suffit souvent de charger uniquement la feuille de style du thème enfant. Pour certains thèmes plus anciens, la feuille de style du thème parent doit en plus être chargée explicitement. WordPress indique que l’enqueueing des styles peut dépendre de la manière dont le thème parent charge ses styles. ([developer.wordpress.org](https://developer.wordpress.org/themes/advanced-topics/child-themes/?utm_source=chatgpt.com))

Si votre thème parent ne charge pas automatiquement ses styles, une approche comme celle-ci peut être nécessaire :

<?php
/**
 * Charger les styles parent et enfant.
 */
add_action( 'wp_enqueue_scripts', 'curiaweb_enqueue_parent_and_child_styles' );

function curiaweb_enqueue_parent_and_child_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style(
        $parent_style,
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( $parent_style ),
        wp_get_theme()->get( 'Version' )
    );
}

La variante correcte dépend du thème parent. Après l’activation, testez si tous les styles sont correctement chargés.

Étape 5 : ajouter une image de capture d’écran optionnelle

Pour que votre thème enfant soit plus joliment affiché dans l’aperçu des thèmes, vous pouvez placer un fichier screenshot.png dans le dossier du thème enfant. Ce fichier est optionnel.

L’image de capture d’écran apparaît sous Apparence > Thèmes. Elle n’influence pas le fonctionnement du thème enfant.

Étape 6 : activer le thème enfant

Connectez-vous au tableau de bord WordPress et ouvrez :

Apparence > Thèmes

Votre nouveau thème enfant devrait y apparaître. Activez-le. WordPress utilise ensuite le thème enfant comme thème actif, mais continue à revenir au thème parent.

Vérifiez directement après l’activation :

• Le site ressemble-t-il à avant ?
• Le menu est-il toujours correctement attribué ?
• Les widgets dans le pied de page et les barres latérales sont-ils encore présents ?
• Le logo est-il visible ?
• Les réglages du Customizer ou du thème fonctionnent-ils ?
• Les fichiers CSS sont-ils correctement chargés ?
• L’affichage mobile fonctionne-t-il ?

Parfois, les menus ou widgets doivent être réattribués une seule fois après un changement de thème, même si le thème enfant repose sur le même thème parent.

Adaptations CSS dans le thème enfant

Vous pouvez écrire vos propres règles CSS dans le fichier style.css du thème enfant. C’est utile si les adaptations doivent être enregistrées de manière durable, compréhensible et protégée contre les mises à jour.

Exemple :

.site-header {
    border-bottom: 3px solid #c61f29;
}

.button,
.wp-block-button__link {
    border-radius: 6px;
}

Pour de très petites adaptations CSS, la section du Customizer CSS additionnel peut également suffire. Toutefois, si vous prévoyez de nombreuses modifications ou souhaitez travailler de manière professionnelle, un thème enfant est plus clair.

Ajouter des fonctions PHP dans le thème enfant

Vous pouvez ajouter vos propres fonctions PHP dans le fichier functions.php du thème enfant. Soyez très prudent : une erreur PHP peut rendre votre site inaccessible.

Adaptations PHP typiques :

• intégrer vos propres scripts,
• étendre les fonctions du thème,
• utiliser des hooks et des filtres,
• adapter les sorties WooCommerce,
• ajouter des shortcodes,
• enregistrer des tailles d’image,
• adapter des fonctions d’administration.

Si vous avez des doutes, testez toujours le code PHP d’abord dans un environnement de staging.

Remplacer des fichiers de modèles

Un thème enfant peut remplacer certains fichiers de modèles du thème parent. Pour cela, copiez le fichier souhaité du thème parent dans le thème enfant et conservez la structure relative des répertoires.

Exemples :

• single.php pour les articles individuels,
• page.php pour les pages,
• archive.php pour les archives,
• header.php pour l’en-tête,
• footer.php pour le pied de page,
• woocommerce/single-product.php pour les modèles WooCommerce.

Lorsqu’un fichier est présent dans le thème enfant, WordPress l’utilise à la place du fichier du thème parent. Les modifications du thème parent ne peuvent alors plus être automatiquement reprises dans ces fichiers remplacés. Vous devriez donc vérifier régulièrement les fichiers de modèles copiés lorsque le thème parent est mis à jour.

Thème enfant et WooCommerce

Les modèles WooCommerce peuvent également être adaptés via un thème enfant. C’est un cas d’utilisation fréquent lorsque les pages produits, le panier, le paiement ou les modèles d’e-mails doivent être personnalisés.

WooCommerce indique dans l’état du système lorsque des fichiers de modèles sont remplacés et éventuellement obsolètes. Vérifiez régulièrement cette section après les mises à jour de WooCommerce.

Important pour les adaptations WooCommerce :

• créer auparavant une sauvegarde complète,
• utiliser un environnement de staging,
• tester le checkout après les modifications,
• vérifier les modèles d’e-mails,
• contrôler les modèles remplacés après les mises à jour,
• ne modifier aucune fonction critique pour l’activité sans test.

Créer un thème enfant avec un plugin

Si vous ne souhaitez pas créer les fichiers manuellement, vous pouvez également créer un thème enfant avec un plugin. Il existe différentes solutions pour cela. Elles peuvent être utiles, mais ne doivent pas forcément rester activées durablement après la création si elles ne sont plus nécessaires.

Avantages d’un plugin :

• début plus simple,
• moins de travail manuel sur les fichiers,
• détection automatique du thème parent,
• parfois des fonctions d’analyse supplémentaires.

Inconvénients :

• plugin supplémentaire dans le système,
• configuration incorrecte possible,
• moins de compréhension de la structure technique,
• pas toujours idéal pour les workflows professionnels.

Pour les sites en production, la création manuelle ou un environnement de développement propre est souvent plus transparent.

Thème enfant et staging

Un thème enfant ne devrait si possible pas être développé directement sur un site en ligne. Utilisez un environnement de staging pour tester les adaptations en toute sécurité.

En staging, vous pouvez vérifier :

• si le thème enfant est correctement activé,
• si les styles sont chargés,
• si les fonctions PHP sont exemptes d’erreurs,
• si les modèles s’appliquent comme prévu,
• si l’affichage mobile est correct,
• si les processus WooCommerce fonctionnent,
• si les mises en page du page builder restent inchangées.

Ce n’est que lorsque tout fonctionne correctement que vous devriez transférer la modification sur le site en ligne.

Sécurité : éviter les erreurs typiques

• Mauvais nom de template : La ligne Template: ne contient pas le nom du dossier du thème parent.
• Erreur PHP dans functions.php : Le site affiche une erreur critique.
• Thème parent non installé : Le thème enfant ne peut pas fonctionner.
• Styles chargés deux fois : Un enqueueing incorrect peut influencer les performances ou l’affichage.
• Trop de modèles copiés : Les mises à jour du thème parent ne passent plus proprement.
• Aucune sauvegarde : Les erreurs sont difficiles à annuler.
• Développement en production : Les visiteurs voient directement les erreurs.
• Menus et widgets non vérifiés : Après activation, la navigation ou les contenus du pied de page manquent.

Performance : un thème enfant ralentit-il le site ?

Un thème enfant ne ralentit pas automatiquement un site. Ce qui compte, ce sont les adaptations qu’il contient. Un petit thème enfant avec un CSS propre et peu de fonctions n’a normalement presque aucun impact perceptible.

Les problèmes de performance proviennent plutôt de :

• trop de fichiers CSS supplémentaires,
• JavaScript inutile,
• fonctions PHP mal écrites,
• requêtes de base de données non optimisées,
• trop de ressources externes,
• adaptations WooCommerce non testées,
• feuilles de style chargées en double.

Un code de thème enfant proprement développé est maintenable et performant. Un code mal écrit peut en revanche causer des problèmes, qu’il se trouve dans un thème enfant ou dans un plugin.

SEO et GEO : pourquoi les thèmes enfants sont indirectement importants

Un thème enfant n’améliore pas automatiquement le SEO. Il peut toutefois aider à mettre en œuvre proprement des adaptations techniques et graphiques importantes.

Les adaptations pertinentes pour le SEO dans le thème enfant peuvent être :

• structure de modèles propre,
• meilleurs temps de chargement grâce à un code optimisé,
• données structurées, si elles sont correctement intégrées,
• structure HTML accessible,
• sortie optimisée des titres,
• modèles WooCommerce propres,
• éviter les erreurs de mise en page inutiles.

Pour le GEO, c’est-à-dire la Generative Engine Optimization, un thème enfant est indirectement utile s’il permet de structurer les contenus plus clairement, de les rendre plus accessibles et de les afficher de manière techniquement plus propre. Les contenus de qualité, les titres clairs, le maillage interne et les informations fiables restent toutefois décisifs.

Procédure recommandée

1. Vérifier si un thème enfant est nécessaire : Pour de simples options de design, le Customizer ou l’éditeur de site suffit souvent.
2. Créer une sauvegarde : Sauvegarder les fichiers et la base de données.
3. Utiliser le staging : Ne pas tester les modifications directement sur le site en ligne.
4. Déterminer le nom du dossier du thème parent : Le reprendre exactement pour Template:.
5. Créer le dossier du thème enfant : Sous wp-content/themes/.
6. Créer style.css : Créer l’en-tête du thème avec l’entrée Template correcte.
7. Créer functions.php : Intégrer proprement les styles et ajouter vos propres fonctions.
8. Activer le thème enfant : Sous Apparence > Thèmes.
9. Vérifier le site : Tester la mise en page, les menus, widgets, l’affichage mobile, les formulaires et la boutique.
10. Documenter les modifications : Cela facilite la maintenance ultérieure.

Questions fréquentes sur le thème enfant WordPress

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

Un thème enfant est un thème subordonné qui étend un thème parent. Il reprend ses fonctions et permet vos propres adaptations protégées contre les mises à jour.

Pourquoi ne devrais-je pas modifier directement un thème parent ?

Les modifications directes du thème parent peuvent être écrasées lors d’une mise à jour du thème. De plus, la maintenance devient plus difficile.

Ai-je besoin d’un thème enfant pour de petites modifications CSS ?

Pas nécessairement. Pour quelques règles CSS, CSS additionnel dans le Customizer peut suffire. Pour des adaptations plus importantes ou à long terme, un thème enfant est plus propre.

Puis-je utiliser des plugins au lieu d’un thème enfant ?

Pour certaines adaptations, oui. De petits plugins CSS ou des plugins de snippets de code peuvent aider. Toutefois, si vous souhaitez remplacer des modèles de thème comme header.php, footer.php ou des modèles WooCommerce, un thème enfant est la meilleure solution.

Mon site aura-t-il un aspect différent après l’activation ?

Idéalement, non. Le thème enfant devrait reprendre le thème parent. Vérifiez toutefois les menus, widgets, logo, réglages du Customizer et affichage mobile.

Un thème enfant peut-il endommager mon site ?

Un code PHP mal écrit ou des fichiers de modèles défectueux peuvent causer des problèmes. C’est pourquoi vous devriez utiliser des sauvegardes et un staging.

Les thèmes enfants fonctionnent-ils aussi avec les thèmes de blocs ?

Oui, les thèmes enfants peuvent également être utilisés avec les thèmes de blocs. L’éditeur de site, les modèles HTML et theme.json y jouent également un rôle important.

Le thème parent doit-il rester installé ?

Oui. Un thème enfant a besoin de son thème parent. Si le thème parent est supprimé, le thème enfant ne fonctionne plus correctement.