Créer un thème enfant sous WordPress [child-theme]

15 2428

Vous avez déjà vécu ça vous, vous touchez un peu au code de votre thème pour adapter une image, un lien hypertexte, une pub Adsence, ou votre code Analytic, et lors d’une mise à jour de votre thème, tout ce que vous avez fait a disparu.

Si pour diverses raisons, vous avez besoin un jour de modifier les fichiers de votre thème WordPress, que se soit pour inclure une publicité dans un article, ou juste modifier le style de votre blog, couleur des textes, sidebars supplémentaires, bref, vous l’aurez compris, tout ce qui peut être compromis lorsque vous mettez à jour votre thème. Nous allons voir comment créer un thème enfant.


C’est quoi un thème enfant ?

Le thème enfant, plus communément appelé Child theme, permet de mettre à jour le thème principal sans écraser vos configurations.

Il s’agit (pour l’image), d’un dossier où vous venez mettre tous vos fichiers modifiés à la main, pour qu’ils soient ainsi conservés.

Quel est l’intérêt, il suffirait de ne jamais mettre à jour le thème parent ?

Et bien non, car vous allez passer à côté de toutes les mises à jours sécuritaires de votre thème, et risquez de vous faire pénétrer votre CMS préféré ! Pas cool

Comment créer un thème enfant pour WordPress ?

Tout d’abord, démarrez votre client FTP, et rendez vous dans le dossier « themes ». Dans l’exemple, nous utilisons le thème « Publish » pour l’install WordPress.

  1. Créer un dossier « Publish-child »
  2. Dans « Publish-child » créer un fichier « style.css »
  3. Vous pouvez -aussi- mettre un fichier « index.php » (vide)

[note color= »#e4e4e4″]Important, WordPress reconnaitra qu’il s’agit d’un thème, grâce uniquement au fichier « style.css »[/note]

En image :


Maintenant nous allons éditer le fichier style du thème enfant afin de le faire reconnaître par WordPress comme étant le thème enfant de « Publish ».


Editer le fichier style.php de mon thème enfant

Tout d’abord, ouvrez le fichier avec un éditeur comme Notepad et inscrivez :

/*
Theme Name: Publish-child
Template: publish
*/

– Remplacez « Publish-child » par le nom de votre thème enfant.
– Remplacer « publish » par le nom de votre thème (parent)

Ensuite, nous allons indiquer à wordpress d’aller chercher les infos du thème parent. Ces infos sont celles d’origines, celles qui seront écrasées à chaque mise à jour de votre thème, car ces fichiers sont dans le thèmes parents.

Pour ce faire, on indique une ligne supplémentaire pour que WordPress aille chercher les informations d’origines :

@import url(« ../publish/style.css »);

– Remplacez « /publish/ » par « /votrethemeparent/ »

Maintenant WordPress a fait rediriger le thème enfant, vers le thème parent.


Ces lignes sont obligatoires pour que WordPress reconnaisse le lien de « parenté » entre votre thème principal et votre thème enfant.

Sauvegardez le fichier, et rendez vous dans votre administration WordPress, rubrique « thèmes », vous devriez voir votre thème enfant apparaître :

Maintenant activez votre thème.

Il n’y a aucun changement après l’activation ?

C’est normal, comme expliqué plus haut,la fonction

@import url(« ../publish/style.css »);

Fait rediriger votre thème enfant, vers la configuration de votre thème parent.

Dans ce cas de figure, si vous mettez à jour le thème parent, les répercutions seront appliquées aussi sur le thème actuel (enfant).

Message WordPress:

Les fichiers du thème se trouvent dans /themes/publish. Les feuilles de style sont dans /themes/publish-child. Publish-child utilise les modèles de Publish. Tout changement dans les modèles affectera les deux thèmes.

 

Comment personnaliser mon thème enfant ?

Si vous voulez changer la couleur de vos titres par exemple, il vous suffira de l’indiquer dans le fichier style.css de votre thème enfant. La fonction de changement de couleur viendra alors écraser la fonction du thème parent.

Dans le fichier « style.css » de votre thème enfant, ajoutez la ligne suivante :

#site-title a {
    color: #009900;
}

Vous aurez un exemple de ce qu’il est possible de personnaliser ^^

Maintenant, à chaque fichier que vous modifierez un fichier de votre thème parent, faites en une copie dans votre child theme (thème enfant) et celui ci ne pourra plus jamais être écrasé par les mise à jour du thème.

15 Commentaires

  1. Salut Rodrigue,

    Bonne idée que de nous faire ce petit tutoriel sur les thèmes enfants qui nous évitera de perdre nos modifications lors des mises à jour.
    J’aurais juste ajouté la méthode pour faire les modifications sur le thème enfant, car ceux qui ne s’y connaissent pas ne sont pas plus avancés.

    • il faut rester général, chaque modif est différente, cela dépend de ce que tu souhaites faire …

  2. Très bonne idée, je cherchais comment faire ça (chose que je faisais sous spip, mais je découvre un wordpress), En ayant suivit pas à pas tes indications je me retrouve avec cette erreur: « Thèmes endommagés/Les thèmes suivants sont installés, mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle. ». Je creuse et reviens quand j’aurai trouvé.

  3. Bonjour,
    Bon ok… je découvre encore plein de choses sous wordpress mais là, je n’ai pas trop compris la manip’.
    Ca passe de index.php et style.css, (jusqu’à là ça me va) à style.php ? plouf ! Je suis paumé !
    Je ne sais pas si mon fichier style.machin doit contenir que les lignes indiquées (et personnalisées) dans l’article ou d’autres trucs. pareil pour le dossier de mon thème child.
    Tant pis pour moi

  4. salut à toi et merci pour ce petit tuto simple d’utilisation. J’ai dejà créé des sous thèmes sous Drupal 7 et je me rend compte que c’est à peu près les même démarches c’est tant mieux :). Par contre fait attention :

    ton exemple en fin de tuto pour modifier la couleur du titre ce fait dans le fichier style.css. Je te dis ça pour que tu puisses corrigé sur le site au cas ou d’autre buterais dessus ^^ . Bye et encore merci

  5. Bonjour à tous,

    Pour répondre à François L. avec son message « Les thèmes doivent avoir au moins une feuille de style et un modèle. » ou « thème endommagé », il faut vérifier que dans ton fichier style.css la ligne :
    Template: publish
    la casse (minuscules/majuscules) doit être identique à ton répertoire (dossier) sur ton site FTP de ton thème parent. Sinon WordPress ne trouve pas ton theme parent et le thème enfant est cassé !

    A bientôt,

    PS : Rodrigue faudrait faire un remplace de « style.php » en « style.css » pour conserver la valeur de ton article.

Réagis