Comment créer un thème enfant (child theme) sur WordPress ?

Themes & Page BuildersComment créer un thème enfant (child theme) sur WordPress ?

Créer un thème enfant WordPress est une pratique essentielle pour personnaliser votre site en toute sécurité et sans perdre vos modifications lors des mises à jour du thème parent. Ce guide vous fournira le code exact pour les fichiers style.css et functions.php, prêt à copier-coller, afin de simplifier grandement le processus souvent obscurci ailleurs.

Pourquoi utiliser un thème enfant WordPress ?

Vous avez investi du temps et des ressources pour créer un site WordPress à votre image. Vous avez peaufiné le design, ajouté des fonctionnalités spécifiques et optimisé l’expérience utilisateur. Imaginez maintenant que toutes ces heures de travail soient réduites à néant par une simple mise à jour de votre thème principal. C’est précisément pour éviter ce scénario catastrophe que le concept de thème enfant WordPress a été introduit par l’équipe de développement de WordPress.

En substance, un thème enfant hérite de toutes les fonctionnalités et de tous les styles d’un thème parent existant. Il vous offre un environnement sûr pour apporter vos propres modifications sans altérer le thème original. C’est la solution par excellence pour quiconque souhaite personnaliser son site sans compromettre sa maintenabilité et sa sécurité. L’importance de cette approche est souvent sous-estimée jusqu’à ce qu’une mise à jour efface des semaines de travail. D’où la question : pourquoi s’en passer ?

La mise en place d’un thème enfant est un investissement minimal qui vous protège de pertes de temps et d’argent considérables à chaque mise à jour de votre thème principal. C’est une étape non négociable pour tout site WordPress professionnel.

Nicolas Buathier, Expert WordPress chez Studio Move On

Quels sont les prérequis avant de créer votre thème enfant ?

Avant de vous lancer dans la création de votre thème enfant WordPress, assurez-vous d’avoir les outils et les connaissances de base nécessaires. Cela vous évitera bien des frustrations et des erreurs potentielles.

• Accès FTP ou gestionnaire de fichiers cPanel : Vous aurez besoin d’accéder aux fichiers de votre installation WordPress sur votre serveur. Un client FTP comme FileZilla ou l’explorateur de fichiers de votre cPanel est indispensable.
• Un éditeur de texte : Oubliez le Bloc-notes de Windows. Utilisez un éditeur de code professionnel comme VS Code, Sublime Text ou Notepad++. Ils offrent la coloration syntaxique et d’autres fonctionnalités utiles pour écrire du code propre.
• Connaissance de base du HTML et du CSS : Pour personnaliser l’apparence de votre site, une compréhension des sélecteurs CSS et de la structure HTML est recommandée.
• Identification du thème parent : Assurez-vous de savoir quel est le nom exact du dossier de votre thème parent. Vous le trouverez généralement dans wp-content/themes/.

Enfin, et c’est un point crucial souvent négligé : sauvegardez votre site avant toute modification majeure. Même si la création d’un thème enfant est une pratique sécurisée, une erreur de manipulation est toujours possible. Une sauvegarde complète (fichiers + base de données) vous permettra de revenir en arrière en cas de problème. Pour cela, des extensions comme UpdraftPlus ou All-in-One WP Migration sont excellentes, ou bien contactez votre hébergeur qui propose souvent des solutions de sauvegarde.

Comment créer un thème enfant WordPress : Le guide pas à pas

Maintenant que vous comprenez l’intérêt et les prérequis, passons à la pratique. Suivez attentivement ces étapes pour creer theme enfant wordpress de manière efficace et sans accroc. Nous allons créer le dossier et les deux fichiers essentiels : style.css et functions.php.

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

Via votre client FTP ou le gestionnaire de fichiers de votre hébergeur, naviguez jusqu’au répertoire wp-content/themes/. C’est là que sont stockés tous vos thèmes. Créez un nouveau dossier pour votre thème enfant. Le nom du dossier doit être unique et idéalement lié au nom de votre thème parent, suivi de -child. Par exemple, si votre thème parent est twentyseventeen, nommez le dossier twentyseventeen-child.

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

À l’intérieur de ce nouveau dossier (par exemple, twentyseventeen-child), créez un nouveau fichier nommé style.css. Ce fichier contient les informations de base de votre thème enfant et sera le lieu de vos premières personnalisations CSS. Copiez-collez le code suivant en l’adaptant :

/*
Theme Name: Nom de votre Thème Enfant
Theme URI: https://site-wordpress.fr/
Description: Thème enfant pour le thème parent [Nom du Thème Parent]
Author: Votre Nom ou Nom de votre Agence
Author URI: https://site-wordpress.fr/
Template: nom-du-dossier-du-theme-parent
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nom-de-votre-theme-enfant
*/

/* Vos styles CSS personnalisés commencent ici */
body {
    background-color: #f0f0f0; /* Exemple de modification de couleur de fond */
}

Explications des champs essentiels :

• Theme Name : Le nom de votre thème enfant tel qu’il apparaîtra dans l’administration de WordPress. Par exemple, « Mon Thème Enfant (Twenty Seventeen) ».
• Theme URI : L’URL de votre site ou de la page de votre thème enfant.
• Description : Une courte description de votre thème.
• Author et Author URI : Votre nom/agence et l’URL de votre site.
• Template : C’est le champ le plus important. Il doit contenir le nom exact du dossier de votre thème parent. Si votre thème parent est Twenty Seventeen, ce sera twentyseventeen.
• Version : Le numéro de version de votre thème enfant. Démarrez à 1.0.0 et incrémentez à chaque mise à jour majeure.

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

Créez un autre nouveau fichier nommé functions.php dans le même dossier de votre thème enfant. Ce fichier est crucial car il permet d’hériter correctement des styles du thème parent et d’ajouter vos propres fonctionnalités PHP. Copiez-collez ce code :

<?php
/**
 * Charger les feuilles de style du thème parent et enfant.
 */
function mon_theme_enfant_styles() {
    // Enqueue la feuille de style du thème parent
    // Assurez-vous que 'nom-du-dossier-du-theme-parent' correspond au 'Template' dans style.css
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Enqueue la feuille de style du thème enfant
    // 'mon-theme-enfant-style' est un handle unique pour votre thème enfant
    // Il est important de le charger APRÈS le thème parent pour surcharger les styles si nécessaire
    wp_enqueue_style( 'mon-theme-enfant-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ), // Dépendance : assure que le parent est chargé avant
        wp_get_theme()->get('Version') // Version automatique basée sur celle définie dans style.css
    );
}
add_action( 'wp_enqueue_scripts', 'mon_theme_enfant_styles' );

/**
 * Ajoutez vos fonctions personnalisées ci-dessous.
 */
// Exemple : Modifier le texte du pied de page
/*
function custom_footer_text() {
    return '© ' . date('Y') . ' Mon Super Site WordPress. Tous droits réservés.';
}
add_filter( 'twentyseventeen_credits', 'custom_footer_text' );
*/
?>

Explications du code functions.php :

• mon_theme_enfant_styles() : Cette fonction est la méthode correcte pour charger les feuilles de style (CSS) du thème parent et de votre thème enfant. C’est essentiel pour que votre thème enfant hérite du design du parent et que vos propres styles puissent les surcharger.
• wp_enqueue_style() : C’est la fonction WordPress pour ajouter des feuilles de style. Le premier appel charge le style.css du thème parent.