Pourquoi le style CSS de mon thème enfant ne marche pas ?

Votre thème enfant marche mal… il appelle bien les pages, mais pas le CSS et c’est la rage qui monte.

1. Le thème enfant est-il bien activé ?

C’est un peu comme l’assistance au téléphone qui vous fait débrancher et rebrancher votre livebox.

2. Avez-vous fait vous-même votre thème enfant ?

C’est très bien de faire soi-même son thème enfant, c’est comme cela que l’on apprend. Mais il arrive que des fois les tutos que l’on rencontre ne fonctionnent qu’à moitié.

Est-ce que votre functions.php ressemble à ça ?

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

Pas mal de tuto imagine que vous allez faire votre CSS depuis le BackOffice… et oublie la 2ᵉ ligne de cette fonction.

Coté style.css

• Ne jamais mettre d’espace avant les « : »
• Le nom du dossier « thème parent » doit impérativement être écrit comme dans le FTP, il faut respecter la casse

/*
Theme Name: Theme enfant
Description: mon theme enfant trop bien 
Template: leNomDuDossierDuthemeParent    // il est tres important de coller la ponctuation "2 points" a Template 
Version: 0.1.0
*/

Voilà si cela ne fonctionne toujours pas, alors cherchez ailleurs…

Voilà ce que chatGPT nous dit

Pour créer un thème enfant avec des feuilles de style qui fonctionnent, vous pouvez suivre ces étapes :

1. Créez un nouveau répertoire dans le répertoire des thèmes de WordPress (généralement wp-content/themes/) et nommez-le de manière à identifier clairement votre thème enfant (par exemple, « mon-theme-enfant »).
2. Dans le répertoire de votre thème enfant, créez un fichier nommé « style.css » et ouvrez-le dans un éditeur de texte.
3. Ajoutez les informations de métadonnées requises en haut du fichier « style.css », telles que le nom du thème, l’auteur, la description, etc. Ces informations seront utilisées par WordPress pour identifier et afficher votre thème enfant dans l’administration du site.
4. Ajoutez une règle « @import » pour importer les feuilles de style du thème parent, en utilisant le nom du thème parent comme nom de fichier (par exemple, « @import url(‘../mon-theme-parent/style.css’); »). Cela permettra à votre thème enfant d’hériter des styles du thème parent.
5. Ajoutez vos propres règles CSS au fichier « style.css » pour personnaliser l’apparence de votre site web. Ces règles s’appliqueront uniquement au thème enfant, et ne modifieront pas les styles du thème parent.
6. Enregistrez et fermez le fichier « style.css ».
7. Connectez-vous à l’administration de WordPress et accédez à l’écran des thèmes (généralement dans l’onglet « Apparence » du menu latéral). Votre thème enfant devrait être affiché dans la liste des thèmes disponibles.
8. Sélectionnez votre thème enfant dans la liste des thèmes et cliquez sur « Activer » pour l’utiliser sur votre site web.
9. Vérifiez que les styles de votre thème enfant s’appliquent correctement en accédant à votre site web et en vérifiant l’apparence de votre site. Si vous rencontrez des problèmes, vérifiez que vous avez correctement importé les styles du thème parent et que vos règles CSS sont écrites correctement.

Note : ces étapes sont générales et peuvent varier en fonction de la configuration de votre site web et de la version de WordPress que vous utilisez. Pour plus d’informations sur la création de thèmes enfants, consultez la documentation officielle de WordPress