Child Theme WordPress : créer son thème

de | 11 janvier 2012

Wordpress child theme : thème enfant

Nous allons voir aujourd’hui comment procéder pour créer un « child theme » (ou thème enfant en bon français) pour WordPress. Ce procédé permet de modifier un thème WordPress sans modifier ses fichiers. Il est donc indispensable de maîtriser cette méthode avant de bidouiller le thème de votre blog.

Pour cette exemple nous allons modifier le thème par défaut Twenty Eleven. Ce thème est bien fait et devrait vous permettre d’adapter votre thème à ce que vous souhaitez. Evidemment, il faudra maîtriser au minimum les langages Php, HTML et CSS si vous voulez aller plus loin que changer quelques couleurs.

Nous commençons par créer un nouveau répertoire pour ce qui sera notre nouveau thème, cela se passe dans wp-content/themes/ :

Créer un répertoire pour votre Child theme WordPress

Créer un répertoire pour votre Child theme WordPress

Ce nouveau répertoire contiendra tous les fichiers de votre nouveau thème. Il est donc important qu’il se trouve au même niveau que les autres thèmes que vous avez installés. Ensuite, il faut créer le fichier style.css dans le nouveau répertoire. Ce fichier reprend les styles du thème parent que vous voulez modifier :

1 /*
2 Theme Name: Mon thème custom
3 Theme URI: URL du site
4 Description: Description du thème
5 Author: Blog Artenet
6 Template: twentyeleven
7
8 */
9 @import url(‘../twentyeleven/style.css’);

La ligne suivante est très importante car c’est elle qui va vous permettre d’appliquer les styles par défauts de Twenty Eleven à votre thème :

@import url(‘../twentyeleven/style.css’);

Maintenant que ceci est réalisé, on peut procéder à quelques modifications de style. On peut choisir de supprimer le menu si le navigateur possède une taille d’écran dont la largeur est inférieure à 768px par exemple. Ce qui donnera pour votre fichier :

/*
Theme Name: Mon thème custom
Theme URI: URL du site
Description: Description du thème
Author: Blog Artenet
Template: twentyeleven
*/
@import url(‘../twentyeleven/style.css’);
#access {display:none;}
@media only screen and (min-width: 768px) {
#access {display:block;}
}

Maintenant que nous nous sommes intéressés aux styles, il est aussi possible de modifier les fichiers PHP et donc le comportement des pages de votre blog WordPress. Pour ce faire, il faut simplement copier le fichier .php de Twenty Eleven qui est concerné par la modification dans le répertoire de votre « Child theme ». Ce qui pourra donner :

Fichiers PHP du child theme wordpress

Fichiers PHP du child theme wordpress

Maintenant, vous pouvez modifier ces fichiers sans avoir peur de tout casser. En cas de problème, il vous suffira de supprimer le fichier pour repartir à zéro.

Un thème WordPress n’étant pas à l’abri d’une évolution (et d’une mise à jour automatique), il est important de créer des child themes pour les personnalisations qu’on souhaite y apporter. C’est pourquoi nous vous encourageons à utiliser ce procédé même s’il est un peu contraignant à mettre en place. Il serait en effet dommage de perdre vos modifications lors d’une mise à jour du thème par défaut de WordPress par exemple.

N’hésitez pas à poser vos questions en commentaire de cet article ou à contacter un professionnel en développement Web qui pourra vous aider à modifier votre blog WordPress.

3 réflexions au sujet de « Child Theme WordPress : créer son thème »

  1. Light

    Il faut prendre en compte que sur Twenty Eleven, il y aussi la possibilité de choisir un skin préformaté « dark » colors/dark.css de ce même theme. Et que celui-ci a l’air de prévaloir sur le css du theme child.

  2. Marian

    Tuto très sympa. On devrait utiliser plus souvent ce genre de pratique pour éviter de tout casser lors d’une mise à jour de TPL, notamment sur les templates premium

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.