# body_class et post_class ajoutent vos classes sans casser celles du cœur

> Cibler un contexte précis en CSS sans réécrire le balisage : deux filtres du cœur permettent d'ajouter des classes personnalisées sur et sur chaque article.

- Auteur : WordPress Développement
- Publié le : 2023-01-05
- Mis à jour le : 2023-01-05
- Catégorie : Thèmes
- URL : https://www.wpmoderne.fr/themes/body-class-post-class-cibler-contexte-css/

## L’essentiel

- body_class() et post_class() acceptent un tableau de classes additionnelles
- Le filtre body_class permet d'ajouter une classe conditionnelle
- Aucune classe du cœur n'est jamais supprimée par ces filtres

`<body <?php body_class(); ?>>` : cette ligne, présente dans presque tous les gabarits d'en-tête depuis des années, génère déjà bien plus qu'une seule classe CSS. Type de page, identifiant de l'article, statut de connexion, format du contenu : la liste est longue, et pourtant beaucoup de développeurs de thème l'ignorent et rajoutent une classe générique en dur dans le fichier de gabarit, ce qui oblige à dupliquer une condition PHP à chaque endroit où elle est nécessaire.

Les deux fonctions acceptent pourtant un paramètre pour ajouter des classes supplémentaires, et le cœur expose des filtres pour les enrichir dynamiquement depuis `functions.php`, sans toucher au gabarit lui-même. Cette distinction change la façon de structurer le CSS d'un thème : au lieu de multiplier les sélecteurs par ID, on cible un contexte précis grâce à une classe déjà présente ou ajoutée proprement.

## Ce que body_class() ajoute déjà, sans rien configurer

Sur une page d'article, `body_class()` ajoute automatiquement des classes comme `single`, `single-post`, `postid-42`, `logged-in` si l'utilisateur est connecté, ou encore `page-template-default` sur une page qui n'utilise pas de modèle particulier. Sur l'accueil, on retrouve `home` et `blog`. Sur une archive de taxonomie, la classe reprend le nom de la taxonomie et du terme, par exemple `category-actualites`. Toute cette information est disponible sans écrire une seule ligne de condition dans le gabarit.

## Ajouter une classe additionnelle sans filtre, en argument direct

La méthode la plus simple pour ajouter une classe ponctuelle consiste à passer un tableau en argument de la fonction, directement dans le fichier de gabarit :

```
<body <?php body_class( 'theme-vitrine-artisan' ); ?>>
```

> L'essentiel à retenir : body_class() et post_class() acceptent un tableau de classes additionnelles ; Le filtre body_class permet d'ajouter une classe conditionnelle ; Aucune classe du cœur n'est jamais supprimée par ces filtres

Le tableau de classes du cœur n'est jamais remplacé : la classe personnalisée s'ajoute à la suite, sans rien retirer de ce que WordPress génère déjà. La même logique s'applique à `post_class()`, utilisée dans la boucle :

```
<article <?php post_class( 'carte-article' ); ?>>
    <?php the_title( '<h2>', '</h2>' ); ?>
</article>
```

## Ajouter une classe conditionnelle via le filtre body_class

Quand la classe doit dépendre d'une condition (un champ personnalisé, une page précise, un rôle utilisateur), il est préférable de passer par le filtre `body_class` plutôt que de multiplier les conditions dans le gabarit :

```
add_filter( 'body_class', function ( array $classes ): array {
    if ( is_page( 'tarifs' ) ) {
        $classes[] = 'page-tarifs-sombre';
    }
    return $classes;
} );
```

Le même mécanisme existe pour `post_class`, avec un second paramètre qui reçoit l'ID de l'article :

```
add_filter( 'post_class', function ( array $classes, array $extra, int $post_id ): array {
    if ( get_post_meta( $post_id, 'article_a_la_une', true ) ) {
        $classes[] = 'article-a-la-une';
    }
    return $classes;
}, 10, 3 );
```

## Cibler un contexte en CSS sans réécrire le balisage HTML

Une fois ces classes disponibles, le CSS peut cibler un contexte précis sans jamais modifier la structure des templates. Une carte d'article standard et une carte mise en avant partagent le même balisage `<article>`, seule la classe change :

```
.carte-article { padding: 1.5rem; border-radius: 6px; }
.article-a-la-une { border: 2px solid var(--couleur-accent); }
```

Ce découplage évite d'avoir à créer un gabarit dédié dans `page-tarifs-sombre.php` uniquement pour changer une couleur de fond : une règle CSS ciblée suffit.

## Les pièges à éviter avec ces deux fonctions

- Ne jamais utiliser `echo` devant `body_class()` ou `post_class()` : les deux fonctions affichent déjà leur résultat directement.
- Le tableau de classes accepté en argument peut être une chaîne unique ou un tableau de plusieurs chaînes, mais jamais une classe contenant des espaces : chaque espace crée une classe CSS distincte.
- Un filtre `body_class` mal protégé peut ajouter la même classe plusieurs fois si la condition est vérifiée à plusieurs endroits ; un `array_unique()` avant le retour évite les doublons dans le HTML final.

## En résumé

Avant d'écrire une nouvelle condition PHP dans un gabarit pour distinguer un contexte d'un autre, il vaut la peine de vérifier si `body_class()` ou `post_class()` ne fournissent pas déjà l'information, ou si un filtre ne permet pas de l'ajouter proprement depuis `functions.php`. Le gain n'est pas seulement stylistique : un thème qui s'appuie sur ces classes reste lisible pour n'importe quel développeur qui reprend le projet, sans devoir remonter la logique de chaque gabarit un par un.