Les thèmes WordPress sont par nature déjà “customisables”, leur installation simple, les possibilités offertes sont nombreuses mais il y a toujours de petites choses que nous voulons changer. Une couleur ici, une taille de police là-bas, peut-être utiliser un autre appel à l’action, bref nous voulons modifier le CSS de notre thème WordPress et bien plus encore…
Le seul hic, c’est que la modification, même infime, d’un thème vous empêche de faire sa mise à jour vers une nouvelle version à l’avenir, parce que si vous mettez à jour, alors vous perdez toutes vos modifications :/
Un thème enfant pour quoi faire ?
Les thèmes enfants résolvent ce problème en vous permettant d’utiliser toutes les fonctionnalités de votre thème tout en vous laissant mettre à jour ce dernier, sans peur de perdre vos modifications. Notons également que nous pouvons aussi utiliser, dans certains cas, les mu-plugins ;)
Un thème enfant, c’est quoi ?
Un thème enfant est un thème basé sur votre thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi vous pouvez apporter des modifications à votre enfant et en cas de mise à jour du parent, vous ne les perdez pas!
Tout fichier placé dans le thème enfant et portant le même nom que dans le thème parent, prendra le dessus et écrasera le fichier d’origine (sauf le functions.php).
A noter : de nombreux thèmes premium de nouvelle génération, embarquent dans leur zip un thème enfant prêt à l’emploi. Dans ce cas, il vous suffit juste de mettre en place ce dernier. Attention, il faut bien évidemment installer le thème parent (sans l’activer), puis installer le thème enfant et enfin activer ce dernier.
Comment mettre en place un thème enfant ?
Pour faire un thème enfant, nous avons besoin du thème d’origine que l’on qualifie de thème parent et de 2 fichiers que nous allons créer. Il faudra également créer un répertoire pour y placer les fichiers du thème enfant.
La première des choses à faire est donc de créer un dossier pour votre thème enfant dans le FTP. Il vous suffit d’aller créer le dossier du thème enfant dans /wp-content /themes /nomdevotrethemeenfant/.
Nous allons maintenant créer les deux fichiers dont nous avons besoin et que nous placerons dans le dossier de notre thème enfant :
- un fichier functions.php
- un fichier style.css
Pour l’exemple, je vais me baser sur un thème parent qui porte le nom de WPServeur, ceci étant également le nom du dossier de mon thème dans le FTP.
Dans le fichier functions.php, nous allons intégrer le code qui va permettre de combiner ou d’écraser le fichier style.css du parent autrement qu’avec le fameux @import css (on déconseille l’@import car cela ajoute une requête inutile cf: https://codex.wordpress.org/)
Voici donc le code à mettre dans le fichier functions.php du thème enfant :
<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Une fois ceci fait, nous avons déjà la partie qui va nous permet d’appeler notre fichier style.css. Il ne nous reste plus qu’a créer le fichier style.css du thème enfant. Voyons ce que doit obligatoirement contenir ce fichier :
/* Theme Name: Theme enfant Description: Theme enfant de Benoit WPServeur Author: Benoit - WPserveur Author URI: https://www.wpserveur.net Template: WPServeur Version: 0.1.0 */
Description ligne par ligne du fichier style.css :
- Theme Name : Le nom que je veux donner a mon thème enfant
- Description : La description de mon thème enfant celle qui apparaîtra dans mon gestionnaire de thème WordPress
- Author : L’auteur du thème enfant, en l’occurrence c’est vous
- Author URI : L’url du site de l’auteur parce qu’un peu de pub ne fait pas de mal
- Template : Le nom du thème parent en l’occurrence le nom du répertoire tel qu’il est écrit sur le FTP
- Version : La version de votre thème enfant à titre indicatif
Petits détails à ne pas oublier sinon votre thème enfant ne fonctionnera pas :
- Ne jamais mettre d’espace avant les deux points. Theme Name: fonctionnera mais Theme Name : ne fonctionnera pas
- Pour l’attribut Template : Si votre thème dans l’admin se nomme par exemple “wpserveur” mais que le nom affiché dans le répertoire FTP est “WPserveur” alors il faudra obligatoirement respecter la casse et écrire WPserveur et non wpserveur
- Pour le reste, vous pouvez ne rien mettre, cela fonctionnera quand même !
Afin d’égayer un peu votre gestionnaire de thèmes WordPress, vous pourrez aussi mettre un fichier screenshot.jpg (600×450 px conseillé) qui affichera la miniature de votre thème enfant dans le gestionnaire de thèmes.
Voilà, votre thème enfant est prêt !
Vous pouvez maintenant ajouter toutes vos modifications CSS dans le fichier style.css du thème enfant et vous ne les perdrez plus en cas de mise à jour du thème parent (n’oubliez pas de les commenter, ça aide parfois;).
Désormais, si vous voulez modifier votre single.php ou votre header.php, rien de plus simple! Copiez-les du parent vers le thème enfant et modifiez-les ! Vous pouvez également ajouter des fonctions dans le functions.php de votre enfant, tout en sachant que le functions.php du parent sera toujours chargé en dernier et qu’il prendra le dessus en cas de fonctions identiques.
Y’a pas un plugin pour le faire à ma place ?
Bien que ce ne soit pas vraiment nécessaire au vu de la simplicité de la création d’un thème enfant, nous sommes sous WordPress et forcément il n’y a pas 1 plugin qui peut le faire, mais 3. L’utilisation de ces plugins est à réserver aux purs débutants, pour ma part je préfère largement la méthode manuelle.
- https://wordpress.org/plugins/one-click-child-theme/
- https://wordpress.org/plugins/child-themify/
- https://fr.wordpress.org/plugins/child-theme-configurator/
Modèle de thème enfant WordPress à télécharger :)
Pour faire encore plus simple et vous permettre d’utiliser rapidement un thème enfant, je vous propose un modèle à télécharger gratuitement et à adapter pour vos besoins. Cliquez sur l’icone ZIP ci-après pour télécharger (fichier zip de 97 ko) ce modèle de thème enfant prêt à l’emploi :)
Pour adapter ce thème enfant à vos besoins, il vous suffit de le décompresser, d’éditer la ligne “Template” du fichier style.css avec le nom exact du répertoire de votre thème parent et d’uploader le tout via FTP dans le répertoire /wp-content/themes/, enfin activez-le depuis le menu WordPress Apparence>>Thèmes.
Peut-on aujourd’hui se passer d’un thème enfant ?
Créer un thème enfant pour customiser son site WordPress est une pratique très répandue et une étape presque obligatoire… Pourtant, il existe d’autres solutions qui auront, finalement, le même rendu. Dans cet article, je vais vous expliquer de quelle manière et dans quels cas on peut se passer d’un Thème enfant :
Peut-on se passer d’un Thème Enfant pour customiser son WordPress ?
Traduire son thème avec un thème enfant
Traduire son thème enfant peut s’avérer complexe… Pourtant, vous avez pu voir dernièrement sur WPFormation qu’il était enfantin de traduire son thème à l’aide de l’extension Loco Translate… Toutefois, si vous préférez ne pas être dépendant d’un plugin, il existe une autre solution : traduire son thème WordPress dans un thème enfant avec Poedit. Découvrons ensemble les étapes pour y parvenir :
@Benoit H,
Impeccable, il y a juste un petit problème pour moi, j’ai un “read more” que je voudrais supprimer et la police des extraits d’articles n’est pas correcte, j’ai pourtant ajouté dans mon thème modernize cet “additional style css” :
div.blog-item-holder .blog-item3 .blog-thumbnail-info {display:none;}
a.blog-continue-reading {
display: none;
Lire la suite
}
Voilà si tu sais résoudre cela, ce serait super pour les futures mises à jour ! A noter que j’ai aussi un style-custom.css qui m’embête parce que je ne sais pas où le mettre :-)
Merci !
@vincent je pense que un !important devrait écraser la valeur css du thème parent il faudrait donc mettre ce code:
div.blog-item-holder .blog-item3 .blog-thumbnail-info {display:none !important;}
a.blog-continue-reading {
display: none !important;
}
Salut @benoit,
J’ai peut-être loupé un truc mais il me semble que la ligne suivante charge le style.css du thème parent :
wp_enqueue_style(‘theme_child-style’, get_template_directory_uri() . ‘/style.css’, array(), ‘0.1’, ‘all’);
Du coup, pourquoi mettre un handle nommé “theme_child-style” ?
Autre question, pourquoi charger le style.css du thème enfant avec :
wp_enqueue_style(‘theme_child-style’, get_stylesheet_uri());
WordPress le charge automatiquement et je ne pense pas qu’il y ait un intérêt à le désactiver avec wp_dequeue_style(), si ?
A+ ;)
@benoit,
Merci, c’est très pratique, il m’a fallu 2 minutes en suivant tes conseils !!!
@alex très juste j’utilise ce code depuis longtemps et je ne l’ai pas mis à jour en fait. Il faut que je rectifie mon erreur, merci.
Article édité et fichier ZIP modifié ;)
Bonjour @benoit
D’abord merci pour cette nouveau tutoriel indispensable. Par contre, j’ai une question concernant le client FTP. J’ai voulu télécharger FileZilla mais visiblement, il y a plein de versions vérolées qui circulent et l’antivirus s’active. Que faire dans ces cas-là? Mon thème (Divi) possède bien un plug-in Divi_Children mais il ne fonctionne pas car il manque le fichier css. Merci d’avance :)
@fany pour une version sûre de Filezilla, il faut aller à la source https://filezilla-project.org/
Pour Divi, @benoit a surement ce qu’il vous faut ;)
@wpformation, oui, oui c’est ce que j’avais fait mais je vous confirme qu’en passant par le site officiel, on est redirigé vers SourceForge et que c’est un fichier que mon antivirus bloque :( Donc, je suis un peu sceptique…
@benoit, “qu’avez-vous” exactement pour Divi? ;)
Encore merci pour votre aide.
Salut @benoit,
Comme @alex, je ne suis pas certain du wp_enqueue_style dans le functions.php. Je ne l’utilise dans aucun de mes thèmes enfant, et le CSS “enfant” surcharge bien celui du parent.
@fany téléchargez le zip et suivez le tutoriel dans la page et votre thème enfant sera activé, vous pourrez ensuite supprimer le plugin.
Dans la ligne à éditer il suffit de mettre Divi
@dsigned c’est la méthode recommandée par le codex : https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant
@dsigned La remarque que j’ai faite concernait la première version de l’article. Cela a été corrigé donc c’est tout bon :)
@benoit merci! En fait, j’essayais d’installer le plugin en tant que thème… Et pourtant, je ne suis pas blonde ;) Cherchez l’erreur…
@benoit , @alex J’étais à l’ancienne (depuis plusieurs années), avec juste le “import” que j’ai supprimé récemment, je ne m’étais pas remis à jour avec le codex qui précise effectivement l’utilisation de wp_enqueue_style. En tout cas, sans, ça fonctionne aussi :)
Par contre, il m’arrive parfois d’avoir des fichiers templates enfant qui ne surchargent pas le parent… :\ Ça vous est déjà arrivé ?
@dsigned en dehors du functions.php (comme mentionné dans l’article) aucun soucis de mon côté avec cette méthode !
@wpformation pas de soucis non plus au niveau des styles ou des fonctions. Pour donner un exemple concret, sur le thème “Themetastic”, le single_portfolio.php (enfant) ne surcharge pas le single_portfolio.php (parent)… Un ami a le même soucis sur d’autres fichiers enfant sur le thème “Avada” pour autre exemple.
@dsigned certains thèmes effectivement charge un espece de custom.css dans l’index.php et des fois ils se retrouvent apres le contenu du css enfant ce qui fait que le css du theme parent prend le dessus.
@benoit Encore une fois, pour mon problème, il ne s’agit pas de CSS, mais d’une page template .php (où je suis susceptible d’appeler ou de créer d’autres variables et requêtes personnalisées) qui écraserait la mise en page originale du thème parent.
Du coup, n’ayant pas trouvé d’où venait le problème (qui n’arrive que sur certains thème), je “bourrine” en modifiant le fichier du thème parent, et recommence dès que j’ai une mise à jour tu thème à faire…
@dsigned aurais-tu un lien pour que je vois ça ;)
Salut @benoit,
Le thème enfant est à mettre en place (dans le meilleur des cas) dès la mise en production du site? Si l’on à déjà effectué des modifications de styles ou autres sur son thème, c’est plus compliqué de mettre ça en place?
Dans le même temps, pas de thème enfant mis en place = si l’on à une mise à jour de son thème, on perd toutes les modifications?
Merci!
@greg
non il suffira d’implanter dans ton thème enfant tes modifications tout simplement.
sinon oui si tu mets à jour ton thème sans thème enfant tu perdras toutes modifications
@benoit
Une question :
Imaginons, que l’on décide de créer un thème enfant après un bon nombres de modifications apportés au thème parents. Pour ne pas perdre les modifications lors d’une mise à jour, on pourrait facilement faire un copier/coller de toutes les modifications apportées à style.css, options.css ou autres et le coller dans le style.css du thème enfant?
Cela fonctionnerait de la même manière, non?
@greg tout a fait? c’est a ça que sert le thème enfant donc oui même je diraiS que je suggère a tous ceux qui ont fait des modifications dans leur thème enfant de tout rapatrier dans un thème parent.
Bonjour,
Tout d’abord un grand merci pour votre article. J’ai besoin de votre aide car j’ai un problème.
J’ai créé mon thème enfant et il fonctionne mais en partie seulement. Quand je fais une modification sur style.css de mon thème enfant, cette modife se répercute sur mon site. J’ai également pu intégrer tous les fichiers .php que j’avais modifié et quand je les teste ils fonctionnent aussi.
Par contre, j’ai un gros problème sur le functions.php. En effet il semble que ce fichier de mon thème enfant ne soit pas appelé, comme s’il n’existait pas. Quand je teste des modifes dedans, ces dernières ne sont pas prises en compte sur mon site.
Voilà mon fichier functions.php : http//pastebin.com/3yDvA94n
J’ai pourtant l’impression d’avoir fait comme il faut, mais pourriez-vus y jeter un oeil et me dire ce qui ne va pas ?
Je ne sais plus quoi faire.
Merci beaucoup pour votre aide,
Bien à vous,
Camille
Bonjour
J’avais fait un thème enfant pour “Custom Community” (il y a plus d’un an), et à l’époque j’avais très bien saisi que je ne pouvais donc plus faire de mise à jour du thème… ce que j’ai fait aujourd’hui parce que j’avais oublié :(
Bref, ai-je moyen de revenir à la version précédente de Custom Community?…
Merci!
Merci pour ce fichier, très utile quand on ne sait pas mettre les mains dans le cambouis.
Bonne continuation.
Bonjour !
Je suis complètement paumé ! Je cherche désespérément depuis des heures et des heures comment créer un thème enfant pour Divi qui vient de sortir une mise à jour. Je suis sous Mac et ne trouve que des explications valables pour PC. Souvent les termes utilisés sont différents. Par exemple “répertoire”. C’est la première fois que j’entends parler de “répertoire” c’est quoi ? C’est un dossier ? Peu importe, j’ai bien lu ce tutoriel 10 fois. Il semble très clair et cependant je suis incapable de créer les deux fichiers : functions.php et style.css
Je suis découragé. Je suis peut-être ignare ou stupide, pouvez-vous me dire comment je peux créer ce fichu thème enfant pour Divi ?
Merci beaucoup
Autre question et désolé d’être si bête mais partout je lis “via le FTP” ou bien “dans le FTP”, etc… et je ne vois pas ce que ça peut être, bien que j’aie lu sur wikipedia ce que signifie un FTP.
J’ai bien le dossier wp-content /themes dans un dossier “wordpress” qui se trouve lui-même dans mes téléchargements. C’est là que j’ai créé un dossier Divi child, mais ça s’arrête là. Après je suis bloqué je ne comprends rien à ce que je dois faire. Moi je suis un littéraire pas un technicien.
@wpformation , @benoit
Bonjour,
Je débute sous WordPress et ça fait 3 jours que je m’arrache les cheveux pour créer un thème enfant de Pinstrap. Dans le style.css de Pinstrap il est bien indiqué que les modifs doivent être faites par un thème enfant… Sauf que ça ne fonctionne pas.
Tout ce que j’ai utilisé jusqu’à présent ne me permet pas de modifier quoique ce soit dans mon thème enfant qui apparaît bien dans WordPress.
Et quand je pointe sur un élément avec firebug la feuille de style indiquée est celle de Pinstrap et pas mon thème enfant.
Auriez vous une idée avant que je ne modifie sauvagement le thème?
@marien pour le thème enfant de DIVI il suffit (avec filezila) d’uploader le contenu du zip et d’activer le thème enfant depuis WordPress, par contre, attention si les modifications ont été faites dans le thème parent, elles partiront avec la mise à jour. Il faut déplacer vos modifications dans le thème enfant.
@leslie il faut mettre des modifications dans le fichier style.css pour que le fichier soit chargé. Le principe du thème enfant est qu’il écrase les valeurs du thème parent pour une même entité.
Exemple :
le thème parent contient
body {background:#fff;} /*fond blanc*/
si dans le theme enfant je met :
body {background:#000;} /*fond noir*/
j’aurais bien un fond noir sur le body car mon thème enfant va écraser le sélecteur du theme parent par mon sélecteur + sa valeur
@benoit
C’est bien ce que j’ai fait. J’ai commencé par modifier le body, le titre mais rien y fait.
Je suis en serveur local, je ne pense pas que ça soit un problème?
Je vois pas ce qui pourrais bloquer…
Merci énormément pour ces informations qui m’ont été très utiles ! Je ne poste normalement jamais pour remercier qui que ce soit de quoi que ce soit, mais pour le coup, ça m’enlève une bonne épine du pied, alors merci chef !
Merci pour ce rappel, c’est toujours bon de s’assurer des bonnes lignes de code.
Une question : Si le thème parent contient plusieurs fichiers .css (le mien en contient une bonne dizaine dont dans des sous-dossiers), faut-il l’indiquer dans functions.php ?
Bonjour, petit souci quand on a un thème enfant avec des dossiers et sous dossiers indispensables pour que certaines page soit traduite on fait comment ?
Car a voir elles ne sont pas prises en compte et ni visible depuis le tableau de bord Apparence / Editeur
Exemple: j’ai mon thème enfant et je doit avoir pour que mes traductions fonctionnes ceci:
/framework/functions/ avec 3 fichiers .php
Bien celle-ci ne fonctionne pas, je les remet dans le thème parent ceci fonctionne.
Donc je pense qu’il faut une ligne de code dans function.php du thème enfant pour que celui-ci soit opérationnel, mais comment faire et quoi mettre je trouve rien sur Google qui parle de ceci.
@benoit bonjour et merci pour cet article.
j’ai bien crée mon thème enfant seulement le css du thème parent prend le dessus je ne vois pas pourquoi ? seul deux trois choses sont de la bonne couleur.
mon thème premium a un custom css faut il mettre mon css dedans au lieu de mon style.css ? si oui il correspond à quel type de fichier php?
@leslie , Bonjour j’ai le même soucis que tu avais as tu trouver une solution pour le css du parent qui prend le dessus et dont le css du thème enfant ne fonctionne pas ?
si quelqu’un à la solution je suis preneur !
je te remercie d’avance Leslie Salutations à tous et toutes
Super article merci beaucoup ! J’aurais néanmoins une question. Si les templates du child écrasent ceux du thème parent, comment ça se passe au niveau des mises à jour ? Les templates parents seraient à jour, mais pas ceux du child du coup, ce qui pourrait entraîner des failles. Comment faire dans ce cas-là ?