Créer un thème enfant pour WordPress

Les thèmes WordPress sont par nature déjà “customisables”, leur installation simple, 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, bref nous voulons modifier le CSS de notre thème WordPress et bien plus encore…

Le seul hic, c’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 :/

Un thème enfant pour quoi faire ?

Les thèmes enfants 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. Notons également que nous pouvons aussi utiliser, dans certains cas, les mu-plugins ;)

 

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 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 juste 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. un fichier functions.php
  2. un fichier style.css

Pour l’exemple, je vais me baser sur un thème parent qui porte le nom de WPServeur, 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 (on déconseille l’@import car cela ajoute une requête inutile cf: https://codex.wordpress.org/)

Voici donc le code à 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.cssIl 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: Theme enfant
Description: Theme enfant de Benoit WPServeur
Author: Benoit - WPserveur
Author URI: https://www.wpserveur.net
Template: WPServeur 
Version: 0.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 “wpserveur” mais que le nom affiché dans le répertoire FTP est “WPserveur” alors il faudra obligatoirement respecter la casse et écrire WPserveur et non wpserveur
  • 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 (n’oubliez pas de les commenter, ça aide parfois;).

Désormais, si vous voulez modifier votre single.php ou votre header.php, rien de plus simple! 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.

 

Y’a pas un plugin pour le faire à ma place ?

Bien que ce ne soit pas vraiment nécessaire au vu de la simplicité de la création d’un thème enfant, nous sommes sous WordPress et forcément il n’y a pas 1 plugin qui peut le faire, mais 3. L’utilisation de ces plugins est à réserver aux purs débutants, pour ma part je préfère largement la méthode manuelle.

 

Modèle de thème enfant WordPress à télécharger :)

Pour faire encore plus simple et vous permettre d’utiliser rapidement un thème enfant, je vous propose un modèle à télécharger gratuitement et à adapter pour vos besoins. Cliquez sur l’icone ZIP ci-après pour télécharger (fichier zip de 97 ko) ce modèle de thème enfant prêt à l’emploi :)

Pour adapter ce thème enfant à vos besoins, il vous suffit de le décompresser, d’éditer la ligne “Template” du fichier style.css avec le nom exact du répertoire de votre thème parent et d’uploader le tout via FTP dans le répertoire /wp-content/themes/, enfin activez-le depuis le menu WordPress Apparence>>Thèmes.

 

Pour aller + loin avec le Thème Enfant

Dans quel cas peut-on se passer d’un thème enfant ou bien encore comment traduire son thème WordPress directement depuis un thème enfant avec Poedit ? Autant de  questions auxquelles nous vous répondons dans les articles suivants :

Voir Commentaires

  • @Benoit H,
    Impeccable, il y a juste un petit problème pour moi, j'ai un "read more" que je voudrais supprimer et la police des extraits d'articles n'est pas correcte, j'ai pourtant ajouté dans mon thème modernize cet "additional style css" :
    div.blog-item-holder .blog-item3 .blog-thumbnail-info {display:none;}
    a.blog-continue-reading {
    display: none;
    Lire la suite
    }
    Voilà si tu sais résoudre cela, ce serait super pour les futures mises à jour ! A noter que j'ai aussi un style-custom.css qui m'embête parce que je ne sais pas où le mettre :-)
    Merci !

  • @vincent je pense que un devrait écraser la valeur css du thème parent il faudrait donc mettre ce code:
    div.blog-item-holder .blog-item3 .blog-thumbnail-info {display:none ;}
    a.blog-continue-reading {
    display: none ;

    }

  • Salut @benoit,

    J'ai peut-être loupé un truc mais il me semble que la ligne suivante charge le style.css du thème parent :
    wp_enqueue_style('theme_child-style', get_template_directory_uri() . '/style.css', array(), '0.1', 'all');

    Du coup, pourquoi mettre un handle nommé "theme_child-style" ?

    Autre question, pourquoi charger le style.css du thème enfant avec :

    wp_enqueue_style('theme_child-style', get_stylesheet_uri());

    WordPress le charge automatiquement et je ne pense pas qu'il y ait un intérêt à le désactiver avec wp_dequeue_style(), si ?

    A+ ;)

  • @benoit,
    Merci, c'est très pratique, il m'a fallu 2 minutes en suivant tes conseils !!!