Home Tutos Tutos Wordpress Créer un thème enfant sur WordPress

Créer un thème enfant sur WordPress

5

Un petit tuto assez rapide, pour créer un thème enfant sur WordPress. Plus qu’un tutoriel, il s’agit surtout d’expliquer à quel point cela sera important pour la suite.

Un thème enfant, c’est quoi ?

Un thème-enfant, c’est simplement petit supplément au thème que vous utilisez (et qu’on appellera désormais « thème parent »). Le principe est simple : dès que vous allez modifier quelque chose sur votre site (style, fonctions etc.), on le fera sur les fichiers du thème enfant, plutôt que sur ceux du thème parent, ceci pour plusieurs raisons :

  • Ça vous permet d’avoir une sauvegarde de votre thème (le thème parent)
  • Ça évite de voir les changements sauter si votre thème doit être mis à jour
  • Ça permet de se faire la main sur le CSS, le PHP et l’HTML

Je vous renvoie au codex de WordPress à ce sujet : Faire un thème enfant sur le codex de WP

Construire un thème enfant

Si vous utilisez un thème premium (un de ceux qu’on trouve chez envato ou template monster), dans la majorité des cas, l’éditeur du thème parent fournit un thème enfant prêt à l’emploi. Mais si vous souhaitez utiliser cette solution recommandée par tous les intégrateurs WP, il va falloir mettre les mains dans le code. Rassurez-vous, c’est simplissime.
D’abord, créez un répertoire nom-du-thème-parent-child dans wp-content/themes. Dans notre cas, ça sera twentyfifteen-child.

Dans ce répertoire, créez les fichiers suivants :

  • style.css
  • functions.php

Fichier style.css

C’est ici qu’on collera tout le style qu’on souhaite ajouter ou surcharger. Pour que le thème enfant soit reconnu comme tel, il faut ajouter un en tête commenté dans le fichier :

/*
 Theme Name: Twenty Fifteen Child
 Theme URI: http://example.com/twenty-fifteen-child/
 Description: Twenty Fifteen Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: twentyfifteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twenty-fifteen-child
 */

Attention de ne pas mettre d’espace avant les “: », sinon ça va merdouiller… Il ne vous reste plus qu’à adapter les données en fonction du thème que vous utilisez.
La ligne Template correspond au nom du thème parent, il faut donc la remplir bien consciencieusement…

Le fichier functions.php

Le fichier functions.php sert, de la même façon, à rajouter des fonctions personnalisées au thème. On reviendra dessus dans un autre tutoriel, car il y a ici beaucoup à dire. Pour l’instant, on va se contenter d’ajouter une fonction pour que la feuille de style du thème enfant soit ajoutée dans le head de la page, derrière la feuille de style du thème parent.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}

Pourquoi ce tuto ?

Dans les semaines à venir, je vais vous présenter le thème X, et son builder de page qu’on appelle Cornerstone. Ce thème vous fera économiser des dizaines d’heures de travail, et vous permettra de réaliser à peu près tout et n’importe quoi ! De tous les thèmes que j’ai testés, c’est celui qui est le plus complet, le plus agréable à travailler. Évidemment, il faudra mettre les mains dans le code pour optimiser tout ça, mais vous verrez que ça ne sera pas très compliqué. Et, bien entendu, on va surcharger le thème parent à gogo pour avoir un truc 100 % customisé et optimisé pour le référencement.

D’où la nécessité d’introduire les notions de thème enfant, de surcharge des fichiers de Templates, et de mise à jour des fonctions PHP. That’s all Folks ! 🙂

tags:
GDM-Pixel / Charles Annoni Charles est chef de projet en marketing web et conception de sites. Formateur en référencement naturel, il est également consultant en webmarketing et propose des tutoriels exclusifs en France.

Les commentaires peuvent donner lieu à un lien dofollow si thématique similaire et ancre clean :)

Comment(5)

  1. Bonjour, et merci pour tous ces supers tutos !
    Séduite par le thème x (et par la super démo trouvée ici 😉 ), je me suis lancée pour la refonte du site de mon ami. Je viens de créer mon thème enfant, seulement, voilà, impossible de retrouver le style du thème parent en suivant cette procédure. Style.css du thème x (parent) et d’ailleurs totalement vide, le problème viendrait-il du fait que ce thème utilise plusieurs feuilles de style ? Je suis un peu perdue du coup 🙁

  2. Bonjour Céline, pour le thème X, pas la peine de créer un thème enfant de A à Z, tu peux utiliser celui que tu trouveras dans ton compte utilisateur chez Themeco. Dans ton cas, il y a un souci, car le fichier style.css du thème parent n’est pas vide (loin de là). Tu as du louper quelque chose. X n’utilise qu’une seule feuille de style, mais les plugins que tu as pu installer ont la leur également. Et si ton layout n’est pas complètement cassé au changement de thème, c’est que le style du thème parent est bien appliqué. Il faut « inspecter » les éléments du code source avec un outil comme Firebug, ou les consoles d’intégration native qu’on trouve sur Chrome ou Firefox.

  3. Salut Charles et merci pour l’ensemble de tes tutos, ça aide beaucoup !! J’ai bien assimilé le concept du thème enfant, cependant je me pose la question suivante : les modifications que je vais apporter à l’ensemble de mon site wordpress sont-elle prise en compte par le thème enfant ou le thème parent (les pages créées, les médias, les menus et autres…) ?

  4. Salut Josh, le thème enfant sert à plusieurs choses : modifier l’apparence du site, modifier les templates de page, et modifier les fonctions du thème parent. Toute modification faite sur le thème enfant prend le pas sur ce qu’on trouve sur un thème parent. Ca n’a donc rien à voir avec ce qui est propre au site et à son contenu (médias, pages, articles etc). Le contenu du site ne dépend pas du thème (si tu changes de thème, tu trouveras toujours tes articles, tes images etc). 🙂

LEAVE YOUR COMMENT

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *