creer-un-theme-enfant-wordpress

Créer Un Thème Enfant WordPress En Un Clin D’oeil

Créer un thème enfant WordPress est une manipulation assez simple. Vous allez pouvoir le constater par vous même dans ce tutoriel. Cela ne vous nécessitera que quelques minutes de votre temps.

Pourtant beaucoup de propriétaire de blog ou de site web WordPress ne le font pas. Et préfèrent aller modifier directement les fichiers sources de leurs thème principal afin de modifier le comportement natif d’une fonctionnalité. Ou pour améliorer le rendu d’un composant. Ce qui peut engendrer de grave conséquence à leurs blogs ou site web suite à une mise à jour de leurs thème principal. Ou lors du remplacement de ce dernier par un autre.

En effet, le but de créer un thème enfant WordPress est de pouvoir garder toutes les spécificités que vous souhaitez ajouter à votre thème principal dans des fichiers distincts de ceux de ce dernier. Ainsi lorsque vous mettez à jour votre thème, vos personnalisations ne seront pas perdus.

Bien sur, si vous souhaitez seulement apporter des modifications mineures de style. Vous pouvez ne pas allez jusqu’à la mise en place d’un thème enfant en ajoutant du CSS aditionnel à votre thème parent.

Dans ce tutoriel, je vous propose de découvrir étape par étape comment créer un thème enfant dans WordPress ( Child theme en Anglais).

Commençons alors !

Etape 1: Créer Le Dossier De Votre Thème Enfant WordPress

Créer votre dossier enfant

La première chose à faire est de créer un dossier dans le répertoire « /wp-content/themes/ » de votre installation WordPress.

Vous pouvez le faire soit en accédant à votre serveur à l’aide d’un client FTP comme FileZilla. Ou bien à travers l’explorateur de dossier de votre Cpanel.

Donnez un nom à ce dossier. Communément, on prend le nom du thème parent suivi du mot « -child » (child signifie « enfant » en Anglais). Par exemple si votre thème parent est « astra » le nom du dossier de votre thème enfant sera donc « astra-child« .

Etape 2: Création Du Fichier « functions.php »

Créez un fichier « functions.php » et placez le dans le dossier créé à l’étape précédente. Ce fichier va contenir toutes vos fonctions spécifiques que vous ajouterez à votre thème enfant. Ces derniers seront alors pris en considération par le thème parent.

Pour cela vous pouvez utiliser votre éditeur de texte préféré et copier le code ci-dessous. Pour ma part, j’utilise Notepad++.

Cette première fonction que nous ajoutons, indique au thème parent l’emplacement de la feuille de style CSS de votre thème enfant à prendre en considération.

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

 ?>

Etape 3: Ajouter La feuille De Style « style.css » De Votre Thème Enfant WordPress

/*
Theme Name: astra-child
Description: Une description de votre thème enfant
Author: Votre nom
Author URI: https://www.votre-domaine.fr
Template: astra
Version: 1.0
*/

Toujours dans le même dossier créé lors de la première étape. Ajouter un fichier « style.css » et renseigner le code ci-dessus.

Faites attention à remplacer ‘astra‘ par le nom de votre thème parent. Et à ne pas utiliser des majuscules ou introduire des espaces dans les valeurs des champs « Theme Name » et « Template ».

Etape 4: Activer Votre Thème Enfant Dans L’espace Administration De WordPress

Activer votre thème enfant

Pour cela, cliquez sur le menu « Apparence » au niveau de l’espace administration de WordPress. Puis sur le sous menu « Thèmes« . Vous allez voir apparaitre votre thème enfant. Survolez le et cliquez alors sur le bouton « Activer« .

Vous pouvez aussi définir une image à votre thème enfant. Pour cela le plus simple est de copier l’image screenshot.jpg du dossier racine de votre thème parent dans le dossier de votre thème enfant.

Ajout d’une image au thème enfant

Voilà, simple et rapide. Maintenant à chaque fois que vous souhaitez apporter une modification ou personnaliser le rendu de votre thème, vous n’aurez qu’à ajouter une fonction dans le fichier « functions.php », ou votre code css dans la feuille de style « style.css » de votre thème enfant.

Vous avez apprécié cet article ? Laissez nous alors un commentaire et restez connecté avec nous, en nous suivant sur Twitter, Facebook ou Youtube.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *