Pourquoi un thème enfant ?

Un thème enfant protège vos personnalisations des mises à jour du thème parent. Sans lui, chaque update écrase votre travail : CSS, modifications PHP, fonctions personnalisées disparaissent. Avec lui, vous gardez la version la plus récente du thème parent (sécurité, bugfixes) tout en conservant intactes vos modifications. C’est un standard professionnel WordPress, indispensable dès que vous touchez aux fichiers PHP du thème.

Pourquoi créer un thème enfant

Vous personnalisez votre thème WordPress, ajoutez du CSS, modifiez un template… puis une mise à jour du thème écrase tout. C’est le problème numéro un des débutants. Le thème enfant résout cela : il hérite de toutes les fonctionnalités du thème parent, mais vos modifications sont protégées des mises à jour.

Quand créer un thème enfant

Oui : vous modifiez des fichiers PHP du thème (header.php, footer.php, single.php, etc.)
Oui : vous ajoutez des fonctions personnalisées via functions.php
Peut-être : vous ajoutez beaucoup de CSS personnalisé (le Customizer → CSS additionnel suffit pour quelques règles)
Non : vous utilisez uniquement Elementor ou le FSE — vos modifications sont stockées en base de données, pas dans les fichiers du thème

Méthode 1 : Création manuelle (recommandée pour apprendre)

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

Connectez-vous à votre hébergement via FTP (FileZilla) ou le gestionnaire de fichiers (cPanel/Plesk). Naviguez vers /wp-content/themes/ et créez un nouveau dossier.

Convention de nommage : nom-du-thème-parent-child

/* Structure de dossiers :
/wp-content/themes/
  ├── astra/              ← thème parent (ne pas toucher)
  ├── astra-child/        ← votre thème enfant
  │   ├── style.css       ← obligatoire
  │   ├── functions.php   ← obligatoire
  │   ├── screenshot.png  ← optionnel (image 1200x900px)
  │   └── ... autres fichiers template
*/

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

Ce fichier identifie le thème enfant auprès de WordPress. L’en-tête est obligatoire et doit référencer le thème parent.

/*
Theme Name:   Astra Child
Theme URI:    https://votresite.sn
Description:  Thème enfant pour Astra - personnalisations ITSkillsCenter
Author:       Votre Nom
Author URI:   https://votresite.sn
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  astra-child
*/

/* ===========================================
   Vos styles personnalisés ci-dessous
   =========================================== */

/* Exemple : changer la police et les couleurs */
:root {
    --couleur-primaire: #2563eb;
    --couleur-secondaire: #f59e0b;
    --police-principale: 'Inter', -apple-system, sans-serif;
}

body {
    font-family: var(--police-principale);
    line-height: 1.7;
}

/* Bouton CTA personnalisé */
.bouton-cta {
    background: var(--couleur-primaire);
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease;
}
.bouton-cta:hover {
    background: #1d4ed8;
    color: #fff;
}

⚠️ Le champ Template est critique. Il doit correspondre exactement au nom du dossier du thème parent (pas le nom affiché, le nom du dossier). Pour le vérifier :

/* Vérifier le nom du dossier du thème parent :
   Apparence → Thèmes → cliquer sur le thème parent → 
   regarder l'URL : ...themes.php?theme=astra
                                         ^^^^^
   C'est cette valeur qu'il faut mettre dans Template */

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

Ce fichier charge la feuille de style du thème parent puis celle du thème enfant. C’est la méthode recommandée par WordPress (pas @import dans le CSS).

<?php
/**
 * Thème enfant Astra - functions.php
 * 
 * Ce fichier est chargé AVANT le functions.php du parent.
 * N'ajoutez que vos personnalisations ici.
 */

// Charger les styles du parent puis de l'enfant
add_action('wp_enqueue_scripts', function() {
    // Style du thème parent
    wp_enqueue_style(
        'astra-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    
    // Style du thème enfant (chargé après = priorité)
    wp_enqueue_style(
        'astra-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('astra-parent-style'),
        wp_get_theme()->get('Version')
    );
}, 20);

// ======================================
// Vos fonctions personnalisées ci-dessous
// ======================================

Différence importante :

get_template_directory_uri() → pointe vers le dossier du thème parent
get_stylesheet_directory_uri() → pointe vers le dossier du thème enfant

Étape 4 : Activer le thème enfant

Allez dans Apparence → Thèmes
Votre thème enfant apparaît dans la liste
Cliquez sur « Activer »
Vérifiez votre site en front — il doit être identique à avant

Si le site est cassé après activation, le problème vient presque toujours du champ Template dans style.css ou d’une erreur de syntaxe dans functions.php.

Méthode 2 : Avec un plugin (plus rapide)

Child Theme Configurator

Ce plugin génère automatiquement le thème enfant avec la bonne structure.

Installer et activer « Child Theme Configurator »
Outils → Child Themes
Sélectionner le thème parent dans la liste
Cliquer sur « Analyze » — le plugin vérifie la compatibilité
Configurer les options (copier les menus, widgets, réglages du Customizer)
Cliquer sur « Create New Child Thème »
Activer le thème enfant généré

Avantage : le plugin gère correctement l’enqueue des styles et détecte les dépendances CSS du parent.

Après création : vous pouvez désactiver et supprimer le plugin — le thème enfant est autonome.

Personnaliser le thème enfant : exemples pratiques

Modifier un template PHP

Pour modifier un fichier template du parent, copiez-le dans le thème enfant en conservant la même structure de dossiers. WordPress utilisera automatiquement la version du thème enfant.

/* Exemple : personnaliser le header
   
   1. Copier le fichier du parent vers l'enfant :
   /wp-content/themes/astra/header.php
   → /wp-content/themes/astra-child/header.php
   
   2. Modifier la copie dans le thème enfant
   
   Hiérarchie de chargement WordPress :
   - WordPress cherche d'abord dans le thème enfant
   - S'il ne trouve pas, il utilise le fichier du parent
   - Cela fonctionne pour TOUS les fichiers template */

Ajouter un bandeau WhatsApp flottant

/* Dans functions.php du thème enfant */
add_action('wp_footer', function() {
    $numero = '221770000000'; // Votre numéro
    $message = urlencode('Bonjour, j\'ai une question sur vos services.');
    echo '<a href="https://wa.me/' . $numero . '?text=' . $message . '" 
          target="_blank" rel="noopener" 
          id="whatsapp-flottant"
          aria-label="Nous contacter sur WhatsApp">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
            <path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.611.611l4.458-1.495A11.952 11.952 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.387 0-4.592-.838-6.313-2.236l-.44-.363-3.29 1.103 1.103-3.29-.363-.44A9.965 9.965 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
          </svg>
        </a>';
    echo '<style>
    #whatsapp-flottant {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #25D366;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(37,211,102,0.4);
        z-index: 9999;
        transition: transform 0.3s ease;
    }
    #whatsapp-flottant:hover { transform: scale(1.1); }
    </style>';
});

Ajouter le temps de lecture sur les articles

/* Dans functions.php du thème enfant */
function itsc_temps_lecture() {
    $content = get_post_field('post_content', get_the_ID());
    $mots = str_word_count(strip_tags($content));
    $minutes = max(1, ceil($mots / 200)); // 200 mots/minute
    return '<span class="temps-lecture">⏱ ' . $minutes . ' min de lecture</span>';
}
add_shortcode('temps_lecture', 'itsc_temps_lecture');

/* Ou l'ajouter automatiquement avant chaque article */
add_filter('the_content', function($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        $temps = itsc_temps_lecture();
        $content = '<div style="color:#666;margin-bottom:20px;font-size:14px;">' 
                   . $temps . '</div>' . $content;
    }
    return $content;
});

Personnaliser le pied de page

/* Remplacer le copyright par défaut d'Astra */
add_filter('astra_footer_copyright', function() {
    $annee = date('Y');
    return '<p>© ' . $annee . ' Votre Entreprise - Dakar, Sénégal | 
    <a href="/mentions-legales/">Mentions légales</a> | 
    <a href="/politique-confidentialite/">Confidentialité</a></p>';
});

Ajouter une police Google Fonts

/* Dans functions.php - charger Inter depuis Google Fonts */
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'google-fonts-inter',
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
        array(),
        null
    );
}, 5);

/* ⚠️ Performance : Google Fonts ajoute une requête externe.
   Alternative plus rapide : télécharger la police et la servir localement.
   
   1. Télécharger Inter depuis fonts.google.com
   2. Placer les fichiers .woff2 dans /astra-child/fonts/
   3. Déclarer via @font-face dans style.css : */

/* @font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */

Thèmes enfants pour les thèmes populaires

Astra

Le plus utilisé au Sénégal. Fonctionne parfaitement avec un thème enfant. Le champ Template est astra.

/* Hooks spécifiques Astra utilisables dans le thème enfant */
// Ajouter du contenu après le header
add_action('astra_header_after', function() {
    if (is_front_page()) {
        echo '<div style="background:#f59e0b;color:#000;text-align:center;padding:10px;">
              🎉 Formation WordPress - Inscription ouverte !
              <a href="/formation/" style="color:#000;font-weight:bold;margin-left:10px;">
              En savoir plus →</a></div>';
    }
});

// Modifier le layout d'un CPT
add_filter('astra_page_layout', function($layout) {
    if (is_singular('service')) {
        return 'no-sidebar'; // Pleine largeur pour les services
    }
    return $layout;
});

GeneratePress

Template = generatepress. Utilise ses propres hooks :

/* Hooks GeneratePress */
add_action('generate_after_header', function() {
    // Contenu après le header
});

add_action('generate_before_footer', function() {
    // Contenu avant le footer
});

OceanWP

Template = oceanwp. Propose beaucoup d’options dans le Customizer, donc le thème enfant est moins souvent nécessaire.

Débogage du thème enfant

Le site est cassé après activation

/* Problème 1 : Erreur de syntaxe dans functions.php
   → Accéder via FTP, corriger le fichier, ou renommer
   le dossier du thème enfant pour revenir au parent

   Problème 2 : Mauvaise valeur Template dans style.css
   → Vérifier que le nom correspond au dossier du parent
   
   Problème 3 : Styles non chargés
   → Vérifier la fonction wp_enqueue_scripts dans functions.php
   → Inspecter la source (Ctrl+U) et chercher style.css du child

   Problème 4 : functions.php du parent pas exécuté
   → C'est normal : functions.php de l'enfant est chargé EN PLUS
   du parent, pas À LA PLACE. Ne pas copier functions.php du parent
   dans l'enfant ! */

Vérifier que le thème enfant est bien actif

/* Ajouter temporairement dans functions.php du thème enfant */
add_action('wp_head', function() {
    echo '<!-- Thème enfant actif : ' . wp_get_theme()->get('Name') . ' -->';
});

/* Puis voir la source de votre page (Ctrl+U)
   Vous devriez voir : <!-- Thème enfant actif : Astra Child --> */

Un template modifié ne s’affiche pas

WordPress suit une hiérarchie précise pour choisir quel fichier template utiliser. Utilisez le plugin « What The File » (en développement uniquement) pour voir quel fichier est utilisé sur chaque page.

/* Hiérarchie pour un article (post) :
   1. single-{post_type}-{slug}.php
   2. single-{post_type}.php
   3. single.php
   4. singular.php
   5. index.php
   
   WordPress cherche d'abord dans le thème enfant,
   puis dans le thème parent, pour chaque niveau. */

Bonnes pratiques

À faire	À éviter
Utiliser les hooks et filtres du parent	Copier tous les fichiers du parent dans l’enfant
Versionner le thème enfant avec Git	Modifier directement les fichiers du parent
Préfixer vos fonctions (`itsc_`)	Utiliser des noms génériques qui peuvent conflicuter
Tester après chaque mise à jour du parent	Mettre à jour aveuglément sans vérifier
Copier uniquement les templates que vous modifiez	Dupliquer tout le thème parent
Commenter vos modifications	Modifier du code sans explication
Utiliser `get_stylesheet_directory_uri()` pour les assets de l’enfant	Utiliser des chemins absolus

Structure complète d’un thème enfant avancé

astra-child/
├── style.css                 ← En-tête + styles personnalisés
├── functions.php             ← Fonctions personnalisées
├── screenshot.png            ← Aperçu dans Apparence → Thèmes
├── assets/
│   ├── css/
│   │   └── custom.css        ← Styles supplémentaires
│   ├── js/
│   │   └── custom.js         ← Scripts personnalisés
│   ├── fonts/
│   │   └── Inter-Regular.woff2
│   └── images/
│       └── logo.svg
├── template-parts/
│   └── content-service.php   ← Partials personnalisés
├── templates/
│   └── page-contact.php      ← Template de page personnalisé
├── woocommerce/              ← Override templates WooCommerce
│   └── single-product/
│       └── add-to-cart/
│           └── simple.php
└── single-service.php        ← Template pour CPT service

/* Charger les assets supplémentaires dans functions.php */
add_action('wp_enqueue_scripts', function() {
    // CSS personnalisé
    wp_enqueue_style(
        'itsc-custom',
        get_stylesheet_directory_uri() . '/assets/css/custom.css',
        array('astra-child-style'),
        filemtime(get_stylesheet_directory() . '/assets/css/custom.css')
    );
    
    // JS personnalisé
    wp_enqueue_script(
        'itsc-custom-js',
        get_stylesheet_directory_uri() . '/assets/js/custom.js',
        array('jquery'),
        filemtime(get_stylesheet_directory() . '/assets/js/custom.js'),
        true // Charger dans le footer
    );
}, 30);

Erreurs fréquentes

Champ `Template` incorrect dans style.css

Cause : mettre le nom affiché du thème (« Astra ») au lieu du nom du dossier (« astra »).
Solution : le champ Template doit correspondre exactement au nom du dossier du parent, sensible à la casse, sans accent. Vérifiez avec Apparence > Thèmes.

Variables PHP avec accents

Cause : écrire $numéro ou $téléphone dans le code PHP.
Solution : les variables PHP supportent l’unicode mais c’est une mauvaise pratique. Utilisez $numero, $telephone. ASCII uniquement pour les identifiants.

Apostrophes non échappées dans une chaîne PHP

Cause : 'Bonjour, j'ai une question' avec apostrophe française au milieu.
Solution : échappez avec \' ou utilisez les guillemets doubles : "Bonjour, j'ai une question".

Copier `functions.php` du parent dans l’enfant

Cause : penser qu’il faut le dupliquer comme les autres templates.
Solution : NON. functions.php de l’enfant est chargé en plus du parent (pas à la place). Ne mettez dans le child que vos fonctions personnalisées.

En-tête de style.css avec accents

Cause : écrire Theme Name avec un accent ou en français.
Solution : les en-têtes de style.css sont normalisés par WordPress et doivent rester en anglais sans accent : Theme Name, Theme URI, Template, Version, License, etc.

Tutoriel : Créer un thème enfant WordPress pas à pas

Pourquoi un thème enfant ?

Pourquoi créer un thème enfant

Quand créer un thème enfant

Méthode 1 : Création manuelle (recommandée pour apprendre)

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

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

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

Étape 4 : Activer le thème enfant

Méthode 2 : Avec un plugin (plus rapide)

Child Theme Configurator

Personnaliser le thème enfant : exemples pratiques

Modifier un template PHP

Ajouter un bandeau WhatsApp flottant

Ajouter le temps de lecture sur les articles

Personnaliser le pied de page

Ajouter une police Google Fonts

Thèmes enfants pour les thèmes populaires

Astra

GeneratePress

OceanWP

Débogage du thème enfant

Le site est cassé après activation

Vérifier que le thème enfant est bien actif

Un template modifié ne s’affiche pas

Bonnes pratiques

Structure complète d’un thème enfant avancé

Erreurs fréquentes

Champ `Template` incorrect dans style.css

Variables PHP avec accents

Apostrophes non échappées dans une chaîne PHP

Copier `functions.php` du parent dans l’enfant

En-tête de style.css avec accents

Sur le même thème

Faire concevoir un site web professionnel

Application mobile Android et iOS

Pourquoi un thème enfant ?

Pourquoi créer un thème enfant

Quand créer un thème enfant

Méthode 1 : Création manuelle (recommandée pour apprendre)

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

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

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

Étape 4 : Activer le thème enfant

Méthode 2 : Avec un plugin (plus rapide)

Child Theme Configurator

Personnaliser le thème enfant : exemples pratiques

Modifier un template PHP

Ajouter un bandeau WhatsApp flottant

Ajouter le temps de lecture sur les articles

Personnaliser le pied de page

Ajouter une police Google Fonts

Thèmes enfants pour les thèmes populaires

Astra

GeneratePress

OceanWP

Débogage du thème enfant

Le site est cassé après activation

Vérifier que le thème enfant est bien actif

Un template modifié ne s’affiche pas

Bonnes pratiques

Structure complète d’un thème enfant avancé

Erreurs fréquentes

Champ Template incorrect dans style.css

Variables PHP avec accents

Apostrophes non échappées dans une chaîne PHP

Copier functions.php du parent dans l’enfant

En-tête de style.css avec accents

Sur le même thème

Faire concevoir un site web professionnel

Application mobile Android et iOS

Articles Similaires

Créer un site web pour un atelier d’ébénisterie ou de menuiserie sur mesure au Sénégal — WordPress 2026

Créer un site web pour une société de sécurité ou de gardiennage au Sénégal — WordPress 2026

Créer un site web pour un calligraphe arabe islamique au Sénégal — WordPress 2026

Champ `Template` incorrect dans style.css

Copier `functions.php` du parent dans l’enfant