Les thèmes enfants sont l’un de ces termes WordPress qui sont souvent évoqués et qui laissent les débutants perplexes. Vous avez peut-être même entendu parler d’eux et décidé de sauter leur création en raison de leur complexité apparente.
Nous comprenons cela. Mais d’après notre expérience, les thèmes enfants peuvent vous enregistrer une tonne de maux de tête plus tard. Ils protègent vos précieuses personnalisations, vous permettent d’expérimenter sans casser votre site et font de la mise à jour de votre thème un jeu d’enfant.
Si vous êtes intéressé, nous avons modifié le fonctionnement d’un thème enfant, comment le personnaliser et comment y apporter des modifications dans ce guide destiné aux débutants.
Comment fonctionne un thème enfant et pourquoi en avez-vous besoin ?
Un thème enfant hérite de toutes les fonctionnalités, fonctions et styles d’un autre thème WordPress. Lorsque vous créez un thème enfant, le thème d’origine est appelé thème parent.
L’héritage comprend le fichier style.css du thème parent, qui définit le style principal du thème. Le thème enfant peut surcharger ou étendre les propriétés héritées en ajoutant ses propres fichiers ou en modifiant les fichiers existants.
Bien qu’il soit possible de personnaliser votre thème WordPress sans installer de thème enfant, il y a plusieurs raisons pour lesquelles vous pouvez en avoir besoin malgré tout :
- Les clients/clientes protègent vos personnalisations lors des mises à jour du thème, en évitant qu’elles ne soient écrasées. Si vous modifiez directement le thème parent, ces ajustements risquent de disparaître lors de la mise à jour.
- Les thèmes enfants vous permettent de tester en toute sécurité de nouvelles conceptions ou fonctionnalités sans altérer le thème original du site, à l’instar d’un environnement de staging.
- Si vous savez coder, les thèmes enfants peuvent rendre le processus de développement plus efficace. Les fichiers d’un thème enfant sont beaucoup plus simples que ceux d’un thème parent. Vous pouvez vous concentrer sur la modification uniquement des parties du thème parent que vous souhaitez modifier ou déplier.
Ce qu’il faut faire avant de créer un thème enfant WordPress
Nous avons vu beaucoup d’utilisateurs/utilisatrices WordPress enthousiastes à l’idée de se plonger dans les aspects techniques, uniquement découragés par les erreurs qui apparaissent. Nous comprenons. C’est pourquoi il est important de savoir dans quoi vous vous embarquez avant de créer un thème enfant.
Voici certaines choses que nous vous recommandons de faire en premier avant de poursuivre ce guide étape par étape :
- Sachez que vous allez travailler avec du code. Au minimum, vous devrez avoir des connaissances de base en HTML, CSS, PHP et, facultativement, en JavaScript pour comprendre les modifications à apporter. Vous trouverez plus d’informations à ce sujet dans le manuel des thèmes WordPress.
- Choisissez un thème parent qui présente la conception et les fonctionnalités du site que vous souhaitez. Si possible, trouvez-en un pour lequel vous devrez effectuer uniquement quelques modifications. Vous pouvez suivre notre liste de contrôle des choses à faire avant de modifier un thème WordPress si nécessaire.
- Utilisez un site local ou un site de staging pour le développement des thèmes. Vous ne voulez pas créer d’erreurs involontaires sur votre site direct.
- Sauvegardez d’ abordvotre site. Nous vous recommandons d’utiliser une extension de sauvegarde comme Duplicator si c’est la première fois que vous le faites.
Il existe plusieurs façons de créer un thème enfant à partir de votre thème existant. L’une d’entre elles consiste à utiliser un code manuel, tandis que d’autres nécessitent une extension, ce qui est beaucoup plus adapté aux débutants.
La première méthode peut sembler intimidante si vous manquez d’expérience technique. Cela dit, même si vous choisissez l’une des méthodes d’extension, nous vous recommandons de lire la méthode manuelle pour vous familiariser avec le processus et les fichiers concernés.
Astuce : Vous souhaitez personnaliser votre thème sans créer de client/cliente ? Utilisez WPCode pour activer en toute sécurité de nouvelles fonctionnalités avec des extraits de code personnalisés sans casser votre site.
Avec tout cela à l’esprit, passons à la façon de créer un thème enfant dans WordPress. Vous pouvez passer à la méthode que vous préférez en utilisant les liens ci-dessous :
- Method 1: Creating a Child WordPress Theme Manually
- Method 2: Creating a Child Classic Theme With a Plugin
- Method 3: Creating a Child Block Theme With a Plugin
- Bonus Tip: Find Out If Your Theme Has a Child Theme Generator
- How to Customize Your Classic Child Theme
- How to Customize Your Block Child Theme
- How to Edit a Child Theme's Template Files
- How to Add New Functionality to Your Child Theme
- How to Troubleshoot Your WordPress Child Theme
Méthode 1 : Créer manuellement un thème WordPress enfant
Tout d’abord, vous devez ouvrir /wp-content/themes/ dans votre dossier d’installation de WordPress.
Vous pouvez le faire en utilisant le gestionnaire de fichiers de votre hébergeur WordPress ou un client FTP. Nous trouvons la première option beaucoup plus facile, c’est donc celle que nous allons utiliser.
Si vous êtes un client Bluehost, vous pouvez vous connecter au tableau de bord de votre compte d’hébergement et naviguer jusqu’à l’onglet ‘Sites’. Cliquez ensuite sur « Réglages ».
Dans l’onglet Vue d’ensemble, défilez vers le bas jusqu’à la section « Liens rapides ».
Sélectionnez ensuite « Gestionnaire de fichiers ».
À ce stade, vous devez vous rendre dans le dossier public_html de votre site et ouvrir le chemin /wp-content/themes/.
Ici, il suffit de cliquer sur le bouton » + Dossier » dans le coin supérieur gauche pour créer un nouveau dossier pour votre thème enfant.
Vous pouvez donner au dossier le nom que vous voulez.
Pour ce tutoriel, nous utiliserons simplement le nom de dossier twentytwentyone-child car nous utiliserons Twenty Twenty-One comme thème parent. Une fois que c’est fait, il suffit de cliquer sur « Créer un nouveau dossier ».
Ensuite, vous devez ouvrir le dossier que vous venez de constituer et cliquer sur » + Fichier » pour créer le premier fichier de votre thème enfant.
Si vous utilisez un client FTP, vous pouvez utiliser un éditeur de texte comme le Bloc-notes et téléverser le fichier ultérieurement.
Nommez ce fichier « style.css », car il s’agit de la feuille de style principale de votre enfant et il contiendra des informations sur le thème enfant.
Cliquez ensuite sur « Créer un nouveau fichier ».
Il suffit maintenant de cliquer avec le bouton droit de la souris sur le fichier style.css.
Cliquez ensuite sur « Modifier » pour ouvrir un nouvel onglet, comme dans la capture d’écran ci-dessous.
Dans ce nouvel onglet, vous pouvez coller le texte suivant et l’adapter en fonction de vos besoins :
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
Une fois cela fait, il suffit de cliquer sur « Enregistrer les modifications ».
La prochaine chose à faire est de créer un deuxième fichier et de le nommer functions.php. Ce fichier importera ou mettra en file d’attente les feuilles de style à partir des fichiers du thème parent.
Une fois le document créé, ajoutez le code wp_enqueue suivant :
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
Une fois cela fait, il suffit d’enregistrer le fichier comme dans l’étape par étape précédente.
Note : Pour cette méthode, nous vous recommandons de lire la documentation officielle Child Themes and Including Assets pour vous assurer que les feuilles de style de votre thème enfant sont chargées correctement.
Vous avez maintenant créé un thème enfant très basique. Lorsque vous allez dans Apparence » Thèmes dans votre panneau d’administration WordPress, vous devriez voir l’option Twenty Twenty-One Child.
Cliquez sur le bouton « Activer » pour commencer à utiliser le thème enfant sur votre site.
Méthode 2 : Création d’un thème enfant classique à l’aide d’une extension
La méthode suivante utilise l’extension Child Theme Configurator. Cette extension WordPress facile à utiliser vous permet de créer et de personnaliser rapidement des thèmes enfants WordPress sans utiliser de code, mais elle fonctionne uniquement avec un thème classique (non bloqué).
La première chose à faire est d’installer et d’activer l’extension WordPress. Une fois activé, vous devez naviguer vers Outils » Thèmes enfants dans votre tableau de bord WordPress.
Dans l’onglet Parent/Enfant, il vous sera demandé de choisir une action. Il vous suffit de sélectionner « CREER un nouveau thème enfant » pour Premiers pas.
Ensuite, sélectionnez un thème parent dans un menu déroulant. Nous sélectionnerons le thème Hestia.
Ensuite, il suffit de cliquer sur le bouton « Analyser » pour s’assurer que le thème peut être utilisé comme thème parent.
Ensuite, il vous sera demandé de nommer le dossier dans lequel le thème enfant sera enregistré. Vous pouvez utiliser le nom de dossier de votre choix.
En dessous, vous devez sélectionner l’endroit où enregistrer les nouveaux styles : dans la feuille de style principale ou dans une feuille séparée.
La feuille de style principale est la feuille de style par défaut livrée avec votre thème enfant. Lorsque vous enregistrez de nouveaux styles personnalisés dans ce fichier, vous modifiez directement les styles principaux de votre thème enfant. Chaque modification écrasera le style du thème d’origine.
L’option séparé vous permet d’enregistrer un nouveau style personnalisé dans un fichier de feuille de style distinct. Cette option est utile si vous souhaitez préserver le style du thème d’origine et ne pas l’écraser.
À des fins de démonstration, nous choisirons la première option. Mais à mesure que vous devenez plus créatif avec vos personnalisations de thème enfant, vous pouvez toujours répéter ce processus et sélectionner la deuxième option.
En descendant, vous devez choisir comment accéder à la feuille de style du thème parent.
Nous utiliserons la valeur par défaut « Utiliser la file d’attente de style de WordPress », qui permet à l’extension de déterminer automatiquement les actions appropriées.
Lorsque vous arrivez à l’étape 7, vous devez cliquer sur le bouton libellé « Cliquez pour modifier les attributs du thème enfant ».
Vous pouvez ensuite renseigner les détails de votre thème enfant.
Lorsque vous créez un thème enfant manuellement, vous perdez les menus et les widgets du thème parent. Child Theme Configurator peut les copier du thème parent vers le thème enfant. Cochez la case à l’étape par étape si vous souhaitez le faire.
Enfin, cliquez sur le bouton « Créer un nouveau thème enfant » pour créer votre nouveau thème enfant.
L’extension créera un dossier pour votre thème enfant et ajoutera les fichiers style.css et functions.php que vous utiliserez pour personnaliser le thème ultérieurement.
Avant d’activer le thème, vous devez cliquer sur le lien situé en haut de l’écran pour le prévisualiser et vous assurer qu’il est agréable à regarder et qu’il ne casse pas votre site.
Si tout semble fonctionner, cliquez sur le bouton « Activer et publier ».
Votre thème enfant est maintenant en direct.
À ce stade, le thème enfant se présente et se comporte exactement comme le thème parent.
Méthode 3 : Création d’un thème de bloc enfant à l’aide d’une extension
Si vous utilisez un thème en bloc, WordPress offre un moyen facile de créer un thème enfant avec l’extension Create Block Theme.
Tout d’abord, vous devrez installer et activer l’extension WordPress. Ensuite, allez dans Apparence » Créer un thème de bloc.
Ici, il suffit de sélectionner « Créer un enfant de [nom du thème actuel] ».
Ensuite, remplissez les informations relatives à votre thème enfant. Nous utilisons Twenty Twenty-Four dans cet exemple, nous le nommerons donc Twenty Twenty-Four Child.
Nous avons également donné une description et une auteur/autrice pour le thème enfant. Une fois cela fait, cliquez sur le bouton » Créer un thème enfant « .
L’extension va maintenant créer et installer le fichier zip du thème WordPress dans votre zone d’administration.
Une fois cela fait, votre site activera automatiquement ce thème enfant nouvellement créé. Vous pouvez le confirmer en allant dans Apparence » Thèmes.
Astuce bonus : Trouver si votre thème dispose d’un générateur de thème enfant
Si vous avez de la chance, il se peut que votre thème WordPress dispose déjà d’une fonctionnalité permettant de créer un thème enfant.
Par exemple, si vous utilisez Astra, alors vous pouvez vous rendre sur le site du générateur de thème enfant Astra. Après cela, il suffit de renseigner le nom de votre thème enfant et de cliquer sur le bouton » Generate « .
Votre navigateur téléchargera alors automatiquement votre thème enfant sur votre ordinateur, que vous pourrez ensuite installer vous-même sur WordPress.
Nous avons également trouvé d’autres thèmes WordPress populaires qui disposent d’un générateur de thème enfant :
Outil de personnalisation de votre thème enfant classique
Note : Cette section s’adresse aux utilisateurs/utilisatrices de thèmes WordPress classiques. Si vous utilisez un thème en bloc, il vous suffit d’aller/de passer à la section suivante.
Techniquement, vous pouvez personnaliser votre thème enfant sans code en utilisant l’Outil de personnalisation du thème. Les modifications que vous y apportez n’affecteront pas votre thème parent. Si vous n’êtes pas encore à l’aise avec le codage, n’hésitez pas à utiliser le personnalisateur.
Cela dit, nous recommandons également de personnaliser le thème enfant avec du code.
Outre le fait d’en apprendre davantage sur le développement des thèmes WordPress, la personnalisation du code permet de documenter les modifications dans les fichiers du thème enfant, ce qui facilite leur suivi.
Ajouté à cela, la façon la plus basique de personnaliser un thème enfant est d’ajouter des CSS personnalisés au fichier style.css. Pour ce faire, vous devez savoir quel code vous devez personnaliser.
Vous pouvez simplifier le processus en copiant et en modifiant le code existant du thème parent. Vous pouvez trouver ce code en utilisant l’outil Inspect de Chrome ou Firefox ou en le copiant directement à partir du fichier CSS du thème parent.
Méthode 1 : Copier le code depuis l’inspecteur de Chrome ou Firefox
Le moyen le plus simple de découvrir le code CSS que vous devez modifier est d’utiliser les outils d’inspection fournis avec Google Chrome et Firefox. Ces outils vous permettent d’examiner le HTML et le CSS qui se cachent derrière n’importe quel élément d’une page web.
Vous pouvez en savoir plus sur l’outil inspecteur dans notre guide sur les bases de l’élément inspect : personnaliser WordPress pour les utilisateurs/utilisatrices.
Lorsque vous cliquez avec le bouton droit de la souris sur votre page web et que vous utilisez l’élément inspecter, vous verrez le HTML et le CSS de la page.
Lorsque vous déplacez votre souris sur différentes lignes HTML, l’inspecteur les met en évidence dans la fenêtre supérieure. Il affiche également les règles CSS similaires à celles de l’élément mis en surbrillance :
Vous pouvez essayer de modifier le CSS à cet endroit pour voir ce que cela donnerait. Par exemple, essayons de modifier la couleur d’arrière-plan du corps du thème en #fdf8ef. Trouvez la ligne de code qui dit body { et, à l’intérieur, le code qui dit color :.
Il suffit de cliquer sur l’icône du sélecteur de couleurs à côté de la couleur : et de coller le code HEX dans le champ approprié, comme suit :
Vous savez maintenant comment modifier la couleur d’arrière-plan à l’aide de CSS. Pour rendre les modifications permanentes, vous pouvez ouvrir votre fichier style.css dans le répertoire du thème enfant (à l’aide du gestionnaire de fichiers ou du FTP).
Ensuite, collez le code suivant sous les informations du thème enfant, comme ceci :
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
Voici à quoi cela ressemblera si vous allez dans l’administration de WordPress et que vous ouvrez Apparence » Theme File Editor:
Si vous êtes débutant et que vous souhaitez apporter d’autres modifications, nous vous recommandons de vous familiariser avec les langages HTML et CSS afin de savoir exactement à quel élément chaque code fait référence. Il existe de nombreuses antisèches HTML et CSS en ligne auxquelles vous pouvez vous référer.
Voici la feuille de style terminée que nous avons créée pour le thème enfant. N’hésitez pas à expérimenter et à la modifier :
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
Méthode 2 : Copier le code du fichier style.css du thème parent
Peut-être qu’il y a beaucoup de choses dans votre thème enfant que vous voulez personnaliser. Dans ce cas, il peut être plus rapide de copier du code directement depuis le fichier style.css du thème parent, de le coller dans le fichier CSS de votre thème enfant, puis de le modifier.
Le problème, c’est que le fichier de feuille de style d’un thème peut sembler très long et difficile à comprendre pour les débutants. Cependant, une fois que vous avez compris les bases, ce n’est pas si difficile.
Utilisons un exemple réel tiré de la feuille de style du thème parent Twenty Twenty-One. Vous devez naviguer jusqu’à /wp-content/themes/twentytwentyone dans votre dossier d’installation WordPress, puis ouvrir le fichier style.css dans votre gestionnaire de fichiers, FTP ou l’éditeur de fichiers du thème.
Vous verrez les lignes de code suivantes :
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
Les lignes 3 à 15 contrôlent le type de couleurs (comme le jaune, le vert, le violet) que le thème entier utilisera dans leurs codes HEX spécifiques. Les lignes telles que « global-color-primary » ou « global-color-secondary » indiquent les couleurs primaires et secondaires du thème.
Vous pouvez copier ces lignes de code dans la feuille de style de votre thème enfant et modifier les codes HEX pour créer le jeu de couleurs qui vous convient.
En défilant vers le bas dans la feuille de style du thème parent, vous remarquerez que d’autres variables peuvent également comporter ces variables de couleur, comme ici :
/* Buttons */
--button--color-text: var(--global--color-background);
Cela signifie essentiellement que tous les textes des boutons utiliseront la même couleur que celle déclarée dans --global--color-background :, qui est le vert menthe(--global--color-green : #d1e4dd). Si vous modifiez la valeur HEX dans --global--color-green :, le texte du bouton aura lui aussi un aspect différent.
Note : Si vous utilisez le thème enfant Twenty Twenty-One et que vous ne constatez aucune modification, il se peut que vous deviez mettre à jour la partie « Version » des informations du fichier du thème (par exemple, de 1.0 à 2.0) à chaque fois que vous mettez à jour le fichier style.css.
Vous pouvez également suivre ces tutoriels pour expérimenter les personnalisations de votre thème enfant :
- Comment modifier la couleur du texte dans WordPress
- Comment modifier la taille de votre logo WordPress (fonctionne avec n’importe quel thème)
- Outil de personnalisation du style des guillemets dans les thèmes WordPress
- WordPress Body Class 101 : Trucs et astuces pour les concepteurs de thèmes
- Comment ajouter un effet de parallaxe à n’importe quel thème WordPress
Outil de personnalisation de votre thème enfant Block
Si vous utilisez un thème basé sur des blocs enfants, la plupart de vos personnalisations seront effectuées dans votre fichier theme.json, et non dans le fichier style.css.
Cependant, lors de nos tests, nous avons trouvé que le processus était compliqué. Contrairement aux thèmes enfants classiques, il y a un plus grand manque de connaissances à combler (notamment sur JSON et la façon dont les CSS y sont gérés) si vous êtes nouveau dans le développement de thèmes WordPress.
Cela dit, nous avons trouvé une alternative beaucoup plus facile en utilisant l’extension Create Block Theme. Cet outil peut enregistrer toutes les modifications effectuées dans l’éditeur de site complet de WordPress dans le fichier de votre thème enfant.json. Ainsi, vous n’aurez pas à toucher au moindre code car l’extension s’en chargera pour vous.
Affichons un exemple. Tout d’abord, ouvrez l’éditeur WordPress Full Site Editor en allant dans Apparence » Editor.
Vous aurez le choix entre plusieurs menus.
Il suffit de sélectionner « Sélectionnés ».
Sur la page suivante, vous pourrez choisir parmi plusieurs combinaisons de styles intégrés.
Pour ce qui nous concerne, vous pouvez simplement aller à/au et cliquer sur l’icône du crayon.
Maintenant, essayons de modifier certaines parties de votre thème enfant, comme les polices.
Pour cet exemple, cliquez sur « Typographie » dans la colonne latérale droite.
Ensuite, vous verrez quelques options permettant de modifier les polices globales du thème pour le texte, les liens, les en-têtes, les légendes et les boutons.
Pour les besoins de la démonstration, cliquons sur « Titres ».
Dans le menu déroulant Police, modifiez la sélection d’origine pour la remplacer par n’importe quelle police disponible.
N’hésitez pas à modifier l’apparence, la hauteur des lignes, l’espacement des lettres et la casse des lettres si nécessaire.
Une fois que vous avez terminé, cliquez sur « Enregistrer ». Ensuite, vous pouvez cliquer sur le bouton Créer un thème de bloc (l’icône de la clé à molette) à côté de « Enregistrer ».
Cliquez ensuite sur « Enregistrer les modifications dans le thème ».
Ensuite, allez-y et sélectionnez les modifications à enregistrer dans le thème enfant.
Les modifications concernent par exemple les polices de caractères, les styles personnalisés, les modifications de modèles, etc.
Une fois que c’est fait, il suffit de défiler jusqu’au bas de la colonne latérale.
Cliquez ensuite sur « Enregistrer les modifications ».
Maintenant, voyons votre fichier theme.json pour que vous puissiez voir les modifications reflétées dans le code.
Pour ce faire, cliquez à nouveau sur le bouton Créer un thème sur blocs et sélectionnez « Voir theme.json ».
Après avoir cliqué dessus, vous verrez que le fichier comprend quelques nouveaux ajouts de code.
Dans notre cas, le fichier comprend un code qui indique que les identifiants de titres utiliseront la police Inter avec un aspect semi-gras, une hauteur de ligne de 1,2, un espacement de ligne de 1 pixel et en minuscules.
Ainsi, chaque fois que vous modifiez votre thème de bloc enfant, assurez-vous de cliquer sur l’icône de la clé à molette et d’enregistrer vos modifications afin qu’elles soient bien documentées.
Comment modifier les fichiers de modèle d’un thème enfant ?
La plupart des thèmes WordPress ont des modèles, qui sont des fichiers de thème qui contrôlent la conception et la mise en page d’une zone spécifique à l’intérieur d’un thème. Par exemple, la section du pied de page est généralement gérée par le fichier footer.php, et l’en-tête est géré par le fichier header.php.
Chaque thème WordPress a également une mise en page différente. Par exemple, le thème Twenty Twenty-One comporte un en-tête, une boucle de contenu, une zone de widgets en bas de page et un pied de page.
Si vous souhaitez modifier un Modèle, vous devez trouver le fichier dans le dossier du thème parent et le copier dans le dossier du thème enfant. Ensuite, vous devez ouvrir le fichier et y apporter les modifications souhaitées.
Par exemple, si vous utilisez Bluehost et que votre thème parent est Twenty Twenty-One, alors vous pouvez aller dans /wp-content/themes/twentytwentyone dans votre gestionnaire de fichiers. Ensuite, cliquez avec le bouton droit de la souris sur un fichier de modèle comme footer.php et sélectionnez » Copier « .
Saisissez ensuite le chemin d’accès au fichier de votre thème enfant.
Une fois que vous avez terminé, cliquez simplement sur « Copier les fichiers ».
Vous serez alors redirigé vers le chemin d’accès au fichier.
Pour modifier le fichier footer.php, il suffit de cliquer dessus avec le bouton droit de la souris et de sélectionner « Modifier ».
Par exemple, nous allons retirer le lien « Proudly powered by WordPress » du pied de page et y ajouter une notification de copyright.
Pour ce faire, vous devez supprimer tout ce qui se trouve entre les identifiants <div class="powered-by"> :
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
Vous devez ensuite coller le code que vous trouverez sous ces identifiants dans l’exemple ci-dessous :
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->
Voici ce que vous devriez maintenant avoir dans l’éditeur de texte :
Enregistrez le fichier pour officialiser les modifications.
Ensuite, visitez votre site pour voir la nouvelle notification de copyright.
Comment ajouter de nouvelles fonctionnalités à votre thème enfant ?
Le fichier functions.php d’un thème utilise du code PHP pour ajouter des fonctionnalités ou modifier des fonctionnalités par défaut sur un site WordPress. Il agit comme une extension pour votre site WordPress qui est automatiquement activée avec votre thème actuel.
Vous trouverez de nombreux tutoriels WordPress qui vous demandent de copier et de coller des extraits de code dans le fichier functions.php. Mais si vous ajoutez vos modifications au thème parent, alors elles seront écrasées chaque fois que vous installerez une nouvelle mise à jour du thème.
C’est pourquoi nous recommandons d’utiliser un thème enfant lorsque vous ajoutez des extraits de code personnalisés. Dans ce tutoriel, nous allons ajouter une nouvelle zone de widgets à notre thème.
Nous pouvons le faire en ajoutant cet extrait de code au fichier functions.php de notre thème enfant. Pour rendre le processus encore plus sûr, nous vous recommandons d’utiliser l’extension WPCode afin de ne pas modifier directement le fichier functions.php, ce qui réduit le risque d’erreurs.
Vous pouvez consulter notre guide sur l ‘ajout d’extraits de code personnalisés pour en savoir plus.
Voici le code que vous devez ajouter à votre fichier functions.php :
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
Une fois le fichier enregistré, vous pouvez vous rendre sur la page Apparence » Widgets de votre tableau de bord WordPress.
Vous y verrez votre nouvelle zone de widgets personnalisés à laquelle vous pourrez ajouter des widgets.
Il y a beaucoup d’autres fonctionnalités que vous pouvez ajouter à votre thème en utilisant des extraits de code personnalisés. Consultez ces astuces extrêmement utiles pour le fichier WordPress functions.php et les extraits de code WordPress utiles pour les débutants.
Comment dépanner votre thème enfant WordPress
Si vous n’avez jamais créé de thème enfant auparavant, alors il y a de fortes chances que vous fassiez quelques erreurs, et c’est normal. C’est pourquoi nous vous recommandons d’utiliser une extension de sauvegarde, de créer un site local ou un environnement de staging, et d’utiliser un contenu factice pour votre site de démonstration.
Cela dit, n’abandonnez pas trop vite. La communauté WordPress est très ingénieuse, donc quel que soit le problème que vous rencontrez, une solution existe probablement déjà.
Pour commencer, vous pouvez consulter nos erreurs WordPress les plus courantes pour trouver une solution.
Les erreurs les plus courantes que vous verrez probablement sont des erreurs de syntaxe causées par quelque chose que vous avez manqué dans le code. Vous trouverez de l’aide pour résoudre ces problèmes dans notre guide rapide sur la façon de trouver et de corriger l’erreur de syntaxe dans WordPress.
En outre, vous pouvez toujours recommencer si quelque chose se passe très mal. Par exemple, si vous avez accidentellement supprimé un élément nécessaire à votre thème parent, vous pouvez simplement supprimer le fichier de votre thème enfant et recommencer.
Nous espérons que cet article vous a aidé à apprendre comment créer un thème enfant WordPress. Vous pouvez également consulter notre guide ultime sur la façon de tester votre thème WordPress par rapport aux dernières normes et notre article de comparaison sur les thèmes WordPress gratuits vs premium.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Mahesh Yadav
One thing I want to know, if we make a child theme then we have 2 CSS files to load one parent theme CSS and second child them CSS. Wouldn’t it increase the site load time and It added one more CSS to load?
WPBeginner Support
While the load time would technically increase, it shouldn’t be by a noticeable amount.
Administrateur
Nadia Shaheen
Great work!
stay blessed and keep sharing awesome content.
WPBeginner Support
Thank you, glad you liked our content
Administrateur
Fahad
Great Work !
This site is super helpful
Keep it up !!
WPBeginner Support
Thank you, glad our article was helpful
Administrateur
Daniel Waduka
I am just starting to use child themes, and this article has been of so much help to me.
Thanks so much.
WPBeginner Support
Glad our guide could be helpful
Administrateur
Marcos Flores
Hi! i’ve been reading this article and it works! but i also read wordpress documentation about this and they say this
« Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php »
Should i use both method? or if i user the function.php i dont need to write import function inside style.css (located in my child-theme folder)
Khema
Your instructions are missing a step with the functions.php creation. It should mention that needs to wrap the whole file. In this case I didn’t want to add the example you used and to another piece of code from the article you linked to. Naturally those codes didn’t include the php tag.
Thanks for the article. It’s very very helpful.
rReons
So question. I was using my wordpress theme without any child theme and was doing all the changes in to it. I have created a child theme thanks to your guide and I’m using that now as the website theme.
My question is both themes have the same modifications changes. If I update the main theme from now on, will the changes affect the child theme also?
balu
He! wpbeginner. Wordpress official site saying this. You need to update the post. Thank You!
Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
Pat
Great info…you made it to my save list!! Thanks!
Alfonso de Garay
I have a Child theme with the theme latest version installed in my site. WP version 4.7.5. Received a notice that says WP version is available please update now.
1. Do I have to backup my site again before updating?
2. Do I have to create another Child theme using Child version 1 one?
2. How can I change the Name, email and URL to Chile version 1
WPBeginner Support
Hi Alfonso,
WordPress updates normally do not affect your themes so you do not need to create another child theme. You should always backup your website before updating WordPress.
Administrateur
Lisa Bruce
Hi, I can see that this video/post is a few years old, so I’m a little late to the party, but I have a questions I was hoping you could help me with.
I am a relatively new to WP and just came to realize the importance of child themes. I have been working on developing a site for a friend and have made several changes to the theme that I am using. I found a bug in the theme and contacted the theme developer and they said that the bug had been fixed in a recent update.
If I install the update I believe I will loose all my customizations. Is it too late to create a child them? Is it possible to do it now and then install the update? I prefer not to have to start from scratch.
WPBeginner Support
Hi Lisa,
If you know what changes you made and to which files, then first download a backup of your existing theme to your computer. After that, install the updated version. You can now create a child theme and then copy and paste the code from your customized version to the child theme.
Administrateur
Nell Yang
Thank you for this helpful post. I have always been looking for a video to show me how exactly should I use child theme. It is quite time consuming that each time after I updated my theme, all my styles just went away. It is frustrating to do everything over again. I tried to read the documents from wordpress but still don’t know how to proceed after activate the child theme. Keep up the good work! Thank you again!
Tony Agee
Good instructional video. Most tutorials I have watched tell you to paste the code in the file but they neglect to tell you what medium to paste the code to. I was going to use Notepad++ but I guess you can use regular notepad.
JP
Hello, i just want to say that you are a very good writer, very clear and simple. I past a long time on your article for learn WP.
Thank you!
Rob Brooks
Hi. Thank you for being a great WP resource. I am new to WP and really appreciate your guidance. I have followed the article to the letter but when I go to enable the child template on the site, I get the error « The parent theme is missing. Please install the « Real Estate Lite » parent theme. As you see I am using a free template called Real Estate light. it is located in the ../real-estate-lite/ directory of wp-content/themes. My code is below… did I do something wrong?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");1-click Use in WordPress
In addition, I will mention the theme was free and is running on WP version 4.7.2 (Running on Plesk). I created style.css file directly on the server so no FTP issues.
I have already made significant changes to the parent style.css file as well as functions.php … I am not sure if this would affect this, but going to test on an unedited dummy domain to see if I get the same results
Any guidance/assistance you can provide would be greatly appreciated.
WPBeginner Support
Hey Rob,
You will need parent theme to be installed on your site and Template value should match parent theme’s actual name which you can see in it’s style.css file.
Administrateur
Carrie
Hi! Great article! I am finally starting to understand how to edit css so that I get the result I want, thanks to this article.
Thanks much for the simplified explanation!
Nalin
I created a child theme & Using @import for the “style.css” on a child theme. Now I want to change in another css file of parent theme’s folder ….. /font_awesome/css/fontawesome.css
Now, I want to know that where I will put my new fontawesome.css in child theme & how to use @import command.
or any other process to use more css file in child theme.
Rebecca
So, I don’t have the wp content folder on my computer. What should I do?
Should I have downloaded this at some point?
WPBeginner Support
Hi Rebecca,
The wp-content file is hosted on your hosting account not on your computer. You will need an FTP client to connect to your server.
Administrateur
Brad
Using @ import is no longer best practice
SAppa
Then what is the best practice now? You should be able to back up your comment.
Jual beli rumah
Thankyou
Jean-philippe
I am learning so much since a few hours on your website. Everytime I search something in google related to « how to » in wordpress I find that the best information is here at WPbeginner. It is always well explained and easy to understand. I will always come back for information here without a doubt.
WPBeginner Support
Hi Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Administrateur
Smart Rashed
This is the article ,which i am looking for,thanks man.
Kevin
I know this will be a stupid question. I’m so new to this and have no skills at all. If I am creating a file, style sheet, etc. on my wp installation file on my local pc, how does that get onto my website? I guess I’m missing that? I use like 3 different PCs to work on my website and those local files aren’t on all of them. Again, I am sure I am missing something really dumb. Not seeing the connection.
WPBeginner Support
The files you edit on your computer need to be transferred to your website using an FTP client. See our guide on how to upload WordPress files using FTP.
Administrateur
Kevin
Ok, I got that and made a child theme, but when I activate it, the formatting on the site is all off from the parent theme. What did I do wrong?
Francesco
Hi there,
I’m following your tutorial but WordPress (4.5.3) doesn’t recognise the new folder on my online server. How can I work around this?
Thanks,
F.
Muhammad Moosa
Helpful article indeed, I followed it and created a child theme. Thanks.
Carolina
Hi, thanks for the tutorial, very helpfull. But I have a question. Can I create a child theme from an already established website? I have a client who designed his own website but did not create a child theme. How to go about it?
WPBeginner Support
If their current theme follows WordPress coding standards and best practices then you should have no trouble creating a child theme.
Administrateur
Mike
Thank you so much for the article and video. Apparently since these were created WordPress has new best practices listed in their codex which is confusing me.
« The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. »
Do I stick with the steps you outlined herein verbosely, or do I omit the import function and create the PHP file, or do I implement both?
My theme’s style.css file only contains a header so importing that file seems irrelevant, and there are multiple CSS files like main.css located elsewhere in the parent’s file structure. Not knowing any better as a beginner I have already made changes to main.css to achieve some of my goals and only now I realize the child theme is necessary.
Any advice is greatly appreciated.
Best regards,
Mike
WPBeginner Support
You will need to import at least your style.css file it should be in your parent themes main directory. It should automatically import other CSS files.
Administrateur
Mike
Even if the style.css has nothing but the header?
Jack
If your style.css file do not have imports to other css styles, you can import them directly, just like style.css.
Olamide
Good day. When I did a live preview of the child theme, I noticed that it didn’t have the css of the parent theme. Maybe this is as a result of an error in the way I inserted the code?
This is the code that I inserted:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(« ../sparkling/style.css »);
The parent theme is « sparkling ». If there is any error, please correct me.
Thank you.
WPBeginner Support
The code is correct.
Administrateur
lucia
Hi there,
I am trying to set up a child theme to activate my footer on twenty twelve, but I don’t know what code to use to set it up.
I tried this webpage
with various suggestions , and I have tried to change your suggestion as given on twenty thirteen , but I don’t succeed.
Could you please give me the right working code for setting up a child them for twelve twelve.
Leigh
This was incredibly helpful – especially your HTML for us to copy. I’ve never been so excited to see colors change on a website before. This is easily the best « how-to » out there for this theme!
Bhautik Andhariya
Hello, I have tried same example that you shown. But my child theme is replacing all the style of its parent theme.
It doesn’t have any style of it’s parent. What is the solution? Can you please help me? I am new in wordpress and i am learning it.
Angelo
Hi there!
I’ve just installed the Bose template and also created a child theme for it. However, the following error message appears on the center of my website:
Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12
I’m a very beginner at websites creation, so I haven’t got any clue about what the problem is. Could anyone help me?
Thanks a lot!
WPBeginner Support
Please contact the theme developer for support.
Administrateur
Djamila
Hi,
Thanks for the article! I could not get my child theme to ‘appear’ in the template section and it turned out I indeed misspelled the way the original template was named. What a difference a capital makes, huh?
However, now that I have my child theme I was able to update the parent theme and when I did all of a sudden I got an issue with a super important plugin ( I am building a review blog on a local database, for now and it’s the wrap up/grading plugin belong to the template designers).
In the parent template they ‘upgraded’ this plugin. I personally prefer the old one, but okay…anyway…underneath my review you now see *both*, the old wrap up with grades and the new one, which looks out of whack too. I have de-activated and re-activated but it stays like that. Super annoying and I don’t know where to look to either keep the old one (prettier) or only the new one and outlines as should.
Where should I start? Thanks for any help you can give me.
WPBeginner Support
Contact the plugin support.
Administrateur
Amanda
Thanks for a great article!
If I use a child theme, will I still be able to customize it using the Appearance> Theme Options that comes with my theme in the admin panel such as font size, background colors etc. or do I have to go the code route?
If I have activated the Child theme and I use the Appearance tab to update the styling instead of using code, is it essentially still updating the parent theme because the related files are not in the child theme folder?
WPBeginner Support
Yes, your child theme will inherit all these options.
Administrateur
Amanda
Thanks for your reply.
So if I activate the Child Theme and use the settings in the Appearance tab of my admin panel to change the styling (instead of writing css code), my changes won’t be overwritten when I do a theme or Wordpress update on the parent theme?
Would I still need to copy the stylesheet, header, footer files etc. to the child theme folder to make the scenario above work?
Laura
I’ve been following these (and other) steps to create a child theme based on twentytwelve. The issue I’m running into is that wordpress seems to ignore only some of the css I’ve changed from the original theme and it’s driving me nuts. For example, I’ve successfully changed the background colour of the menu, but it simply won’t let me change the text colours of anything. I’ve used your approach of editing it in chrome’s code inspector thing (which worked great, the colour got changed, suggesting my code was correct) and pasting the changed code into the style.css of the child theme, but it doesn’t seem to get picked up at all. I don’t know what to do about this, any insights would be very welcome!
Boyet
Thank you very much for this tutorial. I don’t have problem editing my child theme’s stylesheet, header, and footer files.
My question is, what will I do if I wanted to change something in a file located in my mother theme’s folder like: public_html/wp-content/themes/shopera/woocommerce?
Do I need to create the same path in my child theme?
Thanks in advance…
WPBeginner Support
Yes.
Administrateur
Tony Arnold
Very helpful and largely understood and executed.
I am trying to make my header image full width.My theme doesn’t ‘allow’ this as standard so do i change the file?
Thank you
Sohail Farooq
Love this article I tried and got it worked at once.
Xander
Hi, there!
It seems I have got stuck a little bit. I have already made some changes in the some .php-files (e.g. header.php, footer.php and so on) of my parent theme without having a child theme installed.
Now I want to create a child theme because updates of the parent one have been coming. What should I do with all those already modified files? Should I copy them in the child theme’s directory? What are folder I need to have it it? Should I create the same folders that the parent theme has got for the child theme?
Thank you,
WPBeginner Support
You don’t need all the folders of your parent theme. You just need to recreate the files where you have made changes. We have a tutorial on how update themes without losing changes. It has a section where you can find out which files you have modified in your theme and what changes you have made to them.
Download a fresh copy of your parent theme on your computer. Download the old theme to your computer and then upload the fresh copy. After that create a new child theme. Copy the files where you have made changes from the fresh theme to your child theme. Copy the changes you have made in the old theme files into the files of your new child theme.
It would take some troubleshooting before you get it right. So we strongly recommend you to backup your site first. If possible test your changes on a local WordPress install first.
Administrateur
Xander
Thank you. Could you please give me a link on the tutorial mentioned?
There is another obstacle – I have changed functions.php file, how can I reconcile both of them in the parent and child themes?
Chris
Can I load and install my new child theme on another site? If so how?
Thanks!
WPBeginner Support
Download your child theme to your computer. Create a zip file containing the theme folder. Go to the admin area of another site and then visit Appearance » Themes. Click on the add new theme button and then click on the upload button. Upload the zip file you created earlier. WordPress will extract and install your child theme.
You will also need to install the parent theme as well.
Administrateur
Daniel Garneau
Hello,
I find this tutorial very useful to learn how to create a child theme. But in the process I made the following ajustments. There needs to be two files in the child-theme directory. They have to be named style.css and functions.php.
style.css must contain at least (supposing one is using the TwentyTen theme):
@import url(« ../twentyten/style.css »);
Template: twentyten
When I consulted the turorial on 2015-05-12, the « template: twentyten » line was in the comment block. It must be a command that can be read by WordPress.
Also, there must be a functions.php file, and it has to have minimally the following line of command :
<?php
Your tutorial along with the wp codex, helped me creating my first child theme. Thank you.
Maria
Is it safe to say that the changes I made in the custom css field can be placed into my child’s theme style.css?
WPBeginner Support
Yes.
Administrateur
Louise Mason
I am falling at the first fence – how do i find /wp-content/themes/? Actually where is the WordPress installation folder? In the video i can’t see what you click on or how you open it, the file manager just appears by magic!
WPBeginner Support
You can access File Manager by visiting your web hosting dashboard. Login to your web hosting account and locate File Manager.
Administrateur
Sonam
when I select the file manager of my web hosting account , I get four options :
1)home directory
2)web root
3)public ftp root
4)Document root
which one should I select to work on.
Kylee
Hi – I go with Home Directory. That takes me to all the files. I click on Public HTML on the left to access my various sites. You probably figured it out at some stage but just in case you didn’t…
Viju
Hi,
I’m using a child theme for my website. What I’m struggling is to give a version to my style.css of the child theme. Wordpress seems to append default wordpress version at the end of the file like /style.css?ver=4.1.1
I’m incrementing the value of ‘version’ in my child’s style.css , but wordpress is not picking it.
Because of this my changes to the child theme are not getting reflected to users who has the cached version of the css.
can you advise how to handle this ?
Stephen James
At the very start I am lost. Where did you get the style css code at the start???? You only tell us to past it in but not where it came from. Surely if I am using a different theme it will be a different code.
Vatsal Savani
Hey Stephen,
The code at the start is like general info for the theme, it is nearly the same for every theme, you just have to change the content after the colon, i.e. If your theme name was stephenstheme, you may have the code at the start be like:
Theme Name: stephenstheme
Theme URI: http://www.yourwebsite.com
Description: A Twenty Thirteen child theme made by stephen
Author: Stephen James
Author URI: http://www.yourwebsite.com
Template: twentythirteen
Version: x.x.x
Hope you get what I mean, good luck!
Ariz Khan
Hi WPB, I solved it, reference to my previous mail. Guess what – it was syntax error on my part – I uploaded Style.css, which I renamed to style.css as required and voila it worked. Thanks.
WPBeginner Staff
Did you save the template file as style.css
ada
I also had the same problem. I deleted the numbers on notepad and could see the template.
Kim
I’m trying to create a child theme for twentythirteen following your instructions above. I created the folder and copied the code you have listed above into a text file. I saved the code to the new folder. I am unable to activate the child theme because the « template is missing ». Help!?
canciller
Using @import for the « style.css » on a child theme is not reccommended by wordpress codex
http://codex.wordpress.org/Child_Themes
is it safe to use it ? what are the downsides of using @import ?
Pat
The downside of using @import instead of wp_enqueue_script(), as recommended in the codex, is slower page loading. An employee at Automattic gives an explanation at this link https://kovshenin.com/2014/child-themes-import/
Vatsal Savani
In short, it will decrease the performance of your site and also make it slower.
Praveen Kumar
What about building child themes on Genesis Framework?