X

Ajouter une classe de corps personnalisée pour des pages spécifiques

Snippets by IsItWP

Vous cherchez un moyen d’ajouter une classe de corps personnalisée pour des pages spécifiques ? Bien qu’il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour ajouter une classe de corps personnalisée pour des pages spécifiques dans WordPress.

Instructions:

Tout ce que vous avez à faire est d’ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique à votre site:

add_filter( 'body_class', 'my_neat_body_class');
function my_neat_body_class( $classes ) {
     if ( is_page(7) || is_category(5) || is_tag('neat') )
          $classes[] = 'neat-stuff';

     return $classes; 
}

Ajoutez cet extrait de code au fichier header.php de votre thème WordPress pour remplacer la balise HTML body par défaut.

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

Note : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez vous référer à notre guide sur la façon d’ajouter correctement des extraits de code dans WordPress, afin de ne pas briser accidentellement votre site.

Si vous avez aimé cet extrait de code, n’hésitez pas à consulter nos autres articles sur le site comme : 27 meilleurs thèmes WordPress pour les entreprises et 7 meilleurs plugins WordPress GDPR.

Commentaires   laisser une réponse

  1. Is something similar possible but for a #id? I don’t want class .id

    1. You could still use the .page-id class: https://developer.wordpress.org/reference/functions/body_class/

      That said, for actually ids, you could add an id to the template file itself and use conditionals to control when it displays.

  2. great! really helped me out.

  3. Freelance Web Designer juin 3, 2014 à 3:30 pm

    where can i add class once above steps are done?

    1. change the class in the code ‘neat-stuff’ to whatever you would like. You could even add
      multiple classes if need be.

      1. Freelance Web Designer juin 3, 2014 à 3:39 pm

        i want different id / class for each page… how do i assign it to specific page?

        1. This snippet is not what you need, it will only add a single class to

          “is_page(7) || is_category(5) || is_tag(‘neat’)”

          A page with the ID of 7 or the category of 5 or a page that has the tag neat. I think what would better fit your needs is the following.

          http://wpsnipp.com/index.php/functions-php/add-parent-page-slug-to-body_class/

          This will add the page slug as the class for the page with a prefix of parent-{page_slug}. Other than adding this snippet to the functions.php nothing more needs to be done. Also take a look at this search result for more snippets related to the body_class http://wpsnipp.com/?s=body_class

          I’m sure you can find a few that are useful.

          1. Freelance Web Designer juin 3, 2014 à 4:24 pm

            thanks!

  4. Works flawlessly for me, nice job!

  5. Thanks a lot for this, really appreciated!

  6. Thanks for this, I wanted a shorter body class name for a custom page template, using is_page_template (‘template-name.php’) and this worked perfect.

  7. you this be combined with the other body class snippet so if the pages are not specified they default to have their own page as the class?

    1. Should be able to just do

           if ( is_page(7) || is_category(5) || is_tag(‘neat’) ){
                $classes[] = ‘neat-stuff’;          }else{
                $classes[] = ‘other-class’;

                }

  8. Is there anything you need to do after you add the class? I’m not seeing any way to add a custom class for a page…

    1. Hi Trevor,
      Yes you will need to add the body_class(); function within the body tag I updated the snippet to avoid confusion.

  9. Very handy. Can something simular be done using page parent?

    1. Sure you could do something like this, however if your pages only have a single parent the body_class will already add “page-parent” class to the body. This is only a problem if you have many child pages as each sub page may also be a parent page. What is it that you are trying to do?

  10. Elliott the web design guy mai 18, 2011 à 10:43 pm

    Now that’s a very neat snippet for custom page layouts – awesome!

    1. Cool glad you like it!

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre privacy policy, et que tous les liens sont en nofollow. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.

WordPress Launch Checklist

L'ultime liste de contrôle pour le lancement de WordPress

Nous avons rassemblé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi le gratuit !