Après avoir vu ensemble comment créer un plugin pour WordPress, voyons ensemble comment créer un thème enfant pour wordpress.

Les thèmes WordPress sont par nature déjà « personnalisables », les possibilités offertes sont nombreuses mais il y a toujours de petites choses que nous voulons changer. Une couleur ici, une taille de police là-bas, peut-être utiliser un autre appel à l’action, modifier le CSS de notre thème WordPress et bien plus encore …

Le soucis est que la modification, même infime, d’un thème vous empêche de faire sa mise à jour vers une nouvelle version à l’avenir, parce que si vous mettez à jour, alors vous perdez toutes vos modifications.

Et ce sont les thèmes enfants qui résolvent ce problème en vous permettant d’utiliser toutes les fonctionnalités de votre thème tout en vous laissant mettre à jour ce dernier, sans peur de perdre vos modifications.

Un thème enfant, c’est quoi  ?

Un thème enfant est un thème basé sur votre thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi vous pouvez apporter des modifications à votre enfant et en cas de mise à jour du parent, vous ne les perdez pas.

Tout fichier placé dans le thème enfant et portant le même nom que dans le thème parent, prendra le dessus et écrasera le fichier d’origine (sauf le fichier functions.php).

A noter : de nombreux thèmes premium de nouvelle génération, embarquent dans leur zip un thème enfant prêt à l’emploi. Dans ce cas, il vous suffit simplement de mettre en place ce dernier. Attention, il faut bien évidemment installer le thème parent (sans l’activer), puis installer le thème enfant et enfin activer ce dernier.

Comment mettre en place un thème enfant ?

Pour faire un thème enfant, nous avons besoin du thème d’origine que l’on qualifie de thème parent et de 2 fichiers que nous allons créer. Il faudra également créer un répertoire pour y placer les fichiers du thème enfant.

La première des choses à faire est donc de créer un dossier pour votre thème enfant dans le FTP. Il vous suffit d’aller créer le dossier du thème enfant dans /wp-content /themes /nomdevotrethemeenfant/.

Nous allons maintenant créer les deux fichiers dont nous avons besoin et que nous placerons dans le dossier de notre thème enfant :

  1. Le fichier functions.php
  2. Et le fichier style.css

Pour l’exemple, je vais me baser sur un thème parent qui porte le nom de WebWave, ceci étant également le nom du dossier de mon thème dans le FTP.

Dans le fichier functions.php, nous allons intégrer le code qui va permettre de combiner ou d’écraser le fichier style.css du parent autrement qu’avec le fameux @import css.

Voici donc le code a mettre dans le fichier functions.php du thème enfant :

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Une fois ceci fait,  nous avons déjà la partie qui va nous permet d’appeler notre fichier style.css. Il ne nous reste plus qu’a créer le fichier style.css du thème enfant. Voyons ce que doit obligatoirement contenir ce fichier :

/*
Theme Name: Web-Wave enfant
Description: Theme enfant du theme Web-Wave
Author: Web-Wave
Author URI: https://www.web-wave.fr
Template: Web-Wave 
Version: 1.1.0
*/

Description ligne par ligne du fichier style.css :

  • Theme Name : Le nom que je veux donner a mon thème enfant
  • Description : La description de mon thème enfant celle qui apparaîtra dans mon gestionnaire de thème WordPress
  • Author : L’auteur du thème enfant, en l’occurrence c’est vous
  • Author URI : L’url du site de l’auteur parce qu’un peu de pub ne fait pas de mal
  • Template : Le nom du thème parent en l’occurrence le nom du répertoire tel qu’il est écrit sur le FTP
  • Version : La version de votre thème enfant à titre indicatif

Petits détails à ne pas oublier sinon votre thème enfant ne fonctionnera pas :

  • Ne jamais mettre d’espace avant les deux points. Theme Name: fonctionnera mais Theme Name : ne fonctionnera pas
  • Pour l’attribut Template : Si votre thème dans l’admin se nomme par exemple « web-wave » mais que le nom affiché dans le répertoire FTP est « Web-Wave » alors il faudra obligatoirement respecter la casse et écrire Web-Wave et non web-wave
  • Pour le reste, vous pouvez ne rien mettre, cela fonctionnera quand même !

Afin d’égayer un peu votre gestionnaire de thèmes WordPress, vous pourrez aussi mettre un fichier screenshot.jpg (600×450 px conseillé) qui affichera la miniature de votre thème enfant dans le gestionnaire de thèmes.

Voilà, votre thème enfant est prêt !

Vous pouvez maintenant ajouter toutes vos modifications CSS dans le fichier style.css du thème enfant et vous ne les perdrez plus en cas de mise à jour du thème parent.

Désormais, si vous voulez modifier votre single.php ou votre header.php, copiez-les du parent vers le thème enfant et modifiez-les. Vous pouvez également ajouter des fonctions dans le functions.php de votre enfant, tout en sachant que le functions.php du parent sera toujours chargé en dernier et qu’il prendra le dessus en cas de fonctions identiques.