ITSkillsCenter
WordPress

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

11 min de lecture

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-theme-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

  1. Allez dans Apparence → Thèmes
  2. Votre thème enfant apparaît dans la liste
  3. Cliquez sur « Activer »
  4. 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.

  1. Installer et activer « Child Theme Configurator »
  2. Outils → Child Themes
  3. Sélectionner le thème parent dans la liste
  4. Cliquer sur « Analyze » — le plugin vérifie la compatibilité
  5. Configurer les options (copier les menus, widgets, réglages du Customizer)
  6. Cliquer sur « Create New Child Theme »
  7. 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);
#child theme #personnalisation #thème enfant
Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 350.000 FCFA
Parlons de Votre Projet
Publicité

Articles Similaires