Si vous avez besoin de personnaliser votre thème — et croyez-moi, vous en avez besoin ou en aurez besoin tôt ou tard ! — alors il faut absolument créer un thème enfant. C’est ultra simple, mais c’est une étape qui, si elle est négligée, va vous coûter énormément !

Donc dans ce court article, on va voir à quoi sert un thème enfant et comment en créer un rapidement.

J’ai mis à jour mon thème… Mon site est tout cassé !

Si utilisez un thème du répertoire officiel de WordPress, alors vous avez peut-être constaté que vous avez parfois des notifications de mises à jour. Cela signifie simplement que l’auteur a mis à jour son thème, en corrigeant une faille de sécurité, en ajoutant un peu de CSS pour corriger un souci d’affichage ou en ajoutant une fonctionnalité. Puis il l’a réuploadé sur le répertoire officiel, et WordPress a comme par magie découvert que votre thème pouvait être mis à jour.

Ce serait dommage de ne pas profiter de cette nouvelle version améliorée ou corrigée, non ?

Mais si vous avez eu la mauvaise idée de modifier vos fichiers de thème directement — par exemple, si vous avez copié-collé un snippet de code trouvé sur internet dans votre fichier functions.php — vous allez avoir la surprise de voir que votre modification a disparu !

Car en mettant à jour votre thème, WordPress a simplement écrasé votre ancien thème par le nouveau ! Eh oui !

Dans l’exemple, je parle des thèmes du répertoire, mais c’est aussi vrai pour les thèmes premium achetés. Si vous les mettez à jour de façon automatisée, alors vous aurez le même souci.

Qu’est-ce qu’un thème enfant ?

Un thème enfant va simplement vous éviter les crises de nerfs après mise à jour. C’est un thème qui référence un autre thème (son parent) et qui sera activé à sa place. Il va hériter de toutes les fonctionnalités de son parent.

Mais il peut aussi contenir ses propres fonctionnalités, styles et modèles de page. C’est juste que tout ce qui n’est pas spécifique à l’enfant sera hérité du parent. C’est aussi simple que ça.

Comment créer un thème enfant

C’est assez simple. Pour cet exemple, on va créer un enfant de Twenty Nineteen, le thème par défaut de WordPress. Vous avez juste besoin d’un éditeur de code et d’une installation locale de WordPress, pour pouvoir tout casser sans risque.

Commencez par ouvrir votre dossier des thèmes dans votre éditeur de code. Dans une installation classique de WordPress, les thèmes sont situés dans wp-content/themes.

Vous trouverez un dossier nommé twentynineteen si vous avez le thème installé. Sinon, téléchargez-le via l’interface d’administration des thèmes.

Créez un dossier twentynineteen-child pour notre thème enfant. C’est dans ce dossier que l’on va travailler. Ok, le nom n’est pas très original, mais il a le mérite d’être clair. Par convention, on ajoute simplement -child au nom du thème parent.

Pour que WordPress reconnaisse notre thème, il faut ajouter un fichier style.css qui contient une entête permettant de l’identifier et de fournir d’autres metadonnées.

Créez donc un fichier style.css, et copiez-collez l’entête suivante.

/*
Theme Name: Twenty Nineteen Child
Template: twentynineteen
*/

Theme Name est le nom de votre thème, et avec Template vous indiquez à quel parent vous faites référence.

Et voilà ! Votre thème enfant apparaît dans l’administration de WordPress !

Allez-y, vous pouvez l’activer !

Thème enfant sans styles.
Ouh, un beau thème !

Pas de panique, c’est simplement parce que les styles du thème parent ne sont pas chargés !

Charger les styles

Ajoutez un fichier functions.php à la racine du thème, et ajoutez-y ce snippet :

<?php
add_action( 'wp_enqueue_scripts', 'twentynineteen_child_scripts' );
/**
 * Loads parent styles
 */
function twentynineteen_child_scripts(){
    wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
}

Pour résumer, la fonction twentynineteen_child_scripts se greffe au moment où WordPress charge les ressources (CSS et JS) nécessaires sur le devant du site ('wp_enqueue_scripts').

Elle utilise la fonction wp_enqueue_style() pour charger la feuille de styles du parent, en allant la chercher grâce à la fonction get_template_directory_uri(), qui renvoie l’url du dossier du thème parent.

Le fichier functions.php du thème parent est lui aussi chargé après celui de l’enfant. Dans ce fichier (du parent), la feuille de style du thème activé est chargée en utilisant get_stylesheet_uri() (qui renvoie l’url du fichier style.css du thème actif, donc du thème enfant dans notre cas.)

Du coup, la feuille de styles de l’enfant est avec twentynineteen directement chargée ! Ce qui est plutôt cool !

Donc vous pouvez directement ajouter vos styles personnalisés dans style.css de votre thème enfant et ça marche ! Testez simplement en ajoutant ceci : body { background-color: blue;}

Thème enfant tout bleu.
Wow. C’est magnifique.

Donc, pour résumer un peu ce qui se passe en coulisse :

  • Le fichier functions.php du thème actif (l’enfant) est chargé.
  • Notre fonction est programmée pour charger les styles du parent.
  • Le thème enfant fait référence au parent twentynineteen. Donc son fichier functions.php est lui aussi chargé.
  • Celui-ci programme le chargement de la feuille de styles du thème actif, donc de l’enfant.

Au final, on a bien les styles du parent chargés avant ceux de l’enfant. Tout va bien.

Ca marche pas !

Si les styles de votre thème enfant ne sont pas pris en compte, c’est peut-être parce que le thème parent charge ses propres styles, sans regarder ce qu’il se passe chez l’enfant. Si le thème parent utilise la fonction get_template_directory_uri() pour aller chercher les styles, il ne va trouver que les siens, car cette fonction ne regarde pas dans le thème enfant !

Dans le fichier functions.php de l’enfant, il faut donc charger les styles de l’enfant, car ceux du parent sont déjà chargés ! On va donc plutôt utiliser ceci :

<?php
add_action( 'wp_enqueue_scripts', 'twentynineteen_child_scripts' );
/**
 * Loads child styles
 */
function twentynineteen_child_scripts(){
    wp_enqueue_style( 'child-styles', get_stylesheet_uri(), array( 'twentynineteen-style' ) );
}

Ici, on charge les styles de l’enfant, en s’assurant que les styles du parent soient bien déclarés comme dépendance (3e paramètre de la fonction wp_enqueue_style ), car il faut que les styles de l’enfant soient chargés après ceux du parent. En déclarant une dépendance, WordPress s’occupe tout seul de les charger dans le bon ordre.

Pour trouver l’identifiant de la feuille de style du parent, on peut soit ouvrir le fichier functions.php du parent et y chercher comment les styles sont déclarés, ou on peut aussi inspecter la source, mais attention, WordPress ajoute le suffixe ‘-css’ au nom de la ressource.

Thème enfant - code source
On voit bien que les styles sont chargés dans le bon ordre

Donc la question est simplement de savoir si le thème parent charge sa propre feuille de style ou celle de l’enfant. Puis on charge la feuille manquante. C’est tout.

Comment modifier un modèle de page

Votre thème est bien installé et les styles fonctionnent. Maintenant, comment faire vos personnalisations ?

Le thème enfant hérite tout de son parent. Quand WordPress cherche un modèle de page, il va d’abord le chercher dans l’enfant, et s’il ne le trouve pas, va chercher dans le parent.

La manière la plus simple de personnaliser un modèle est donc de dupliquer le modèle parent dans votre enfant et de le modifier.

Copiez-collez le fichier header.php de twentynineteen dans twentynineteen-child, et modifiez-le pour ajouter simplement un titre bidon.

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?><!doctype html>
<html <?php language_attributes(); ?>>
...

			<div class="site-branding-container">
				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
			</div><!-- .site-branding-container -->

                        <h1>Youpi !</h1>

			<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
				...
			<?php endif; ?>
		</header><!-- #masthead -->

	<div id="content" class="site-content">

J’ai ajouté un magnifique <h1>Youpi !</h1> après la ligne 31. Maintenant, vu que c’est toujours le fichier header.php du thème enfant qui va être utilisé, je vais avoir ce magnifique “Youpi !” sur toutes mes pages.

Remarquez que le header appelle un modèle partiel (un “template part”) nommé site-branding dans le dossier template-parts/header/ à l’aide de la fonction get_template_part(), ligne 30. Ce qu’il faut savoir, c’est que cette fonction vérifie aussi d’abord si le fichier demandé existe dans l’enfant !

Donc si votre thème fait bon usage de cette fonction, vous pouvez aussi dupliquer les template-parts dans votre thème enfant pour les personnaliser. La seule contrainte est de respecter la structure des dossiers, pour que la fonction puisse retrouver le bon fichier au bon endroit.

Créez un dossier template-parts/ avec un sous-dossier header/. Puis copiez-collez y le fichier site-branding.php du thème parent.

Ce fichier est responsable de l’affichage de la barre de navigation. Par exemple, si vous voulez enlever le slogan du site, il vous suffit de commenter quelques lignes ou de les supprimer.

<?php
/**
 * Displays header site branding
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?>
<div class="site-branding">

	<?php if ( has_custom_logo() ) : ?>
		<div class="site-logo"><?php the_custom_logo(); ?></div>
	<?php endif; ?>
	<?php $blog_info = get_bloginfo( 'name' ); ?>
	<?php if ( ! empty( $blog_info ) ) : ?>
		<?php if ( is_front_page() && is_home() ) : ?>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		<?php else : ?>
			<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
		<?php endif; ?>
	<?php endif; ?>

	<?php
	// $description = get_bloginfo( 'description', 'display' );
	// if ( $description || is_customize_preview() ) :
		// ?>
			<!-- <p class="site-description">
				<?php // echo $description; ?> -->
			<!-- </p> -->
	<!-- <?php //endif; ?> -->
...

En commentant les lignes à partir de $description = ..., la description n’apparaît plus.

Si vous avez compris le principe, alors vous avez tout ce dont vous avez besoin pour bosser !

Si vous voulez en savoir plus sur les thèmes et leur organisation, je vous suggère mon article Comprendre son thème. J’y parle de hiérarchie des templates, et d’autres choses à savoir sur la structuration des thèmes WordPress.

C’est tout ?

Oui c’est tout ! Créer un thème enfant est à la fois facile et indispensable. Donc go !

Pour résumer quand même :

  • Un thème enfant hérite tout de son parent.
  • Créez un dossier du même nom que le parent, avec le suffixe -child , ajoutez-y un fichier style.css et functions.php
  • Il faut faire attention à bien charger les styles du parent, puis de l’enfant dans functions.php
  • Dupliquez les modèles que vous voulez personnaliser, et respectant la même organisation des données.

A partir de là, vous savez tout ce qu’il faut savoir sur les thèmes enfants.

Bon courage ! Enjoy !

PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !