Créer un thème enfant pour WordPress

Avant d’aborder la partie technique relativement simple de ce tutoriel, répondons à la question qui vous démange :

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

Bon, on part quand même du principe que si vous êtes sur cette page, c’est pas pour rien, mais sait-on jamais, un internaute perdu qui aimerait la lecture de ce blog pourrait vouloir lire tous les articles (auquel cas je veux bien l’interviewer pour la postérité).

Donc, faire un thème enfant pour WordPress est selon moi la meilleure solution pour pouvoir personnaliser un thème tout en conservant la capacité de le mettre à jour (sans perdre la personnalisation, of course).

Rentrons donc dans le vif du sujet.

theme enfant pour wordpress child theme

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

La création d’un thème enfant pour WordPress est vraiment très simple et nécessite peu de choses dont voici la liste exhaustive :

  • Un site sous WordPress
  • Un accès FTP aux fichiers de votre site (ou un accès local), je vous recommande vivement WS_FTP ou FlashFXP qui sont bien plus complets et sécurisés que les logiciels gratuits comme Filezilla
  • Un éditeur de texte, personnellement je me sers de XXX, un outil très complet intégrant un correcteur et de nombreuses fonctionnalités qui facilitent la vie des pauvres développeurs que nous sommes
  • Le thème WordPress que vous souhaitez utiliser et personnaliser
  • Un accès administrateur au Backoffice de WordPress

Pour ce tutoriel, nous allons partir du principe que votre WordPress est déjà installé et déployé, que le thème principal que vous souhaitez utiliser et personnaliser est également installé et actif. Si ce n’est pas le cas ou pire, que vous ne savez pas de quoi je parle, rendez-vous sur la page d’installation de WordPress.

Etape 1 – Créer le dossier du thème  enfant

C’est la partie la plus simple ! Rendez-vous dans le dossier des thèmes de votre Worpress, par défaut il se situe dans

/wp-content/themes/

Là, via votre client FTP ou votre éditeur de texte si ce dernier est équipé d’une fonction de traitement des fichiers par FTP, vous créer un nouveau dossier que vous nommez comme le thème que vous souhaitez créer. Par exemple, mon thème s’appelle « WhatIzSEO » donc je nomme le fichier « whatizseo » (important de tout mettre en minuscule, et d’éviter les espaces et autres caractères spéciaux).

Etape 2 – Créer le fichier style.css obligatoire

Votre dossier de thème étant à présent créé, rendez-vous dedans, dans mon cela donne :

/wp-content/themes/whatizseo/

Là, toujours avec votre client FTP ou votre éditeur de texte, vous créez le fichier CSS suivant :

style.css

Vous l’ouvrez avec votre éditeur et vous y insérez les lignes de codes suivantes en prenant soin de remplacer le nom du thème parent et celui du thème enfant par les vôtres :

/*
Theme Name: WhatIzSEO (<== A REMPLACER PAR LE NOM DE VOTRE THEME ENFANT)
Theme URI: http://www.whatizseo.com (<== UNE URL AU CHOIX)
Description: Theme fait spécialement pour WhatIzSEO, le blog SEO de la mort qui tue (<== FREESTYLE)
Author: tonytroy (<== VOTRE NOM OU VOTRE PSEUDO)
Author URI: http://www.whatizseo.com (<== UNE URL AU CHOIX)
Template: twentysixteen (<== ICI VOUS METTEZ LE NOM DU THEME PARENT EN MINUSCULE)
Version: 1.0.0 (<== AUCUNE IMPORTANCE)
Text Domain: twenty-sixteen-child (<== LA VOUS METTEZ CE QUE VOUS VOULEZ)
*/

Pensez à bien enregistrer le fichier sur le serveur ! Toutes les modifications de style que vous ferez se trouveront dans ce fichier (ou dans d’autres si vous faites des inclusions, mais bon…). Attention : Le fichier style.css du thème parent aura toujours le dessus sur celui du thème enfant, donc si vous modifiez une classe, pensant à ajouter ceci :

!important

Etape 3 – Créer le fichier functions.php et y ajouter la fonction indispensable

Ce fichier est le plus important car il va permettre l’appel du thème parent, mais également la gestion des fonctions et autres hooks (que l’on abordera dans un autre article car super utile !).

Donc toujours dans le même répertoire (celui de votre thème enfant), nous créons le fichier PHP suivant :

functions.php

Que l’on édite pour y ajouter les lignes suivantes, en pensant à remplacer le nom du thème parent par le vôtre :

<?php
function css_de_mon_theme_enfant() { //(<== NOMMEZ LA FONCTION COMME VOUS VOULEZ)
$parent_style = ‘twentysixteen’; //(<== LE NOM DE VOTRE THEME PARENT)

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style ), wp_get_theme()->get(‘Version’));
}
add_action( ‘wp_enqueue_scripts’, ‘css_de_mon_theme_enfant’ ); //(<== REMETTEZ LE MÊME NOM DE FONCTION)
?>

Bon évidemment vous retirez tous les commentaires à partir de « // ». En gros, vous venez de créer une fonction qui récupère le thème parent et s’en sert de base pour votre thème enfant, donc votre thème enfant appellera automatiquement tous les fichiers du thème parent pour pouvoir diffuser un affichage correct.

Etape 4 – Ajouter le fichier screenshot.png qui est optionnel mais plutôt utile

Cette étape permet simplement d’avoir une image dans le choix du thème au niveau de l’interface d’administration de WordPress.

Je vous conseille tout simplement de récupérer celle se trouvant dans le dossier racine du thème parent et de la copier dans le dossier racine du thème enfant. Mais si vous avez une âme d’artiste (et du temps à perdre), vous pouvez toujours créer votre propre image.

Etape 5 – Activer le thème

La dernière étape ! Il suffit de vous connecter à l’interface d’administration de WordPress, par défaut elle s’appelle via l’URL de votre site en ajoutant un « /wp-admin » à la fin (s’il y a déjà un « / » vous ajoutez uniquement « wp-admin » hein).

Vous rentrez votre identifiant et votre mot de passe si demandé, vous vous rendez ensuite dans « Apparence » puis « Thèmes« .

Vous devriez voir votre thème apparaître, il vous suffit de cliquer sur « Activer« . Si tout se passe bien, rendez-vous à l’accueil de votre site (frontoffice et plus backoffice) et vérifiez que tout s’affiche correctement, ce qui devrait être le cas.

Bravo ! Vous avez créé et activé votre thème enfant. A présent, vous pouvez le personnaliser à volonté tout en étant certain de pouvoir faire les mises à jour du thème parent sans écraser vos modifications.

Modifions un peu le thème WordPress

Admettons que vous souhaitiez modifier la partie header de votre thème (l’en-tête en gros) parce que vous n’aimez pas la position du logo, ou que le slogan du site n’apparaît pas comme vous voudriez. Alors pour cela il vous suffit de copier/coller le fichier header.php qui se trouve à la racine du thème parent, directement dans le dossier racine de votre thème enfant.

Et c’est dans le fichier header.php se trouvant dans le dossier du thème enfant que vous allez faire vos modifications, et tout le style à ajouter/modifier se fera dans le fichier style.css du thème enfant. Ainsi, vos modifications seront prises en compte immédiatement et vous pourrez effectuer la mise à jour de votre thème parent sans perdre votre travail.

En cas de problème avec mon thème enfant WordPress, que faire ?

Il est toutefois possible qu’un problème survienne lors d’une mise à jour importante du thème parent (fonction obsolète, grosse modification du code, etc.). Dans ce cas vous verrez apparaître une erreur au niveau du frontoffice. Le temps de corriger l’erreur, je vous conseille d’activer le thème parent qui lui devrait s’afficher sans erreur.

Ensuite, vous faites une backup du ou des fichiers modifiés, sur le modèle de l’exemple précédent nous sauvegarderions header.php (que personnellement je renomme en header.php.BAK pour gagner du temps). Ensuite il suffit de copier/coller le(s) fichier(s) à modifier, comme précédemment, de les éditer et d’y apporter les modifications en se basant sur les fichiers sauvegardés (car de mémoire, il est fort peu probable que vous vous souveniez de tout).

Lorsque tout est corrigé, vous pouvez activer de nouveau votre thème enfant.

A ma connaissance, c’est l’unique problème que vous puissiez rencontrer, so enjoy !

 

Voilà, j’espère que cet article vous aura été utile dans la mise en place de votre blog ou de votre site sous WordPress, n’hésitez pas à utiliser les commentaires ci-dessous pour poser vos questions ou pour dire ce que vous en pensez, si vous avez trouvé une meilleure solution, ou juste un p’tit merci 😉

A propos de Tony (33 Posts)

Développeur Web et consultant SEO, je vous invite à venir échanger et partager sur ce vaste sujet. Je vous propose également mes services en référencement naturel, afin d'améliorer la visibilité de votre site Internet.


Leave a Reply