Votre site WordPress est maintenant bien installé et vous souhaitez personnaliser son thème. Vous pouvez le customiser avec les options disponibles du thème, bien sûr, mais vous voudrez surement changer des petites choses non prise en compte dans les options en passant directement par son code source comme les CSS.
Avant de voir comment créer un child theme WP, il est bon de savoir ce qu’est un thème enfant WordPress. Un thème enfant (child theme) est basé sur le thème parent et reprend l’ensemble des fonctionnalités de celui-ci sans les modifier. Vous pourrez ainsi personnaliser votre thème à partir du thème enfant sans jamais perdre vos modifications lors d’une mise à jour du thème parent.
Tous les fichiers placés dans le thème enfant (child theme) WordPress ne seront jamais écrasés ou modifier par le thème parent.
Si vous achetez un thème premium il y a de forte chance qu’il possède son child theme dans le zip que vous aurez téléchargé. Il faut bien sûr installer les deux thèmes mais n’activer que le thème enfant via l’administrateur de WordPress.
Pour créer le thème enfant (child theme) WordPress, vous aurez besoin, du thème d’origine (le thème parent) un accès FTP à votre serveur d’hébergement et la création d’un dossier et de 2 fichiers.
Avec votre client FTP préféré, ici j’utilise Filezilla, connectez-vous à votre serveur d’hébergement et rendez-vous dans « wp-content > themes ». Faites un clic-droit puis cliquez sur « Créer un dossier ».
Donnez un nom à votre thème enfant. En général on prend le nom du thème parent suivi de « -child » ici nous prendrons comme parent le thème « twentyseventeen » le nom du dossier sera donc « twentyseventeen-child ».
Pour que le « child theme » de WordPress fonctionne vous allez créer un fichier « functions.php » qui va indiquer au système de remplacer les réglages (CSS ; PHP ; etc.) du thème parent par ceux du thème enfant.
Avec votre éditeur de code préféré, moi j’utilise Notepad++ ; créez un fichier « functions.php » et copiez le code suivant :
[pastacode lang= »php » manual= »%3C%3Fphp%0A%2F**%0A**%20activation%20theme%0A**%2F%0A%0Aadd_action(%20’wp_enqueue_scripts’%2C%20’theme_enqueue_styles’%20)%3B%0Afunction%20theme_enqueue_styles()%20%7B%0Awp_enqueue_style(%20’parent-style’%2C%20get_template_directory_uri()%20.%20’%2Fstyle.css’%20)%3B%0A%7D%0A%3F%3E » message= »Fichier functions.php » highlight= » » provider= »manual »/]Explication des lignes de code : ici vous indiquez à WordPress l’emplacement de fichier de style CSS que le système doit prendre en premier pour écraser les réglages CSS du thème parent.
Vous allez maintenant créer le fichier CSS pour votre thème enfant. Avec votre éditeur de code créez un fichier que vous nommerez « style.css » et copiez lui le code suivant :
[pastacode lang= »css » manual= »%2F*%0ATheme%20Name%3A%20twentyseventeen-child%0ADescription%3A%20Une%20description%20de%20votre%20th%C3%A8me%0AAuthor%3A%20Votre%20pr%C3%A9nom%20et%20Nom%0AAuthor%20URI%3A%20https%3A%2F%2Fwww.votre-domaine.fr%0ATemplate%3A%20twentyseventeen%0AVersion%3A%201.0%0A*%2F » message= »Fichier style.css » highlight= » » provider= »manual »/]Explication des lignes de code :
Maintenant que vos fichiers du child theme sont créés, vous devez les copier dans le dossier du thème enfant que vous avez créez à l’étape 1 via votre client FTP (Filezilla).
Maintenant vous allez activer ce nouveau thème enfant via l’administrateur de WordPress. Rendez-vous dans « Apparence > Thème », vous voyez que votre thème enfant récemment créé est disponible. En passant la souris dessus, vous voyez apparaître les boutons « Activer » et « Prévisualisation en direct », cliquez sur le bouton Activer.
Voilà, votre thème enfant (child theme) WordPress est créé et activé. Vous pouvez maintenant modifier les CSS ou ajoutez de nouvelles fonctions pour le personnaliser à votre guise sans risque de tout perdre à la prochaine mise à jour du thème parent.
Comme vous venez de le voir, il est simple de créer un thème enfant (child theme) à votre WordPress, mais si vous ne vous sentez pas mettre les mains dans le code, il existe, bien sûr, des plugins pour le faire à votre place. En voici quelques-uns :
Voir les commentaires
Excellent article. Manip pas réalisée depuis un certain temps j'avais besoin de me rafraîchir la mémoire, grâce à vos explications pas-à-pas simples, claires et efficaces j'ai pu générer un thème child rapidement et facilement sans aucun bug ni aucune prise de tête. Grand merci !
Un petit mot pour dire merci pour ce tuto. Clair, simple, et efficace...
J'ai oublié...
Pouvez-vous ajouter une petite note sur la procédure à suivre pour ceux qui, comme moi, travaille avec Local (Flywheel). Ça ne change rien en fait à la création du thème enfant, il suffit de préciser qu'on doit placer manuellement le dossier thème enfant dans wp-content dont le chemin, variable selon le dossier où a été installé "Local", ressemble à celui-ci:
C:\Users\***(1)\Local Sites\*******(2)\app\public
***(1) = votre nom d'utilisateur
*******(2) = lenomde votre site
Encore merci
Bonjour
Merci pour l'article !
Je voudrai modifier un autre fichier css autre que le style.css
Dois-je le copier dans le thème enfant et mentionner ça dans functions.php ?
Bonjour et merci
Vous pouvez ajouter toutes les CSS dans votre fichier style.css du thème enfant ;)
@++
Bonjour,
super article, j'ai réussi et pourtant je pars de loin.
J'ai du faire quelques petits détours sur internet pour savoir comment se connecter à son serveur d'hebergement, comment utiliser filezilla et notepad++
mais ça fonctionne ! merci merci
merci