Coder un thème enfant WordPress | Tutoriel complet

Dans ce tutoriel, vous allez apprendre à coder un thème enfant pour WordPress à travers les étapes suivantes :

• Comprendre ce qu’est un thème enfant
• Créer un thème enfant fonctionnel à partir d’un thème parent
• Personnaliser votre thème sans risque de perte lors des mises à jour
• Respecter les bonnes pratiques WordPress et SEO
• Utiliser un environnement sécurisé et évolutif

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

Un thème enfant est un thème WordPress qui hérite de toutes les fonctionnalités, du style et des modèles d’un autre thème — appelé thème parent. Il permet de modifier ou d’ajouter des fonctionnalités sans altérer directement le code du thème parent.

🛡 Pourquoi utiliser un thème enfant ?

1. Sécurité des mises à jour : Vous pouvez mettre à jour le thème parent sans perdre vos personnalisations du thème enfant.
2. Expérimentation en toute sécurité : Testez du code, ajoutez des fichiers, modifiez le CSS sans casser le site principal.
3. Meilleure organisation : Votre thème enfant contient uniquement vos personnalisations.
4. Bonnes pratiques de développement WordPress : C’est la méthode recommandée par l’équipe WordPress.

Prérequis

Avant de commencer, assurez-vous d’avoir :

• Un site WordPress installé (localement ou en ligne)
• Accès aux fichiers de votre site (via FTP ou gestionnaire de fichiers)
• Un éditeur de code (comme VS Code, Sublime Text ou Notepad++)
• Un thème parent installé et activé (ex. : Astra, OceanWP, Hello Elementor, etc.)

Étape 1 : Créer le dossier de votre thème enfant

Où créer le dossier ?

Connectez-vous à votre site (via FTP ou File Manager dans cPanel) et naviguez jusqu’au dossier suivant :

/wp-content/themes/

Ici se trouvent tous vos thèmes. Créez un nouveau dossier avec le nom de votre thème enfant. Par convention, nommez-le :

nomdutheme-parent-child

🔧 Exemple : Si votre thème parent s’appelle astra, créez un dossier :

astra-child

Étape 2 : Créer le fichier style.css

C’est le fichier obligatoire pour qu’un thème soit reconnu par WordPress.

Dans le dossier astra-child, créez un fichier nommé style.css. Puis, copiez et collez ce contenu :

/*
Theme Name: Astra Child
Theme URI: https://exemple.com/astra-child
Description: Thème enfant pour Astra
Author: Votre Nom
Author URI: https://votresite.com
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Vos styles personnalisés commencent ici */

Explication ligne par ligne :

• Theme Name : Le nom affiché dans le tableau de bord WordPress.
• Theme URI : (Facultatif) L’URL du thème enfant.
• Description : Brève explication de votre thème.
• Author / Author URI : Vos informations en tant que créateur.
• Template : Très important ! C’est le nom exact du dossier du thème parent (respectez majuscules/minuscules).
• Text Domain : Utile pour la traduction. Doit correspondre au nom du dossier.

💡 Si cette ligne Template: est incorrecte, votre thème enfant ne fonctionnera pas.

Étape 3 : Créer le fichier functions.php

Ce fichier vous permet de charger le style du thème parent et d’ajouter du code PHP personnalisé.

Dans astra-child, créez un fichier functions.php et collez le code suivant :

<?php
// Fonction pour charger les styles du thème parent
function astra_child_enqueue_styles() {
    // Charge le style du thème parent
    wp_enqueue_style('astra-parent-style', get_template_directory_uri() . '/style.css');

    // Charge le style du thème enfant
    wp_enqueue_style('astra-child-style', get_stylesheet_directory_uri() . '/style.css', array('astra-parent-style'));
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');

Explication :

• wp_enqueue_style : Fonction WordPress pour charger les fichiers CSS proprement.
• get_template_directory_uri() : Renvoie l’URL du thème parent.
• get_stylesheet_directory_uri() : Renvoie l’URL du thème enfant.
• Le second wp_enqueue_style dépend du style parent pour garantir le bon ordre de chargement.

📌 Important : Ne jamais utiliser @import dans style.css. C’est une mauvaise pratique (plus lent, moins efficace pour le SEO).

Étape 4 : Activer le thème enfant dans WordPress

1. Allez dans votre tableau de bord WordPress.
2. Menu Apparence > Thèmes
3. Vous verrez votre nouveau thème Astra Child (ou celui que vous avez nommé).
4. Cliquez sur Activer

🎉 Félicitations ! Votre thème enfant est maintenant actif.

Étape 5 : Vérifier si tout fonctionne

• Allez sur votre site public.
• Vérifiez que le style est bien appliqué (si tout est “cassé”, c’est souvent un problème de lien vers le thème parent).
• Essayez de modifier légèrement le style.css de votre thème enfant pour confirmer que vos changements sont bien pris en compte.

🔍 Exemple de modification test :

body {
    background-color: #f4f4f4;
}

En rechargeant votre site, vous devriez voir un fond gris clair.

Étape 6 : Ajouter des modèles personnalisés (optionnel pour l’instant)

Le thème enfant peut contenir tous les fichiers du thème parent. Si vous souhaitez surcharger un fichier, il suffit de copier le fichier du thème parent dans le thème enfant, puis de le modifier.

📁 Exemple :

• Copiez header.php depuis le dossier du thème parent vers astra-child/header.php.
• Ensuite, vous pouvez modifier ce fichier sans affecter le thème parent.

⚠️ Attention : si le thème parent est mis à jour, ses modifications ne seront pas répercutées sur votre version copiée. Faites-le uniquement si nécessaire.

🔐 SEO & bonnes pratiques

Voici quelques conseils pour rester SEO-friendly :

1. N’utilisez pas @import dans les CSS
2. Gardez les balises title, meta, canonical dans header.php si vous le surchargez
3. Ajoutez un screenshot.png (800x600px) dans le dossier du thème enfant pour illustrer visuellement votre thème
4. Documentez vos modifications dans le fichier functions.php ou dans un readme.txt
5. Gardez vos fichiers organisés : créez des sous-dossiers css, js, inc si vous ajoutez plusieurs scripts

Étape 7 : Ajouter des fichiers JavaScript personnalisés

Si vous souhaitez intégrer des effets interactifs ou des scripts JavaScript, vous pouvez les ajouter facilement dans votre thème enfant.

📁 Organisation

Dans votre dossier astra-child, créez un dossier :

/js/

Puis ajoutez un fichier, par exemple :

/js/custom.js

Ajoutez-y ce code simple pour test :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

console.log("Le thème enfant fonctionne !");

Charger le fichier JavaScript

Dans votre functions.php, ajoutez ce code après le chargement du CSS :

function astra_child_enqueue_scripts() {
    // Charge le JS personnalisé du thème enfant
    wp_enqueue_script(
        'astra-child-custom-js', 
        get_stylesheet_directory_uri() . '/js/custom.js', 
        array('jquery'), // dépendance (facultative)
        '1.0.0', 
        true // true = charger dans le footer
    );
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_scripts');

✅ Vérifiez dans la console de votre navigateur que le message s’affiche.

Étape 8 : Ajouter une image d’aperçu (screenshot.png)

C’est l’image qui apparaît dans l’administration WordPress > Apparence > Thèmes.

📏 Dimensions recommandées :

• 800 x 600 px
• Format : .png
• Nom exact : screenshot.png

Placez-la directement dans le dossier du thème enfant.

💡 Vous pouvez créer un visuel dans Canva ou Figma avec le nom de votre thème et quelques captures d’écran.

Étape 9 : Ajouter un fichier readme.txt (optionnel mais pro)

Ce fichier permet de garder une trace de vos modifications, pratiques si vous êtes plusieurs ou que vous reprenez votre projet plus tard.

Créez un fichier readme.txt dans votre thème enfant, par exemple :

Astra Child Theme - v1.0.0

Créé par Alban - Crea-Troyes.fr
Site parent : Astra

Modifications :
- Ajout d’un fond gris clair
- Surcharge de header.php
- Ajout d’un script custom.js

À faire :
- Intégrer breadcrumbs
- Ajouter les balises Schema.org

Étape 10 : Utiliser les hooks & filters WordPress

Les hooks sont au cœur de WordPress. Ils permettent d’ajouter ou modifier des fonctionnalités sans toucher au cœur de WordPress ni au thème parent.

Exemple 1 : Ajouter une phrase en bas de vos articles

Dans functions.php :

function ajouter_signature_article($contenu) {
    if (is_single()) {
        $contenu .= '<p><em>Merci de votre lecture ! — Le blog de Crea-Troyes</em></p>';
    }
    return $contenu;
}
add_filter('the_content', 'ajouter_signature_article');

Exemple 2 : Personnaliser le titre des pages

function modifier_titre_page($title) {
    if (is_page() && in_the_loop()) {
        return '🔍 ' . $title;
    }
    return $title;
}
add_filter('the_title', 'modifier_titre_page');

Étape 11 : Créer un shortcode dans le thème enfant

Les shortcodes permettent d’ajouter des contenus dynamiques dans vos pages/articles.

Exemple : afficher l’année en cours

Dans functions.php :

function shortcode_annee() {
    return date('Y');
}
add_shortcode('annee', 'shortcode_annee');

Utilisation dans WordPress :

© [annee] Crea-Troyes. Tous droits réservés.

Résultat :

© 2025 Crea-Troyes. Tous droits réservés.

Étape 12 : Optimisations SEO avec le thème enfant

1. ✅ Intégrer un fil d’Ariane (breadcrumbs)

Si vous utilisez un plugin SEO comme Yoast ou RankMath, vous pouvez ajouter ceci dans header.php ou single.php :

<?php
if (function_exists('yoast_breadcrumb')) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
?>

2. ✅ Ajouter les balises Schema.org dans les articles

Dans single.php, vous pouvez entourer votre article avec des balises microdata :

<article itemscope itemtype="https://schema.org/BlogPosting">
    <h1 itemprop="headline"><?php the_title(); ?></h1>
    <div itemprop="articleBody">
        <?php the_content(); ?>
    </div>
</article>

3. ✅ Personnaliser les balises <title> et meta

La plupart des thèmes ou des plugins SEO gèrent cela automatiquement. Mais si vous surchargez header.php, assurez-vous d’inclure dans <head> :

<title><?php wp_title(); ?></title>
<?php wp_head(); ?>

Bonus : Structuration propre du thème enfant

Voici un exemple d’arborescence propre et évolutive :

astra-child/
│
├── style.css
├── functions.php
├── screenshot.png
├── readme.txt
│
├── js/
│   └── custom.js
│
├── css/
│   └── custom.css
│
├── templates/
│   └── parts-header.php

Vous avez maintenant un thème enfant WordPress :

✅ Fonctionnel
✅ Organisé
✅ Sûr lors des mises à jour
✅ SEO-friendly
✅ Facile à maintenir et à enrichir

🔗 Ressources utiles

• Créa-Troyes – Formations WordPress

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr