Créer un thème enfant wordpress pour modifier son thème

Vous souhaitez apporter des modifications à votre thème wordpress ? Mais, vous avez lu qu’il n’est pas recommandé de le faire sur le thème directement. C’est pourquoi vous êtes ici ; le thème enfant ne vous est pas inconnu, vous voulez en savoir plus pour apporter la personnalisation souhaitée à votre site grâce à lui. On voit ici ce qu’est qu’un thème enfant et comment l’installer et le configurer simplement. Je vous assure que ce n’est pas si terrible avec un bon tuto wordpress.

Pourquoi créer un thème enfant à votre site ?

« Un thème enfant wordpress, c’est un thème qui va reprendre exactement les fonctionnalités, le design et la mise en page d’un thème “parent” et permettre d’apporter des modifications à celui-ci sans s’attaquer à son intégrité »

Voilà qui est dit.

Si vous avez certaines connaissances techniques, vous savez pertinemment que c’est une très mauvaise idée de changer directement les paramètres et fonctions de son thème directement sur celui-ci. C’est la meilleure manière de ne pas avoir accès aux mises à jour de votre thème par la suite. Une seule modification, même si elle est minime vous empêche de faire la mise à jour de ce thème, à moins de perdre tout votre travail de modifications.

La solution, c’est de créer un thème enfant. Il permet d’utiliser toutes les fonctionnalités du thème d’origine, le parent, tout en effectuant toutes les modifications que vous souhaitez sur le thème, sans risque de perdre vos modifications et en pouvant mettre à jour le parent. La plupart des thèmes premium de wordpress prévoient dans leur zip de téléchargement, un fichier d’installation de thème enfant prêt à être utilisé. Il faudra avant de l’utiliser, installer sans l’activer, le thème parent, puis installer le thème enfant pour enfin l’activer.

Mais alors, qu’est-ce que c’est un thème enfant ? C’est un répertoire qui contient au minimum 2 fichiers : « functions.php » et « style.css », faisant référence au thème parent, plus les fichiers que vous allez modifier. Le reste, votre thème enfant va le chercher dans le répertoire du thème parent. Une fois que les deux fichiers de l’enfant sont créés, le thème enfant va apparaître dans la partie « Apparence/ Thèmes » du menu administration de wordpress.

Comment créer un thème enfant wordpress ?

La bonne nouvelle, c’est qu’installer et configurer un thème enfant wordpress c’est assez simple. Il ne faut pas avoir de compétences techniques poussées ou être webmaster pour y arriver. Avant de commencer, il est important de comprendre que votre thème, le parent, contient tous les fichiers de votre thème, à savoir, la feuille de style (style.css) le fichier des fonctions (functions.php), les fichiers modèles (index.php), etc.

Voyons la procédure à suivre pour installer un thème enfant à votre thème :

• Commencez par créer le répertoire du thème enfant. Si vous faites tout à la main, créez un répertoire en le nommant « nomthemeenfant » directement sur votre serveur ou avec l’aide d’un client FTP. Créez-le dans /wp-content/themes/monenfant/.
• Créez une feuille de style enfant pour préciser que c’est bien un thème enfant du thème parent. Ce fichier style.css doit contenir :
  • ThemeName : indiquez le nom de votre thème enfant
  • Description : la description de l’enfant comme elle apparaîtra dans le gestionnaire de thèmes de wordpress
  • Author : C’est vous l’auteur. Indiquez votre nom
  • Author URI : l’url de votre site
  • Template : le nom du thème parent avec le nom du répertoire comme il apparaît dans le répertoire sur le FTP
  • Version : La version de votre thème

Si vous créez des fichiers sur
votre serveur, vous avez deux options :

• Créez sur votre ordinateur les fichiers et envoyez-les sur votre serveur à l’aide de votre client FTP.
• Vous les créez sur votre serveur avec le client FTP pour les éditer avec un éditeur de code. Importez le style du thème parent en créant un fichier « functions.php » et entrez le code :

<? php

function wpm_enqueue_styles(){

wp_enqueue_style( « parent-style », get_template_directory_uri() . « /style.css » );

}

add_action( « wp_enqueue_scripts », »wpm_enqueue_styles »);

Ce code est un « hook action » qui envoie le signal à wordpress de charger le fichier « style.css » du thème parent.

• Sauvegardez et finalisez la
  création du thème enfant.

À cette étape, vous pouvez apporter toutes les modifications CSS que vous souhaitez dans le thème enfant sans risquer de les perdre en cas de mise à jour du parent. Vous pouvez modifier votre « single.php » ou votre « header.php ». Pour cela, copiez-les du thème parent vers le thème enfant. Tout fichier placé dans le thème enfant avec le même nom que le parent, prendra le dessus et écrasera le fichier d’origine. C’est-à-dire que les modèles de pages que vous allez créer dans l’enfant viennent écraser les modèles de pages du thème parent. Mais le fichier d’origine ne sera pas cassé.

Par exemple, si vous voulez modifier le pied de page de votre site, vous allez copier/coller le fichier « footer.php » du parent dans l’enfant. Une fois copié, c’est ce dernier qui est utilisé.

Ainsi, vous pourrez modifier les éléments graphiques, les couleurs, tailles de texte, polices, etc. de votre site. Ne copiez pas tous les fichiers du thème parent sur votre thème enfant d’un coup. Vous risquez de créer des bugs.

La création d’un thème enfant est simple à réaliser. Elle peut être encore plus simple si vous utilisez un plugin, que vous pourrez désactiver une fois le thème réalisé. Oui, car il n’est jamais bon d’avoir trop d’extensions actives sur son site wordpress.

Extension wordpress pour configurer un thème
enfant

Si vous n’êtes pas très enthousiaste à l’idée de mettre les mains dans le code pour créer votre thème enfant, vous avez toujours la possibilité, comme à chaque étape de wordpress, de faire appel à une extension qui fera le travail à votre place.

Je vous recommande le plugin
Child
Theme Configurator pour réaliser cette opération.

• Allez dans « Apparence/ Ajouter/ Taper le nom de l’extension dans la barre de recherche/ Installer/ Activer ».
• Rendez-vous dans « Outils/ Child themes ». L’extension est en anglais, mais elle est très bien conçue, ce qui permet une navigation claire et intuitive. N’hésitez pas à taper sur « Aides » en haut à droite.
• Sélectionnez le thème parent « Select a parent theme/ Analyze parent theme ». Chaque étape est numérotée.
• Rendez-vous à l’étape 7 pour ouvrir un formulaire de saisie.
• Renseignez les éléments du fichier style.css du thème enfant.
• Cliquez sur « create new child theme ». Le thème enfant se génère automatiquement.

À cette étape, vous devez activer le thème enfant et le personnaliser. D’autres onglets apparaissent suite à l’activation du thème. Vous pouvez aller sur « Preview your child » pour avoir un aperçu de votre thème enfant.

• Allez dans l’onglet « Query Selector » pour modifier votre feuille de style. Vous commencez à prendre en main l’extension et voir ce que donnent ses fonctionnalités. Quand une modification vous convient, appuyez sur « Save Child Values ».
• Vous pouvez aller dans l’onglet « Property/Value » pour rechercher une propriété CSS. Dès que vous sélectionnez une propriété, l’extension va aller chercher des occurrences de cette dernière dans les CSS des thèmes parent et enfant. Vous retournez ensuite dans l’onglet « Query/Selector » pour modifier la valeur de la propriété.
• L’onglet « Web Fonts » vous permet d’intégrer des polices de caractère Google en insérant une balise « @import » que l’extension va automatiquement convertir en balise <link>. Du coup, visuellement ça donne : @import url (http://fonts.googleapis.com/css?family=Oswald); donne <link href= »https://fonts.googleapis.com/css?family=Oswald » rel= »stylesheet »>
• Les onglets Baseline Styles et Child Styles vont vous permettre de visualiser vos feuilles de style.
• Un onglet important est « Files », il comprend 5 sections :
  • Parent Templates qui va lister les fichiers modifiables du thème parent pas copiés dans le thème enfant. Pour y remédier, sélectionnez un ou des fichiers, cliquez sur « Copy selected to child theme ».
  • Child Theme Files liste les fichiers copiés dans le thème enfant qui remplacent les fichiers du même nom dans le thème parent quand WordPress affiche le site.
  • Upload Nex Child Theme Image pour intégrer directement des images utilisées dans le thème via la feuille de style.
  • Child Theme Screenshot et Upload New Screenshot qui va modifier l’image qui représente le thème.
  • Export Child Theme as Zip Archive vous permet de créer un fichier zip si votre thème enfant et stocker sur une plateforme test ou si vous souhaitez en avoir une copie, pour le modifier partout où vous êtes.

Si vous voulez de l’aide pour personnaliser votre thème enfant wordpress, téléchargez l’extension WP Editor. Si vous souhaitez utiliser un autre plugin pour vous aider à installer et configurer votre thème enfant, il y a aussi One click child thème et Child Themify.

Pour lire plus sur le sujet de wordpress, consultez :

• Installer wordpress
• Htaccess wordpress
• Installer wordpress en local