Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Lorsque l’on créé un nouveau site WordPress, une partie du travail de préparation est de choisir son thème graphique. Pour faire bien les choses et garantir une bonne maintenance et une bonne évolutivité pour le site, il est important d’utiliser un thème « enfant » et non le thème « parent » directement. Je vous explique tout.

Attention lors de la mise  à jour d’un thème

Lorsque vous personnalisez votre site, vous allez modifier les styles CSS de votre thème ainsi que quelquefois le code PHP et les fonctions de celui ci.

Or va arriver le jour où votre  tableau de bord vous proposera de mettre à jour votre thème graphique… Tremblez pauvre mortel ! Car le risque (si vous n’avez pas fait de thème enfant) est de perdre toutes les modifications techniques que vous aurez effectuées ; puisque l’opération consistera à remplacer les fichiers de l’ancienne version du thème par les fichiers de la nouvelle version. J’imagine que ce n’est pas ce que vous souhaitez !

Pourquoi mettre à jour votre thème ? Pour corriger des bugs ou pour suivre les nouveautés et rester compatible avec les dernières version de WordPress. Rien que ça. Donc si vous ne le faîtes pas et que vous mettez à jour WordPress, le risque est de vous retrouver avec un site qui ne fonctionne plus… Et si vous choisissez de ne plus mettre à jour ni WordPress ni votre thème, les jours de votre site sont comptés (sécurité, évolutivité…).

Et c’est quoi un thème enfant ?

Un thème « enfant » (child theme en anglais) est un thème WordPress qui hérite des fonctions et des styles du thème parent. C’est sur lui que vous allez modifier / ajouter vos styles et fonctions sans prendre le risque de tout perdre à la prochaine mise à jour.

La documentation de WordPress nous explique comment faire pour en créer un, mais nous allons reprendre ici les étapes une par une et surtout les appliquer au thème Twenty Fifteen fourni avec l’installation de WordPress 4.1.

Installer un thème enfant à la main

Voici le pas à pas pour installer votre thème enfant Twenty Fifteen ; mais sachez que l’opération serait la même pour tout autre thème. Parfois, le thème enfant est même fourni avec les fichiers d’installation de votre thème, vous n’avez qu’à l’uploader et l’activer. D’autres fois, il existe des plugins qui vont ajouter et créer le thème enfant pour vous (exemple ici pour le thème enfant de Divi, le thème numéro un chez Elegantthemes).

Vérifier que le thème parent est installé

Pour Twenty Fifteen, rien à faire, il est déjà présent par défaut dans WordPress. Pour tout autre thème, vous faîtes comme d’habitude : ajout du thème par l’interface de WordPress (menu Apparence -> thèmes -> Ajouter).

Créer un nouveau répertoire

Connectez vous par FTP sur votre hébergement, et naviguez dans « wp-content-themes » . Créez alors un répertoire qui portera le nom du thème parent et suffixé par « -child » ; soit dans notre exemple « twentyfifteen-child ». Ce n’est pas obligatoire de le nommer ainsi mais c’est une convention souvent respectée dans un site WordPress.

ftpchildtheme

Ajouter les 2 fichiers indispensables au thème enfant

Pour constituer votre thème enfant, ajoutez maintenant 2 fichiers dans ce répertoire :

  • style.css
  • functions.php

Votre fichier style.css doit contenir le code suivant :

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       Your name
 Template:     twentyfifteen
 Text Domain:  twenty-fifteen-child
*/

Remplacez y les valeurs par défaut par les vôtres, le seul champ obligatoire est le champ « Template ». Il doit correspondre au répertoire du thème parent sur votre installation WordPress. Attention aussi au champ « Text Domain » qui doit être bien paramétré pour vos traductions (cf plus bas dans l’article).

Le fichier functions.php va lui contenir le code suivant :

<?php 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Ces lignes de code permettent au thème enfant d’hériter des styles du thème parent.

Activer le thème enfant

C’est terminé, il ne vous reste plus qu’à aller activer le nouveau thème dans l’administration WordPress (Apparence -> Themes) :

twentyfifteenchildtheme

Installer un thème enfant avec WP-CLI

WP-CLI est une bibliothèque de fonctions que l’on peut utiliser en lignes de commandes pour piloter WordPress de A à Z. Tous les hébergements ne proposent pas un accès SSH mais si c’est le cas du votre, profitez en ! Vous pouvez en découvrir plus sur WP-CLI dans cet article sur une installation automatisée de WordPress chez Gandi.

Il existe donc une commande pour créer un thème enfant et qui fera pour vous toutes les étapes précédentes automatiquement. La documentation est ici et un exemple de commande pour twentyfifteen serait (avec activation simultanée) :

wp scaffold child-theme twentyfifteen-child --parent_theme=twentyfifteen --activate

Facile, non ?

Installer un thème enfant avec un plugin

Une dernière façon de mettre en place un thème enfant est d’utiliser le plugin One click Child Theme. Une fois installé, rendez vous dans votre admin sur le détail du thème pour lequel vous voulez créer un thème enfant et cliquez sur le bouton « Child theme » (en bas). Ce plugin fera très bien le job et correspond exactement à la mise en place manuelle décrite ci dessus.

Son utilisation vous évitera de vous connecter par FTP ou SSH à votre hébergement.

child_theme_plugin

Exemple de modification de style dans le thème enfant

Voici maintenant une dernière étape : vous allez modifier le style de votre thème enfant. Prenons l’exemple d’une modification de Police pour le thème.

Allez dans « Apparence -> Editeur » et ajouter au fichier style.css ces quelques lignes :

@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
    font-family: 'Roboto', sans-serif;
}

Vous aurez alors changé la police de votre thème par une nouvelle ; sans toucher à votre thème parent.

Pour modifier des éléments plus complexes du thème comme les templates de page, il suffit de mettre dans votre thème enfant un template possédant le même nom que dans votre thème parent (exemple : header.php) pour que celui si soit utilisé en lieu et place de celui du parent. Magique !

Et pour la traduction ?

C’est une bonne question ! Si vous placez vos fichiers de traduction dans un répertoire de votre thème parent, ils risquent aussi de disparaître lors d’une mise à jour. Vous pouvez lire cet article sur la traduction d’un thème ou d’un plugin, il vous expliquera comment faire (dernier paragraphe) avec votre thème enfant.

Notez déjà qu’il faut particulièrement faire attention au paramétrage de « Text Domain » dans le fichier style.css.

Est ce que je peux créer un thème enfant « à posteriori » ?

Oui, mais avec quelques précautions ! Pour la majorité des thèmes, ajouter un thème enfant ne vous fera pas perdre les paramétrages réalisés. tout au plus, vous aurez à réorganiser vos widgets. De toute façon, cela n’a de sens que si vous avez modifié votre thème « parent » et que vous vous sentez bloqué lors des mises à jour. Pour ajouter un thème enfant à un thème déjà en ligne et paramétré, voici donc quelques conseils :

  • procédez à un backup avant toute opération.
  • rapatriez par FTP votre thème actuel et comparez le avec sa dernière version disponible. Vous pouvez utiliser pour cela un outil comme Winmerge qui vous permettra de retrouver voir les fichiers et lignes de code (CSS / PHP / JS) que vous avez éventuellement modifiées.
  • reportez dans votre thème enfant les modifications que vous aviez initialement apporté au thème parent.
  • uploadez votre thème enfant et remplacez le thème parent par sa dernière version (non modifiée bien entendu !).
  • activez le thème enfant à la place du thème parent dans le menu « Apparence -> Thèmes ».
  • testez et mettez maintenant régulièrement à jour votre thème avec moins de stress !.