Comment créer un thème enfant sur WordPress : Le guide étape par étape

Souhaitez-vous découvrir comment créer un thème enfant sur WordPress ?

Alors vous êtes au bon endroit.

Si vous êtes un utilisateur régulier de WordPress, vous êtes probablement familier avec les thèmes enfants. Si vous êtes nouveau sur WordPress, ou si vous n’avez jamais utilisé de thèmes enfants, cet article est pour vous !

Dans cet article, nous expliquerons l’utilité des thèmes enfants et comment créer rapidement le vôtre.

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

Un thème enfant vous permet d’apporter des modifications à votre thème WordPress et de les séparer de votre thème normal (“parent”). Ils sont utiles pour un certain nombre de raisons, mais surtout parce qu’ils vous permettent de garder votre thème à jour sans effacer vos modifications dans le processus.

Pour faire simple :

Un thème parent est votre thème WordPress habituel. Par exemple, Hello d’Elementor.
Un thème enfant est une copie de ce thème parent qui permet de conserver les modifications et les mises à jour séparément.

Pourquoi utiliser un thème enfant ?

Il y a plusieurs bonnes raisons d’utiliser un thème enfant :

Il protège votre thème principal contre les erreurs. Si vous apportez une modification à votre thème et que vous brisez votre site en cours de route, il est facile d’y remédier. Il suffit de supprimer le fichier du thème enfant et d’en copier un nouveau à partir du thème parent. Si vous avez modifié le thème parent directement, la réparation prendra beaucoup plus de temps et d’efforts.
Cela permet de séparer les personnalisations. Il est toujours bon de conserver les ajouts ou les modifications séparément du fichier d’origine, car cela permet de voir et d’ajuster plus facilement les changements. La plupart des thèmes WordPress ont une section “CSS personnalisé” pour cette raison précise.
Vos modifications ne seront pas effacées si le thème est mis à jour. Il est essentiel de maintenir votre thème à jour pour des raisons de sécurité. Mais si vous apportez des modifications à votre thème parent, elles risquent d’être effacées en cas de mise à jour. La solution ? Utilisez un thème enfant. Les thèmes enfants restent inchangés, même si vous mettez à jour le thème parent.

Comment créer un thème enfant : Le guide étape par étape

Pour ce guide, nous utiliserons le thème, Astra. Mais wQuel que soit le thème que vous utilisez, le processus devrait être sensiblement le même.

Il y a trois façons de créer un thème enfant :

En installant un plugin de thème enfant
En créant manuellement des fichiers et des dossiers dans votre répertoire WordPress.
En utilisant le générateur de thème enfant Astra

Méthode 1 : Utiliser un plugin

Il existe un certain nombre de plugins gratuits qui vous permettent de créer un thème enfant. Ils fonctionnent tous plus ou moins de la même manière, bien que certains aient des caractéristiques uniques.

Child Theme Configurator

Avec plus de 300 000 installations, ce plugin est le plugin de thème enfant le plus populaire. Il possède plus d’une douzaine d’options qui vous permettent de personnaliser votre thème enfant.

Voyons comment utiliser ce plugin pour créer un thème enfant.

Téléchargez le plugin à partir de ce lien et téléchargez-le sur votre site WordPress.

Après avoir activé le plugin, allez dans Outils > Thèmes enfants pour utiliser le plugin.

Sur le premier onglet, vous verrez un assistant pour créer un thème enfant. Sélectionnez votre thème parent, puis cliquez sur le bouton Analyser pour que le plugin l’évalue.

Si votre thème est adapté, vous recevrez un message de confirmation.

Sous le message de confirmation, vous trouverez un certain nombre de paramètres. Tout d’abord, nommez le répertoire du thème. Notez qu’il s’agit du nom du dossier, et non du nom du thème lui-même.

Ensuite, choisissez l’endroit où vous souhaitez enregistrer les styles. Vous pouvez utiliser le fichier style.css par défaut ou l’enregistrer dans une feuille de style distincte.

À l’étape suivante, choisissez comment accéder à la feuille de style du thème parent. Lisez la section Enqueue the Stylesheet ci-dessous pour plus d’informations sur ce processus.

Ouvrez le panneau des attributs du thème en cliquant sur le bouton. Ici, vous pouvez ajouter le nom, le site web, l’auteur et le site web de l’auteur du thème enfant.

Lors de la dernière étape, vous pouvez copier les menus, les widgets et d’autres paramètres de votre thème parent vers le thème enfant.

Enfin, cliquez sur le bouton pour créer votre nouveau thème enfant. Et voilà !

Autres plugins

Ces autres plugins fonctionnent de manière similaire.

Child Theme Wizard (Assistant de thème enfant) : Ce plugin dispose d’un “assistant” qui vous guide pas à pas tout au long du processus.

Generate Child Theme (Générer un thème enfant) : Il s’agit d’un plugin standard pour la création d’un thème enfant. Il est plus simple et comporte moins de fonctionnalités que les autres options, ce qui vous permet de créer le thème enfant plus rapidement.

Childdify Me : un autre plugin solide avec quelques options de personnalisation.

Child Theme Creator d’Orbisius : Un autre plugin populaire, avec plus de 30 000 installations.

Child Theme Generator : Un plugin simple mais très apprécié.

Méthode 2 : Créer un thème enfant manuellement

Si vous préférez créer un thème enfant vous-même, vous pouvez également le faire !

Étape 1 : Accédez à votre site via FTP/SFTP, SSH ou le navigateur de fichiers dans cPanel

Tout d’abord, vous devez vous connecter à votre site afin de pouvoir télécharger quelques fichiers. Le moyen le plus simple de le faire est d’utiliser FileZilla (FTP/SFTP), Putty (SSH) ou le navigateur de fichiers dans le panneau de contrôle de votre hébergeur (cPanel ou Plesk)

Vous ne savez pas comment faire ? Lisez l’un des guides ci-dessous.

Pour accéder à votre site via FTP/SFTP, lisez ce guide.
Pour accéder à votre site via SSH, lisez ce guide.
Pour accéder à votre site via le gestionnaire de fichiers de votre panneau de contrôle avec cPanel, lisez ce guide.
Pour accéder à votre site via le Gestionnaire de fichiers de votre panneau de contrôle avec Plesk, lisez ce guide.

Une fois que vous vous êtes connecté au site, allez dans le dossier /wp-content. Ensuite, allez dans /themes.

Créez un dossier pour le thème enfant et appelez-le astra-child. La première partie du nom doit être le nom du thème parent, suivi d’un tiret et du mot child.

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

Nous devons maintenant créer un fichier style.css qui contiendra votre code CSS. CSS, qui signifie Cascading Style Sheets (feuilles de style en cascade), est le langage de feuille de style utilisé pour concevoir des éléments sur les sites web.

Si vous ne connaissez pas du tout les feuilles de style en cascade, jetez un coup d’œil à ces guides destinés aux débutants :

Vous êtes déjà à l’aise avec les feuilles de style CSS ? Ouvrez votre éditeur de texte préféré, créez un nouveau fichier et enregistrez-le sous style.css.

Ensuite, copiez et collez le texte ci-dessous. Veillez à modifier le contenu pour qu’il corresponde à votre propre site web ou au nom de votre entreprise.

/*
 Theme Name:   Astra Child
 Theme URI:	http://example.com/astra-child
 Description:  Astra Child Theme is an awesome theme.
 Author:   	Brainstorm Force
 Author URI:   https://www.wpastra.com
 Template: 	astra
 Version:  	1.0.0
 License:  	GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     	astra
 Text Domain:  astrachild
*/

Ensuite, ajoutez le fichier au dossier astra-child de votre site via FTP/SFTP, SSH, ou le gestionnaire de fichiers cPanel/Plesk.

Étape 3 : Mise en file d’attente de la feuille de style

Nous devons maintenant ajouter une courte ligne de code qui relie le thème parent au thème enfant.

Il y a deux façons de le faire ; la première est facile mais inefficace, tandis que la seconde prend plus de temps mais est recommandée par WordPress.

Première méthode

Cette première méthode est considérée comme dépassée car elle augmente le temps de chargement de la feuille de style. Cependant, elle est beaucoup plus simple à mettre en œuvre et, si votre site n’est pas particulièrement grand, il n’y a que très peu d’inconvénients pratiques.

C’est particulièrement vrai si vous ne faites qu’un petit nombre de modifications dans le thème enfant.

Ajoutez simplement le code suivant au bas de votre fichier style.css :

@import url("../astra/style.css") ;

Deuxième méthode

La deuxième méthode est recommandée par WordPress.org, mais nécessite un peu plus de connaissances techniques. C’est la méthode préférée, surtout si vous avez un site plus grand et que vous essayez d’optimiser le temps de chargement des pages.

Dans votre barre latérale d’administration WordPress, allez dans Apparence > Editeur de thème.

Sélectionnez votre thème enfant et trouvez le fichier functions.php. Si vous n’en avez pas, créez-le.

La première ligne de ce fichier doit être une balise PHP d’ouverture (<?php), suivie du code ci-dessous :

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( ' astra-child', get_stylesheet_uri(),
        array( astra ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

Veillez à remplacer astra-child par le nom de votre thème enfant et array par le nom du thème parent.

Notez que contrairement au fichier style.css (ou tout autre fichier), la version du fichier functions.php du thème enfant n’écrase pas le fichier du thème parent. Elle ajoute simplement le code du fichier enfant au fichier parent. Il n’est donc pas nécessaire de copier l’intégralité du fichier du thème parent.

Étape 4 : Activer le thème

Une fois le thème téléchargé, ouvrez votre panneau d’administration WordPress et allez dans Apparence > Thèmes. Votre thème devrait maintenant être listé. Activez-le.

Comme nous n’avons pas encore ajouté de nouveau code, le thème enfant sera exactement le même que son thème parent.

Étape 5 : Ajouter des personnalisations

Maintenant, ajoutons quelques personnalisations. Pour ce faire, vous devez être familier avec le HTML et le CSS. Si ce n’est pas le cas.

La manière la plus simple d’apporter une modification spécifique au thème de votre site web est d’utiliser l’outil d’inspection de votre navigateur. Dans la plupart des navigateurs, y compris Google Chrome, Mozilla Firefox et Apple Safari, vous pouvez le faire en cliquant avec le bouton droit de la souris sur un élément. Un panneau de développement apparaît alors sur le côté de la fenêtre de votre navigateur.

Par exemple, cliquez avec le bouton droit de la souris sur l’en-tête, puis sélectionnez Inspecter. La barre latérale des développeurs s’affiche alors.

Comme nous avons spécifiquement inspecté l’en-tête, vous pouvez voir la balise HTML

affichée. Comme nous voulons modifier cet en-tête (et tous les en-têtes), nous voulons cibler l’élément H1.

Pour ce faire, allez dans Apparence > Modifier les thèmes. Sur le côté droit, sélectionnez votre thème enfant. Ajoutez ensuite le code suivant au fichier style.css.

h1 { color : blue ; }

Enregistrez le fichier et retournez sur la page de votre site. Le titre de la rubrique devrait maintenant être bleu.

Beau travail ! Vous avez créé un thème enfant. Chaque fois que vous voudrez apporter des modifications à votre thème, ajoutez-les à ce fichier style.css – et non au fichier style.css de votre thème parent.

Vous pouvez également télécharger le fichier modifié directement via FTP/SFTP, SSH ou le gestionnaire de fichiers.

Méthode 3 : Utiliser le générateur de thème enfant Astra

Astra, dispose d’un outil puissant qui vous permet de créer un thème enfant pour le thème Astra. L’Astra Child Theme Generator vous permet de créer un thème enfant d’un simple clic.

Pour utiliser le générateur, allez sur ce lien et remplissez le formulaire. Si vous cliquez sur “Advanced Options,”, vous pouvez ajouter des détails supplémentaires comme Author, Description, et Folder Name. Vous pouvez également ajouter une capture d’écran si vous le souhaitez.

astra child theme generator advance settings

Cliquez ensuite sur Generate. Le thème enfant sera téléchargé sur votre ordinateur.

Vous pouvez l’ajouter à votre site comme n’importe quel autre thème : allez dans Apparence > Thèmes puis cliquez sur Ajouter un nouveau.

Voilà, c’est fait ! Vous avez maintenant un nouveau thème enfant, que vous pouvez modifier directement dans l’éditeur de thème.

Autres astuces de création de thèmes WordPress

Comment modifier d’autres fichiers dans votre thème

Chaque thème WordPress est composé de plusieurs fichiers .php. Ceux-ci incluent comments.php, header.php, body.php, footer.php, et ainsi de suite.

Ces fichiers sont appelés fichiers “template” et ne doivent pas être modifiés directement, pour la même raison que vous ne devez pas modifier style.css. Si vous souhaitez modifier l’un d’entre eux, vous pouvez suivre un processus similaire à celui que nous avons suivi ci-dessus.

Pour cet exemple, nous utiliserons le fichier header.php.

Ouvrez ce fichier et copiez-en tout le contenu. Collez ensuite ce contenu dans un nouveau fichier texte sur votre ordinateur. Apportez les modifications nécessaires, en veillant à ne rien changer d’autre.

Lorsque vous avez terminé, enregistrez le fichier sous le nom header.php et téléchargez-le dans le dossier du thème enfant via FTP/SFTP, SSH ou le gestionnaire de fichiers.

Pour effectuer des modifications à l’avenir, vous pouvez soit le modifier directement dans l’éditeur WordPress (en allant dans l’éditeur de thème), soit télécharger à nouveau le fichier mis à jour.

Functions.php

Nous pouvons également faire quelque chose de similaire pour functions.php, le fichier qui contrôle de nombreux processus sur votre site. Contrairement au fichier style.css (ou à tout autre fichier), la version du thème enfant du fichier functions.php n’écrase pas le fichier du thème parent.

Elle ajoute simplement le code du fichier enfant au fichier parent.

Ouvrez tout d’abord le fichier functions.php de votre thème.
Copiez tout le texte, puis collez-le dans un nouveau document texte.
Apportez les modifications nécessaires, puis enregistrez le fichier sous functions.php.
Enfin, téléchargez le fichier dans le même dossier de thème enfant.

Conclusion

Voilà qui résume bien la situation ! Pour rappel, vous devriez toujours essayer d’utiliser un thème enfant lorsque vous apportez des modifications à un thème WordPress. Bien qu’il puisse sembler plus facile de modifier rapidement le thème parent, à long terme, vous aurez plus de problèmes.

Utilisez-vous un thème enfant ? Quelle méthode utilisez-vous pour effectuer des modifications ? N’hésitez pas à nous en faire part dans les commentaires !

Partager cet Article :

Liyor Attias

Bonjour, je suis Liyor Attias, et je vais vous montrer les meilleurs outils pour amener votre entreprise vers de nouveaux sommets. Je crois fermement que la meilleure façon d'apprendre est d'enseigner, et je suis ici pour le faire !