WordPress: Modifier un Thème Existant

Vous avez trouvé le bon thème pour votre site web utilisant WordPress, mais il y a tout de même quelques détails qui vous tracassent.  Il vous faut donc modifier votre thème!

Mise en situation

En cherchant un peu, vous avez trouvé l’emplacement du thème (wp-content/themes/nom-du-theme) et les fichiers à modifier.  Tout va bien!  Puis, une mise à jour est disponible.  Vous la faites… et BANG!  Toutes vos modifications ont disparu.

C’est effectivement ce qui se passe quand on modifie un thème que nous n’avons pas créé et qu’il doit être mis à jour.  La mise à jour d’un thème consiste à effacer tous les fichiers présents dans le répertoire et les remplacer par les nouveaux fichiers.  Toutes modifications faites précédemment sur les fichier se trouvant dans le répertoire sont perdues!

Création d’un Thème enfant

L’avenue la plus simple pour modifier un thème est de créer un nouveau thème à partir du thème existant.  Le processus se nomme: créer un thème enfant.  WordPress documente le tout dans sa section Child Themes.

Vous pouvez également suivre les instructions ci-dessous.

Pour procéder, il vous faut tout d’abord installer un thème que l’on souhaite modifier.  Une fois le thème « de base » installé, vous êtes maintenant prêt à créer votre thème enfant!

Connectez-vous sur le serveur où se situe votre site web et dirigez-vous dans le répertoire où est installé WordPress.  Plusieurs fichiers et répertoires sont visibles.  Puis, allez dans:

wp-content/themes/

Ce répertoire contient tous les thèmes ayant été installés et prêts à être utilisés.  Vous devrez, à ce stade, repérer le nom du répertoire de votre thème « de base » (également appelé « thème parent »).  Dans le cadre de cet exemple, le répertoire du thème parent sera: toolbox.

Prenez soin de noter le nom du répertoire exactement comme il est écrit.

Maintenant, nous sommes prêts à créer notre thème enfant!  Vous devez tout d’abord créer un répertoire et lui donner un nom.  Pour cet exemple, supposons qu’il se nommera: montheme.  Si vous avez créé votre répertoire au bon endroit, la structure de répertoires devrait ressembler à ceci:

wp-content/themes/montheme

Une fois le répertoire créé, vous devez créer un fichier nommé style.css directement dans le répertoire.  Bien qu’il soit possible de le mettre dans un sous-répertoire, il est recommandé de le mettre directement dans le répertoire montheme.

Pour WordPress, un thème est tout simplement un sous-répertoire contenu dans wp-content/themes/ et qui contient divers fichiers.

Pour être reconnu comme un thème valide, il faut au minimum un fichier style.css qui débute avec un commentaire contenant certaines informations reconnues par WordPress.  On fait référence ici au nom du thème.  Notez que la disposition doit être faite exactement comme l’exemple ci-dessous:

/*
Theme Name: Mon Theme
Template: toolbox
*/

/* Notez ici que "toolbox" est le répertoire du thème parent */
@import url(../toolbox/style.css);

La ligne débutant par « Template: » doit afficher le nom du répertoire du thème à partir duquel nous ferons nos modifications (thème parent).  Vous pouvez également consulter la documentation de WordPress pour en savoir davantage sur les entêtes de fichier.

Ça y est! Vous avez le minimum requis pour activer votre thème.  La première ligne informe WordPress du nom de votre thème.  La seconde ligne indique à WordPress le nom du répertoire où est situé le thème parent.  La troisième ligne permet d’importer le fichier CSS du thème parent.

À partir de ce moment, vous pouvez vous diriger dans votre section d’administration et changer le thème par défaut pour celui que vous venez de créer.  Il n’y a présentement aucune distinction entre le thème parent et enfant au niveau du visuel.

Par la suite, vous pouvez modifier l’apparence de votre en modifiant le fichier CSS que vous venez de créer en repérant les bons ID et CLASS contenus dans votre site web.

Rappel: En aucun temps vous ne devez modifier un fichier contenu dans le thème parent. Sous aucun prétexte. Jamais.

Supposons que nous souhaitons mettre tous les titres de notre nouveau thème en bleu.  Dans le fichier CSS que nous venons de créer, il suffit d’ajouter la ligne suivante:

/*
Theme Name: Mon Theme
Template: toolbox
*/

/* Notez ici que "toolbox" est le répertoire du thème parent */
@import url(../toolbox/style.css);

.entry-title a {
  color: blue;
}

Par défaut, tous les fichiers utilisés pour l’affichage de votre thème utiliseront ceux qui se trouvent dans le répertoire du thème parent.  Si vous souhaitez modifier l’apparence d’un fichier, copiez-le simplement du thème parent dans votre nouveau thème et effectuez les modifications.  En principe, vous ne devriez avoir dans votre nouveau répertoire UNIQUEMENT les fichiers du thème parent que vous devez modifier.

Si vous souhaitez modifier l’entête de votre site, vous copierez le fichier header.php de votre thème parent dans le répertoire de votre thème enfant.  Ensuite, vous faites les modifications requises.  Si vous copiez TOUS les fichiers du thème parent dans le thème enfant, cela peut démontrer deux choses:

1. Vous ne comprenez pas ce que vous faites puisqu’il n’y a plus aucun avantage à l’utilisation du thème enfant.
2. Vous devriez plutôt considérer la création d’un nouveau thème puisque vous avez modifié 100% des fichiers!

Le seul fichier que vous ne pouvez pas copié et que vous devrez créer en partant d’un fichier vide est le fichier functions.php.  La raison est que les fonctions PHP contenues à l’intérieur ne peuvent être définies deux fois.  Si vous négligez cette consigne, vous recevrez un message ressemblant à ceci:

Fatal error: Cannot redeclare the_function (previously declared in wp-content/themes/toolbox/functions.php:2) in wp-content/themes/montheme/functions.php on line 21

Vous êtes maintenant prêt à créer un thème enfant et ne plus risquer de perdre toutes vos modifications lors de la prochaine mise à jour!

Bon codage.