Ajouter une classe Body personnalisée WordPress [avec exemples]

WordPress : ajouter une classe au Body

Dans de nombreux cas, les classes générées automatiquement ne sont pas suffisantes et il peut être nécessaire d'ajouter des classes personnalisées.

Pour ajouter des classes personnalisées, nous utiliserons le filtre WordPress :

body_class

Ci-dessous, nous vous présenterons des extraits de code pour les exemples les plus demandés.

Mais d'abord, une petite introduction pour expliquer aux débutants ce que sont les classes Body.

Les classes Body personnalisées WordPress sont quelque chose que tout développeur WordPress devra gérer, tôt ou tard.

Utiliser un plugin pour cela serait excessif, car dans la plupart des cas, quelques lignes de code suffisent.

Alors, comment ajouter des classes Body personnalisées WordPress ?

WordPress dispose à la fois d'un fonction body_class et un filtre body_class (hook).

La fonction body_class est utilisée dans les thèmes pour ajouter les classes autogénérées par WordPress à la balise body de votre site web.

Voici comment elle est ajoutée au fichier header.php de votre thème :

<body <?php body_class($class); ?>>

Selon la page visitée, WordPress génèrera des classes spécifiques.

1) Pour l'article « Hello World » par défaut, les classes body sont :

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) Les classes body de l'exemple de page sont :

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) Les classes body des pages d'archives de catégories sont :

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) Les classes body de la page d'archive d'auteur sont :

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) La classe body de la page d'accueil (en supposant que vous en ayez une)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

Les 5 exemples fournis ci-dessus sont communs à la plupart des thèmes par défaut lorsque l'utilisateur administrateur est connecté.

Lorsqu'il est déconnecté, les classes seront légèrement différentes.

Les classes en HTML sont utilisées pour styliser une page web via CSS.

En copiant les extraits de code suivants dans votre fichier functions.php, de nouvelles classes body personnalisées apparaîtront dans le balisage de votre site web.

Nous allons utiliser le filtre body_class.

Ajouter une classe body personnalisée dans WordPress

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

Cela ajoutera la nouvelle classe : « my-class » à la balise body de toutes les pages de votre site web.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

Que faire si j'ai besoin d'ajouter plus d'une classe ?

Ajouter 2 classes personnalisées ou plus au body WordPress

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

Voici le résultat :

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

Et si je souhaite ajouter une classe au body uniquement sur une page précise où je veux appliquer un style personnalisé via CSS ?

Ajouter une classe personnalisée au body WordPress sur une page spécifique

Cela peut se faire de plusieurs façons :

1) Ajouter une classe personnalisée au body en utilisant l'ID de la page

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

Voici le résultat sur la page avec l'id 2 ; toutes les autres pages n'auront pas la classe personnalisée.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Ajouter une classe personnalisée au body en utilisant le slug de la page

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

Cela ajoutera la classe personnalisée « my-class » sur la page avec le slug contact-form, tandis que toutes les autres pages n'auront pas la classe personnalisée.

3) Ajouter une classe personnalisée au body en utilisant le titre de la page

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

Cela ajoutera la classe personnalisée « my-class » sur la page avec le titre Contact Form, tandis que toutes les autres pages n'auront pas la classe personnalisée.

4) Ajouter une classe personnalisée au body en utilisant le modèle de page

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

Cela ajoutera la classe personnalisée « my-class » sur la page utilisant le modèle my-custom-page-template. Toutes les autres pages n'auront pas la classe personnalisée.

Nous pouvons également ajouter la classe personnalisée à une page de catégorie ou d'étiquette, via l'ID ou le slug de catégorie/étiquette.

Ajouter une classe personnalisée au body WordPress sur une archive de catégorie ou d'étiquette

1) Catégories

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Étiquettes

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

Cela n'ajoutera la classe personnalisée au body que sur la page d'archive de la catégorie my-category et de l'étiquette my-tag.

Nous pouvons également ajouter une classe personnalisée au body sur la page individuelle de chaque article appartenant à la catégorie my-category ou portant l'étiquette my-tag.

Nous utiliserons les fonctions in_catgeory et has_tag.

1) Catégories (à la fois l'archive et la page unique)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) Tags (à la fois l'archive et la page unique)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

Ces 2 derniers exemples ajouteront la classe personnalisée à la fois sur la page d'archive et sur la page unique.

Ajouter le nom de la catégorie comme classe body personnalisée WordPress dans chaque article

Si vous souhaitez ajouter le nom convivial de la catégorie comme classe body personnalisée à chaque article, vous aurez besoin du snippet suivant :

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

Par exemple, si vous visitez un article de la catégorie « Voyage », le snippet ci-dessus ajoutera la classe body Travel afin que vous puissiez styliser différemment les articles de chaque catégorie.

Ajouter une classe body personnalisée WordPress lors d'une visite depuis un appareil mobile

Nous pouvons facilement le faire en utilisant la wp_is_mobile fonction.

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

Des classes body personnalisées peuvent également être ajoutées à 1 ou toutes les pages créées par un plugin (selon le plugin).

GeoDirectory

GeoDirectory ajoute ses propres classes body personnalisées. Chaque page GeoDirectory aura par exemple la classe body : geodir-page.

Si l'extension de recherche avancée et/ou celle des types de publication personnalisés sont installées, les classes : geodir_advance_search et geodir_custom_posts seront ajoutées respectivement.

Exemple d'une page d'accueil GD :

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

Dans les pages de listings (type de publication personnalisé ou archive de catégorie), vous trouverez une classe différente pour chaque type de publication personnalisé.

Par exemple dans Places, il y aura post-type-archive-gd_place.

Dans la page de détails de l'annonce, vous trouverez également une classe différente pour chaque Custom Post Type utilisé, par exemple dans Places il y aura : single-gd_place.

Cependant, il peut arriver que d'autres classes body personnalisées soient nécessaires. Voici quelques exemples :

1) Ajouter une classe body personnalisée à la page de localisation

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

la même balise conditionnelle

geodir_is_page()

peut être utilisée pour n'importe quelle page gd, par exemple pour la page d'aperçu :

2) Ajouter une classe body personnalisée à la page d'aperçu de l'annonce

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Ajouter une classe body personnalisée sur la page de détails pour différents packages de prix

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) Ajouter une classe body personnalisée dans la page de recherche pour différents CPT recherchés

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Ajouter une classe body personnalisée à toutes les pages WooCommerce

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Ajouter une classe body personnalisée à la page Boutique uniquement

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Ajouter une classe body personnalisée à la page Catégorie de produits

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) Ajouter une classe body personnalisée à une page de catégorie de produits spécifique

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Ajouter une classe body personnalisée à la page Produit

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Ajouter une classe body personnalisée à une page de produit spécifique

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

Il existe de nombreuses autres balises conditionnelles WooCommerce telles que

is_product_tag() pour les archives de tags
is_cart() pour la page du panier
is_checkout() pour la page de paiement
is_account_page() pour les pages de compte client

Vous pouvez tous les trouver ici : https://docs.woothemes.com/document/conditional-tags/

Ajouter des classes body WordPress personnalisées aux pages générées par d'autres plugins

La même chose peut être faite pour tout plugin proposant des tags conditionnels.

Par exemple, vous pouvez trouver les tags conditionnels de bbPress ici : https://codex.bbpress.org/bbpress-conditional-tags/

un exemple ?

1) pour ajouter un tag body personnalisé à toutes les pages bbPress, vous aurez besoin de ceci :

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

Vous trouverez également des tags conditionnels pour BuddyPress et la plupart des meilleurs plugins disponibles.

Supprimer des classes Body

Tout comme vous pouvez ajouter quelque chose via des filtres, vous pouvez également le supprimer :

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

Vous avez des difficultés à ajouter ou à supprimer des classes body sur votre site WordPress ? Demandez un exemple spécifique dans un commentaire ci-dessous et je ferai de mon mieux pour vous le fournir !

Ajouter une classe Body personnalisée WordPress