Créer un thème enfant WordPress : guide rapide

Pourquoi créer un thème enfant ?

Lorsque l’on crée un site WordPress, pour soi ou pour un client, il est presque toujours nécessaire de le modifier, de retoucher un peu son CSS, pour avoir un site unique et qui correspond à ses attentes. LA bonne habitude à prendre, qui ne vous prendra que quelques minutes de plus, est de créer un thème enfant pour ne pas modifier les fichiers d’origine du thème. Je vois deux bonnes raisons à cela. Tout d’abord, si vous faites une erreur, tous vos fichiers originaux n’ayant pas été modifiés puisque vous utilisez un thème enfant, il est très facile de revenir en arrière. La seconde concerne les mises à jours. Il est évident, pour des questions de sécurité notamment, que faire les mises à jour de son thème est important. Mais si vous modifiez directement le code de votre thème, à chaque mise à jour, vos modifications seront écrasées, vous perdrez tout. Alors qu’avec un thème enfant, vous dupliquez seulement les fichiers que vous souhaitez modifier. Ils sont chargés en priorité par rapport au thème parent (qui lui ne change pas) s’ils sont présents et vous ne perdez absolument rien quand vous effectuez une mise à jour. Et lorsque vous n’avez que très peu de code à modifier, seulement quelques lignes de CSS par exemple, est-ce que ça vaut vraiment le coup de créer un thème enfant ? La réponse est oui, ça vaut toujours le coup pour ne pas perdre votre travail, même s’il ne représente que quelques lignes.

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

Un thème a besoin de 3 fichiers pour être propre et fonctionnel :
– style.css
– functions.php
– screenshot.png

Voyons ensemble les différentes étapes de création d’un thème enfant et ce que vous devez mettre dans chacun de ces fichiers pour que tout fonctionne correctement !

Première étape

Créez un nouveau dossier dans wp-content/themes qui contiendra votre thème enfant. Pour l’exemple, appelons-le « montheme ».

Deuxième étape

Créons le fichier style.css, dans le dossier « montheme » que nous venons de créer. En plus de contenir les lignes de CSS de votre futur site, c’est lui qui va indiquer à WordPress où se trouve le thème parent duquel il s’inspire. Voici ce que vous devez mettre dans votre fichier style.css :

/*
    Theme Name:   Mon thème
    Description:  Child Theme
    Author:       Sensiweb
    Author URI:   https://sensiweb.fr
    Template:     Themeparent
    Version:      1.0.0
*/

Indiquez le nom que vous souhaitez donner à votre thème dans « Theme Name » et remplissez la description comme vous le voulez. Idem pour l’auteur. Seul le « Template » doit contenir le nom exact du dossier du thème parent que vous avez installé ur votre site. A la suite de ce commentaire, vous pouvez ajouter les lignes de CSS dont vous avez besoin afin de surcharger le design du thème parent.

Troisième étape

Dans le fichier functions.php, nous allons indiquer au thème enfant où trouver ses feuilles de style (celle du parent et la sienne), comme ceci :

<?php 
function sensi_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' ) );
}
add_action( 'wp_enqueue_scripts', 'sensi_theme_enqueue_styles' );

C’est tout ce dont a besoin votre fichier functions.php pour fonctionner.

Dernière petite étape

Créez un fichier png de 880*660px avec l’image que vous voulez voir apparaître pour votre thème enfant dans l’administration de WordPress (Apparence > Thèmes) et ajoutez-la dans votre dossier.

Et voilà un thème enfant tout beau tout propre, prêt à recevoir les modifications que vous allez apporter à votre thème d’origine ! Pensez bien à dupliquer les fichiers du thème d’origine que vous voulez modifier et à les coller dans votre thème enfant, c’es ceux-là que vous devrez changer, pas les originaux.

Si vous souhaitez plus d’informations, le Codex WordPress en parle : lien vers le Codex.