Comment ajouter une classe body personnalisée sur des pages spécifiques avec Astra Pro

Vous souhaitez appliquer des styles CSS uniques à certaines pages de votre site WordPress ?
La méthode la plus propre consiste à ajouter une classe personnalisée à la balise <body> — pour cibler ces pages précisément avec du CSS.
En suivant les étapes ci-dessous, vous pourrez ajouter une classe body personnalisée à n’importe quelle page (ou groupe de pages) grâce à la fonctionnalité Custom Layouts d’Astra Pro — sans aucune compétence en programmation.

Vue d’ensemble

WordPress ajoute déjà automatiquement certaines classes au body (comme page-id-42), mais vous avez parfois besoin d’une
classe claire et significative comme special-page que vous contrôlez vous-même.
La fonctionnalité Custom Layouts d’Astra Pro vous permet d’injecter un petit extrait JavaScript dans des pages spécifiques,
qui ajoute votre classe personnalisée au body au chargement de la page.

Flux de travail :

[Astra Pro → Custom Layouts] → [Extrait JavaScript] → [Injecté via le hook wp_head] → [Classe body ajoutée au DOMContentLoaded]

Étape 1. Ouvrir Custom Layouts dans Astra Pro

1. Connectez-vous au tableau de bord d’administration WordPress.
2. Allez dans Apparence → Astra Options.
3. Trouvez le module Custom Layouts et cliquez sur Settings.
4. Cliquez sur Add New.

Si vous ne voyez pas Custom Layouts, il faudra peut-être l’activer d’abord.
Allez dans Apparence → Astra Options → Astra Addons et activez le bouton Custom Layouts.

Étape 2. Configurer le Custom Layout

Vous verrez un nouvel écran d’éditeur. Remplissez les champs suivants :

1. Ajoutez un Titre pour votre référence personnelle (ex. Body Class - Pages Spéciales).
2. Dans l’éditeur, cliquez sur l’onglet Code et collez l’extrait suivant :

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Remplacez special-page par le nom de classe que vous souhaitez utiliser.

Étape 3. Configurer le Hook

Faites défiler vers le bas pour trouver le panneau Layout Settings et configurez :

Layout → Hook
Action → wp_head
Priority → 10

Important : Même si le script est injecté dans le <head>,
il ne s’exécutera pas avant que le DOM soit entièrement analysé — car nous l’avons enveloppé dans
document.addEventListener('DOMContentLoaded', ...).
Cela garantit que document.body existe bien au moment où la classe est ajoutée,
et s’exécute avant wp_footer, évitant tout flash de contenu non stylisé.

Étape 4. Configurer les conditions d’affichage

Toujours dans le panneau Layout Settings, trouvez Display On et sélectionnez les pages
sur lesquelles vous souhaitez que la classe body apparaisse.

Vous pouvez choisir parmi les conditions suivantes :

Specific Page — cible une ou plusieurs pages individuelles par leur nom
All Pages — s’applique à toutes les pages du site
Front Page — uniquement la page d’accueil
Page Template — toutes les pages utilisant un modèle spécifique

Vous pouvez ajouter plusieurs pages à la fois dans un seul Custom Layout,
ce qui est bien plus efficace que de créer un layout par page.

Étape 5. Publier

Une fois le hook et les conditions d’affichage configurés, cliquez sur Publish dans le coin supérieur droit.

Étape 6. Vérifier le bon fonctionnement

Visitez l’une des pages que vous avez sélectionnées dans Display On.
Faites un clic droit n’importe où sur la page et sélectionnez Inspecter (ou appuyez sur F12).
Dans l’onglet Elements, trouvez la balise <body>.
Confirmez que votre classe personnalisée apparaît dans la liste des classes :

<body class="home page-template-default ... special-page">

Remarque : N’utilisez pas Afficher le code source pour vérifier —
cela affiche le HTML brut avant l’exécution de JavaScript, donc la classe n’y apparaîtra pas.
Utilisez toujours Inspecter l’élément pour voir le DOM en direct après l’exécution de JavaScript.

Utilisez-le dans votre CSS

Vous pouvez maintenant cibler ces pages spécifiquement dans votre CSS :

/* S'applique uniquement aux pages avec la classe body special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Ajoutez ceci dans Apparence → Personnaliser → CSS additionnel ou dans la feuille de style de votre thème enfant.

Résolution des problèmes

La classe n’apparaît pas ? Assurez-vous de vérifier avec Inspecter l’élément, pas avec Afficher le code source.
Toujours pas de résultat ? Videz le cache du navigateur et des plugins de cache du site, puis rechargez.
Vous utilisez Cloudflare ? Purgez également le cache Cloudflare pour cette page.
La classe apparaît sur les mauvaises pages ? Vérifiez à nouveau les conditions Display On dans le Custom Layout.

Conclusion

Vous disposez maintenant d’une méthode simple et fiable pour ajouter une classe body personnalisée à des pages spécifiques de WordPress
avec Astra Pro — sans toucher au functions.php ni créer de modèles de page personnalisés.

Résumé du processus :
Custom Layouts → Extrait JavaScript → Hook wp_head → Conditions d’affichage → Classe body personnalisée ✅

Cette approche est particulièrement utile lorsque vous devez appliquer des styles uniques à un groupe de pages
sans affecter le reste de votre site. Propre, ciblé et facile à gérer.