Comment créer un thème enfant WordPress (Guide pour débutants)

Les thèmes enfants font partie de ces termes WordPress qui sont souvent utilisés et qui laissent les débutants perplexes. Vous en avez peut-être même entendu parler et décidé de ne pas en créer un, tant cela semble compliqué.

Nous comprenons. Mais selon notre expérience, les thèmes enfants peuvent vous éviter bien des maux de tête par la suite. Ils protègent vos précieuses personnalisations, vous permettent d'expérimenter sans casser votre site, et rendent la mise à jour de votre thème un jeu d'enfant.

Si cela vous intéresse, nous avons détaillé dans ce guide pour débutants comment fonctionne un thème enfant, comment le personnaliser et comment y apporter des modifications.

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 inclut le fichier style.css du thème parent, qui définit le style principal du thème. Le thème enfant peut outrepasser ou étendre ses propriétés héritées en ajoutant ses propres fichiers ou en modifiant ceux 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 pourriez en avoir besoin quand même :

• Les thèmes enfants protègent vos personnalisations lors des mises à jour de thème, les empêchant d'être écrasées. Si vous modifiez directement le thème parent, ces modifications pourraient disparaître lors de la mise à jour.
• Les thèmes enfants vous permettent d'essayer en toute sécurité de nouveaux designs ou fonctionnalités sans perturber le thème original du site, un peu comme un environnement de staging.
• Si vous savez comment 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 changer ou développer.

Que faire avant de créer un thème enfant WordPress

Nous avons vu de nombreux utilisateurs WordPress enthousiastes à l'idée de se lancer dans des aspects techniques, pour ensuite se décourager lorsque des erreurs apparaissent. Nous comprenons. C'est pourquoi il est important de savoir dans quoi vous vous engagez avant de créer un thème enfant.

Voici quelques éléments que nous vous recommandons de faire avant de poursuivre ce guide étape par étape :

1. Sachez que vous travaillerez avec du code. Au minimum, vous aurez besoin d'une compréhension de base de HTML, CSS, PHP et, éventuellement, JavaScript pour comprendre les modifications à apporter. Vous pouvez en savoir plus à ce sujet dans le manuel des thèmes WordPress.
2. Choisissez un thème parent qui possède le design et les fonctionnalités souhaités pour votre site web. Si possible, trouvez-en un pour lequel vous n'avez besoin de faire que quelques modifications. Vous pouvez suivre notre liste de contrôle des choses à faire avant de changer de thème WordPress si nécessaire.
3. Utilisez un site local ou un site de staging pour le développement de thèmes. Vous ne voulez pas créer d'erreurs involontaires sur votre site en direct.
4. Sauvegardez votre site web d'abord. Nous recommandons d'utiliser un plugin de sauvegarde comme Duplicator si c'est votre première fois.

Il existe plusieurs façons de créer un thème enfant à partir de votre thème existant. L'une d'elles utilise du code manuel, tandis que d'autres nécessitent un plugin, ce qui est beaucoup plus convivial pour les 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 par plugin, nous vous recommandons tout de même de lire la méthode manuelle pour vous familiariser avec le processus et les fichiers concernés.

Gardant tout cela à l'esprit, passons à la création d'un thème enfant dans WordPress. Vous pouvez accéder à la méthode de votre choix en utilisant les liens ci-dessous :

• Méthode 1 : Créer manuellement un thème enfant WordPress
• Méthode 2 : Créer un thème classique enfant avec un plugin
• Méthode 3 : Créer un thème bloc enfant avec un plugin
• Astuce bonus : Découvrez si votre thème dispose d'un générateur de thème enfant
• Comment personnaliser votre thème enfant classique
• Comment personnaliser votre thème enfant bloc
• Comment modifier les fichiers de modèle d'un thème enfant
• Comment ajouter de nouvelles fonctionnalités à votre thème enfant
• Comment dépanner votre thème enfant WordPress

Méthode 1 : Créer manuellement un thème enfant WordPress

Tout d'abord, vous devez ouvrir /wp-content/themes/ dans le dossier de votre installation WordPress.

Vous pouvez le faire en utilisant le gestionnaire de fichiers de votre hébergement WordPress ou un client FTP. Nous trouvons la première option beaucoup plus facile, nous allons donc l'utiliser.

Si vous êtes un client Bluehost, vous pouvez vous connecter à votre tableau de bord d'hébergement et naviguer vers l'onglet « Sites Web ». Ensuite, cliquez sur « Paramètres ».

Dans l'onglet Aperçu, faites défiler jusqu'à la section « Liens rapides ».

Sélectionnez ensuite « Gestionnaire de fichiers ».

À ce stade, vous devez accéder au dossier public_html de votre site Web et ouvrir le chemin /wp-content/themes/.

Ici, cliquez simplement sur le bouton « + Dossier » dans le coin supérieur gauche pour créer un nouveau dossier pour votre thème enfant.

Vous pouvez nommer le dossier comme vous le souhaitez.

Pour ce tutoriel, nous utiliserons simplement le nom de dossier twentytwentyone-child car nous utiliserons Twenty Twenty-One comme thème parent. Une fois terminé, cliquez simplement sur « Créer un nouveau dossier ».

Ensuite, vous devez ouvrir le dossier que vous venez de créer 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écharger le fichier plus tard.

Nommez ce fichier « style.css », car c'est la feuille de style principale de votre enfant et elle contiendra des informations sur le thème enfant.

Cliquez ensuite sur « Créer un nouveau fichier ».

Maintenant, faites simplement un clic droit sur le fichier style.css.

Ensuite, cliquez 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'ajuster selon 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 terminé, cliquez simplement 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 des fichiers du thème parent.

Une fois que vous avez créé le document, 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 terminé, enregistrez simplement le fichier comme à l'étape précédente.

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éer un thème classique enfant avec un plugin

La méthode suivante utilise le plugin Child Theme Configurator. Ce plugin WordPress facile à utiliser vous permet de créer et de personnaliser rapidement des thèmes enfants WordPress sans utiliser de code, mais il ne fonctionne bien qu'avec un thème classique (non basé sur des blocs).

La première chose à faire est d'installer et activer le plugin WordPress. Lors de l'activation, 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. Sélectionnez simplement « CRÉER un nouveau thème enfant » pour commencer.

Ensuite, sélectionnez un thème parent dans un menu déroulant. Nous sélectionnerons le thème Hestia.

Après cela, cliquez simplement sur le bouton « Analyser » pour vous assurer que le thème est adapté à une utilisation 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 que vous souhaitez.

Ci-dessous, vous devez sélectionner où enregistrer les nouveaux styles : dans la feuille de style principale ou dans une feuille de style séparée.

La feuille de style principale est la feuille de style par défaut qui accompagne 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ée vous permet d'enregistrer un nouveau style personnalisé dans un fichier de feuille de style séparé. Ceci 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 deviendrez plus créatif avec les personnalisations de votre thème enfant, vous pourrez toujours répéter ce processus et sélectionner la deuxième option.

En descendant, vous devez choisir comment la feuille de style du thème parent sera accessible.

Nous allons simplement opter pour l'option par défaut « Utiliser la file d'attente de styles WordPress », car cela permettra au plugin de déterminer automatiquement les actions appropriées.

Lorsque vous arrivez à l'étape 7, vous devrez cliquer sur le bouton intitulé « Cliquez pour modifier les attributs du thème enfant ».

Vous pourrez ensuite renseigner les détails de votre thème enfant.

Lorsque vous créez un thème enfant manuellement, vous perdrez 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 8 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.

Le plugin 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 plus tard.

Avant d'activer le thème, vous devez cliquer sur le lien en haut de l'écran pour le prévisualiser et vous assurer qu'il est esthétique et qu'il ne casse pas votre site.

Si tout semble fonctionner, cliquez sur le bouton « Activer et publier ».

Désormais, votre thème enfant sera en ligne.

À ce stade, le thème enfant aura le même aspect et le même comportement que le thème parent.

Méthode 3 : Créer un thème bloc enfant avec un plugin

Si vous utilisez un thème de blocs, WordPress offre un moyen simple de créer un thème enfant avec le plugin Create Block Theme.

Tout d'abord, vous devrez installer et activer le plugin WordPress. Ensuite, allez dans Apparence » Créer un thème bloc.

Ici, sélectionnez simplement « Créer un enfant de [nom du thème actuel]. »

Ensuite, remplissez les informations de votre thème enfant. Nous utilisons Twenty Twenty-Four dans cet exemple, nous allons donc le nommer Twenty Twenty-Four Child.

Nous avons également donné une description et un auteur pour le thème enfant. Une fois terminé, cliquez sur le bouton « Créer un thème enfant ».

Le plugin va maintenant créer et installer le fichier zip du thème WordPress dans votre zone d'administration.

Une fois terminé, votre site web activera automatiquement ce thème enfant nouvellement créé. Vous pouvez le confirmer en allant dans Apparence » Thèmes.

Astuce bonus : Découvrez si votre thème dispose d'un générateur de thème enfant

Si vous avez de la chance, votre thème WordPress peut déjà avoir une fonctionnalité existante pour créer un thème enfant.

Par exemple, si vous utilisez Astra, vous pouvez aller sur le site web Générateur de thème enfant Astra. Ensuite, remplissez simplement le nom de votre thème enfant et cliquez sur le bouton « Générer ».

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 :

• OceanWP
• Ultra
• Nozama
• Eclipse

Comment personnaliser votre thème enfant classique

Techniquement, vous pouvez personnaliser votre thème enfant sans code en utilisant le personnaliseur de 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 personnaliseur.

Cela dit, nous vous recommandons également de personnaliser le thème enfant avec du code.

En plus d'en apprendre davantage sur le développement de thèmes WordPress, la personnalisation par code permet de documenter les modifications dans les fichiers du thème enfant, ce qui facilite leur suivi.

Maintenant, la manière la plus basique de personnaliser un thème enfant est d'ajouter du CSS personnalisé 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 d'inspection de Chrome ou de Firefox, ou en le copiant directement à partir du fichier CSS du thème parent.

Méthode 1 : Copier le code de l'inspecteur 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 derrière n'importe quel élément d'une page Web.

Vous pouvez en savoir plus sur l'outil d'inspection dans notre guide sur les bases de l'inspection d'éléments : personnalisation de WordPress pour les utilisateurs autonomes.

Lorsque vous faites un clic droit sur votre page web et utilisez l'inspection d'éléments, vous verrez le HTML et le CSS de la page.

Lorsque vous déplacez votre souris sur différentes lignes HTML, l'inspecteur les mettra en surbrillance dans la fenêtre supérieure. Il vous montrera également les règles CSS relatives à l'élément mis en surbrillance, comme ceci :

Vous pouvez essayer de modifier le CSS directement pour voir à quoi cela ressemblerait. Par exemple, essayons de changer la couleur de fond du corps du thème en #fdf8ef. Trouvez la ligne de code qui dit body { et à l'intérieur, le code qui dit color: .

Cliquez simplement sur l'icône du sélecteur de couleur à côté de color: et collez le code HEX dans le champ approprié, comme ceci :

Maintenant, vous savez comment changer la couleur d'arrière-plan en utilisant CSS. Pour que les modifications soient permanentes, vous pouvez ouvrir votre fichier style.css dans le répertoire du thème enfant (en utilisant le gestionnaire de fichiers ou 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 WordPress et ouvrez Apparence » Éditeur de fichiers de thème :

Si vous êtes débutant et que vous souhaitez apporter d'autres modifications, nous vous recommandons de vous familiariser avec HTML et CSS afin de savoir exactement à quel élément chaque code fait référence. Il existe de nombreuses fiches récapitulatives HTML et CSS en ligne auxquelles vous pouvez vous référer.

Voici la feuille de style complète 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 du code du fichier style.css du thème parent

Il y a peut-être beaucoup de choses dans votre thème enfant que vous souhaitez personnaliser. Dans ce cas, il peut être plus rapide de copier du code directement du fichier style.css du thème parent, de le coller dans le fichier CSS de votre thème enfant, puis de le modifier.

La partie délicate est qu'un fichier de feuille de style de thème peut sembler très long et décourageant pour les débutants. Cependant, une fois que vous comprenez les bases, ce n'est pas si difficile.

Utilisons un exemple concret de la feuille de style du thème parent Twenty Twenty-One. Vous devez naviguer vers /wp-content/themes/twentytwentyone dans le dossier de votre installation WordPress, puis ouvrir le fichier style.css dans votre gestionnaire de fichiers, FTP ou Éditeur de fichiers de 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 jaune, vert, violet) que le thème entier utilisera dans leurs codes HEX spécifiques. Et ensuite, pour des lignes comme « global-color-primary » ou « global-color-secondary », cela signifie que ce sont les couleurs primaires et secondaires de ce thème.

Vous pouvez copier ces lignes de code dans la feuille de style de votre thème enfant, puis modifier les codes HEX pour créer votre schéma de couleurs parfait.

En faisant défiler la feuille de style du thème parent, vous remarquerez que d'autres variables peuvent également avoir 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 le HEX dans --global--color-green:, le texte du bouton aura également un aspect différent.

Vous pouvez également suivre ces tutoriels pour expérimenter les personnalisations de votre thème enfant :

• Comment changer la couleur du texte dans WordPress
• Comment changer la taille de votre logo WordPress (fonctionne avec n'importe quel thème)
• Comment personnaliser le style des blockquotes dans les thèmes WordPress
• WordPress Body Class 101 : Astuces et conseils pour les concepteurs de thèmes
• Comment ajouter un effet parallax à n'importe quel thème WordPress

Comment personnaliser votre thème enfant bloc

Si vous utilisez un thème enfant basé sur des blocs, la plupart de vos personnalisations seront effectuées dans votre fichier theme.json, et non dans style.css.

Cependant, lors de nos tests, nous avons trouvé le processus compliqué. Contrairement aux thèmes enfants classiques, il y a un plus grand fossé de connaissances à combler (surtout concernant le JSON et la gestion du CSS) si vous débutez dans le développement de thèmes WordPress.

Cela dit, nous avons trouvé une alternative beaucoup plus simple en utilisant le plugin Create Block Theme. Cet outil peut enregistrer toutes les modifications apportées dans l'éditeur complet du site WordPress dans le fichier child theme.json de votre thème enfant. Ainsi, vous n'aurez pas à toucher au code, car le plugin s'en chargera pour vous.

Montrons-vous un exemple. Tout d'abord, ouvrez l'éditeur complet du site WordPress en allant dans Apparence » Éditeur.

Vous verrez plusieurs menus au choix.

Ici, sélectionnez simplement « Styles ».

Sur la page suivante, vous verrez plusieurs combinaisons de styles intégrées parmi lesquelles choisir.

Pour notre exemple, vous pouvez simplement ignorer tout cela 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 barre latérale droite.

Ensuite, vous verrez des options pour modifier les polices globales du thème pour le texte, les liens, les titres, les légendes et les boutons.

Cliquons sur « Titres » pour la démonstration.

Dans le menu déroulant Police, changez la sélection d'origine pour n'importe quelle police disponible.

N'hésitez pas à modifier l'apparence, la hauteur de ligne, l'espacement des lettres et la casse des lettres si nécessaire.

Une fois que vous avez terminé, cliquez simplement sur « Enregistrer ». Après cela, vous pouvez cliquer sur le bouton Créer un thème de bloc (l'icône de clé à molette) à côté de « Enregistrer ».

Ensuite, cliquez sur « Enregistrer les modifications du thème ».

Ensuite, sélectionnez les modifications à enregistrer dans le thème enfant.

Les exemples incluent les polices, les styles personnalisés, les modifications de modèles, et plus encore.

Une fois terminé, faites défiler toute la barre latérale.

Ensuite, cliquez sur « Enregistrer les modifications ».

Maintenant, visualisons votre fichier theme.json afin 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 de bloc et sélectionnez « Afficher theme.json ».

Après avoir cliqué dessus, vous verrez que le fichier inclut de nouvelles additions de code.

Dans notre cas, le fichier inclut du code qui indique que les balises de titre utiliseront la police Inter avec une apparence semi-grasse, 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 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 disposition différente. Par exemple, le thème Twenty Twenty-One a un en-tête, une boucle de contenu, une zone de widgets de pied 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. Après cela, vous devriez ouvrir le fichier et apporter les modifications souhaitées.

Par exemple, si vous utilisez Bluehost et que votre thème parent est Twenty Twenty-One, vous pouvez aller dans /wp-content/themes/twentytwentyone dans votre gestionnaire de fichiers. Ensuite, faites un clic droit sur un fichier modèle comme footer.php et sélectionnez « Copier ».

Après cela, entrez le chemin du 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 du fichier.

Pour modifier le fichier footer.php, faites simplement un clic droit dessus et sélectionnez « Modifier ».

À titre d'exemple, nous allons supprimer le lien « Fièrement propulsé par WordPress » de la zone du pied de page et y ajouter un avis de droit d'auteur.

Pour ce faire, vous devez supprimer tout ce qui se trouve entre les balises <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 -->

Ensuite, vous devez coller le code que vous trouverez sous ces balises 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 :

Allez-y et enregistrez le fichier pour officialiser les modifications.

Après cela, visitez votre site web pour voir la nouvelle notice 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 les fonctionnalités par défaut d'un site WordPress. Il agit comme un plugin pour votre site WordPress qui est automatiquement activé avec votre thème actuel.

Vous trouverez de nombreux tutoriels WordPress qui vous demandent de copier-coller des extraits de code dans functions.php. Mais si vous ajoutez vos modifications au thème parent, 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 lors de l'ajout d'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 recommandons d'utiliser le plugin WPCode afin de ne pas modifier directement le fichier functions.php, ce qui réduit le risque d'erreurs.

Vous pouvez lire notre guide sur comment ajouter des extraits de code personnalisés pour plus d'informations.

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 que vous avez enregistré le fichier, vous pouvez visiter la page Apparence » Widgets de votre tableau de bord WordPress.

Ici, vous verrez votre nouvelle zone de widget personnalisée à laquelle vous pouvez ajouter des widgets.

Il existe de nombreuses 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 functions.php de WordPress et ces 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, il y a de fortes chances que vous fassiez des erreurs, et c'est normal. C'est pourquoi nous vous recommandons d'utiliser un plugin de sauvegarde, de créer un site local ou un environnement de staging, et de utiliser du 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 rencontrerez probablement sont les 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 comment trouver et corriger l'erreur de syntaxe dans WordPress.

De plus, vous pouvez toujours recommencer si quelque chose tourne très mal. Par exemple, si vous avez accidentellement supprimé quelque chose dont votre thème parent avait besoin, 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 voudrez peut-être aussi consulter notre guide ultime sur comment tester votre thème WordPress par rapport aux dernières normes et notre article comparatif sur les thèmes WordPress gratuits vs premium.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.