Tuto WordPress : créer votre thème enfant

Si vous êtes fatigué de refaire toutes les modifications de votre thème à chacune de ses mises-à-jour, il n’est pas nécessaire de vous vanter l’intérêt d’avoir un thème-enfant. Sinon, tout vous a été expliqué dans la phrase précédente.

Article mis à jour le 9 novembre 2015

Le principe du thème-parent et le thème-enfant

Lorsqu’une requête est envoyée au serveur (demande d’affichage d’une page), celui-ci renvoie en réponse les instructions du thème-parent, puis celles du thème-enfant. En clair, la page affichée est celle du modèle-parent avec celles contenues dans le modèle-enfant.
Ainsi, vous pouvez modifier le thème-parent (mises à jour), sans écraser les personnalisations que vous avez effectuées à l’aide du thème-enfant.

Comment créer un thème-enfant ?

Dans le dossier racine du site>wp-content>themes, créez un nouveau dossier. Le titre de ce dossier doit reprendre l’intitulé du thème-parent auquel vous allez ajouter -child.
Pour exemple : le nom du dossier de mon thème-enfant montemplate est montemplate-child.
Il n’est pas obligatoire de nommer le thème-enfant de ce manière. Vous pouvez aussi le nommer par le nom de votre entreprise si vous le souhaitez tant que vous ne laissez pas d’espace dans l’intitulé. Pour ma part, c’est que je fais : je le renomme avec le nom de l’entreprise du commanditaire ou de son produit, selon le type de site.

Créer le fichier style.css

Dans ce dossier, créez un fichier style.css et recopiez les lignes suivantes :

/*
 Theme Name:
 Theme URI:
 Description:
 Author:
 Author URI:
 Template:
 Version:
 License:
 License URI:
 Tags:
 Text Domain:
*/

Vous n’êtes pas obligé de tout conserver. Les lignes obligatoires sont :

/*
 Theme Name: NomDeMonThemeEnfant
 Template:   NomDuThemeParent
*/

Reprenons ensemble ces lignes.
Les lignes obligatoires (pour que le thème-enfant fonctionne) sont le nom de votre thème et celui du modèle (thème-parent)
Auparavant, il fallait aussi ajouter l’Url de la feuille de style.css (@import url(« ../intituleDossierParent/style.css »)) du modèle (thème parent). Aujourd’hui, la pratique a changé :

Créer le fichier functions.php du thème-enfant

Ce fichier n’est pas obligatoire, mais il améliore le fonctionnement du thème-enfant par la mise en file d’attente des styles. Certains thèmes ne peuvent avoir un thème-enfant fonctionnant qu’avec ce fichier. Créez dans le dossier du thème-enfant, un fichier intitulé functions.php. Collez dans ce fichier le code suivant :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Vous pourrez ajouter dans ce fichier toutes les fonctions que vous souhaitez apporter ou modifier par rapport au thème parent.
Votre thème-enfant est prêt à être activé dans l’administration WordPress. Rendez-vous dans le menu Apparence > thème et sélectionnez votre thème-enfant. Il vous faudra peut-être reconfigurer certains éléments de votre site, mais normalement cela ne devrait pas être le cas.

Modifier les styles de votre thème

Maintenant pour modifier les styles de votre thème, vous n’avez plus qu’à ajouter vos modifications dans le fichier style. Exemple :

/*
 Theme Name:   MonThemeEnfant
 Template:     ThemeParent
 Version:      1.1.1
Personnalisation du thème -------------------------------------------------------------- */
h1 {
    font-size: 26px;
}
h2 {
    font-size: 30px;
    color : #FF9900
}

Si vous souhaitez en savoir plus sur le sujet du thème-enfant et perfectionner vos modifications, consultez le Codex de WordPress.