📋 Classes CSS par défaut de WordPress : un aide-mémoire complet 2026
Vous ouvrez l’inspecteur de code sur votre site et vous voyez des dizaines de classes sur <body>: .home .logged-in .single-postid-432. Vous ne les avez pas écrites, et aucun plugin n’est en cause. D’où viennent-elles?
WordPress les a ajoutées lui-même. Le CMS attache automatiquement des classes à <body>, enveloppe les articles dans post_class(), balise les menus, les widgets et les commentaires, le tout sans que vous ayez à écrire une seule ligne de code. Le problème, c’est que les débutants soit ne connaissent pas ces classes, soit ne savent pas comment les utiliser. Résultat: des kilomètres de CSS superflus là où un simple sélecteur standard suffirait.
Cet aide-mémoire est une liste complète des classes CSS que WordPress génère par défaut. Vous apprendrez à cibler des pages spécifiques via les classes de body, à styliser les articles selon leur format, et à concevoir des menus et des widgets sans modifier le HTML. Uniquement ce qui est vraiment utile quand vous créez un thème ou personnalisez un thème existant.
💡 Aperçu rapide:
- Ouvrez l’inspecteur de code sur n’importe quelle page de votre site, repérez les classes
.home.single.logged-insur<body>, et constatez qu’elles sont déjà présentes dans le balisage sans votre intervention. - Ajoutez la règle
.search-results .sidebar { display: none; }àstyle.css: la barre latérale disparaîtra uniquement sur la page de recherche, sans toucher aux autres pages. - Utilisez
post_class()dans la boucle d’articles et stylisez.format-videocomme une carte large tandis que.format-imagereçoit une mise en page carrée: une seule fonction, des formats différents, des designs différents. - Regroupez les sélecteurs de widgets avec des virgules:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, et quatre widgets reçoivent un style identique en une seule ligne.
Comment WordPress génère les classes CSS: body_class() et post_class()
WordPress ajoute des classes via deux fonctions clés: body_class() et post_class(). Elles sont intégrées au cœur du CMS et appelées par le thème lors du rendu de la page. Vous n’avez rien à inclure: si le thème respecte les standards WordPress, ces fonctions sont déjà actives.
body_class() produit une liste de classes dans l’attribut class de la balise <body>. L’ensemble des classes dépend de la page que le visiteur consulte: accueil, catégorie, recherche, article seul, archive. Ces classes vous permettent de modifier sélectivement l’arrière-plan, la police ou de masquer des blocs sur des pages spécifiques sans créer de templates distincts.
post_class() fait la même chose pour chaque article dans la boucle. Elle renvoie des classes comme .format-image ou .sticky, qui aident à distinguer un article épinglé d’une galerie et à adapter la mise en page en conséquence.
Les deux fonctions acceptent un paramètre personnalisé: vous pouvez ajouter votre propre classe. Par exemple:
1 <body <?php body_class( 'my-custom-class' ); ?>>
Cela ajoute .my-custom-class à toutes les pages. Pratique lorsque vous incluez un fichier CSS partagé et que vous voulez un point d’accroche unique pour votre style.
Classes de la balise body: liste complète
C’est l’ensemble de classes le plus riche de WordPress. En coulisses, body_class() analyse l’URL courante, le type de page et le statut de l’utilisateur, puis produit des dizaines de sélecteurs. Voici la liste complète de ce que vous pouvez rencontrer dans le balisage.
1 .rtl {} 2 .home {} 3 .blog {} 4 .archive {} 5 .date {} 6 .search {} 7 .paged {} 8 .attachment {} 9 .error404 {} 10 .single postid-(id) {} 11 .attachmentid-(id) {} 12 .attachment-(mime-type) {} 13 .author {} 14 .author-(user_nicename) {} 15 .category {} 16 .category-(slug) {} 17 .tag {} 18 .tag-(slug) {} 19 .page-parent {} 20 .page-child parent-pageid-(id) {} 21 .page-template page-template-(template file name) {} 22 .search-results {} 23 .search-no-results {} 24 .logged-in {} 25 .paged-(page number) {} 26 .single-paged-(page number) {} 27 .page-paged-(page number) {} 28 .category-paged-(page number) {} 29 .tag-paged-(page number) {} 30 .date-paged-(page number) {} 31 .author-paged-(page number) {} 32 .search-paged-(page number) {}
En pratique, le scénario le plus courant est la mise en forme de la page de recherche. Supposons que vous vouliez masquer la barre latérale sur les résultats de recherche. Au lieu de modifier search.php, ajoutez ceci à style.css:
1 .search-results .sidebar { display: none; }
La classe .search-results n’est présente sur <body> que lorsque la page de recherche est active. Sur les autres pages, la barre latérale reste en place. Le même principe s’applique à .error404 .archive .logged-in et à toute autre classe du tableau.
Prêtez attention aux classes dynamiques avec suffixes: .category-(slug) .tag-(slug) .author-(user_nicename). Elles vous permettent de styliser une page de catégorie ou une page auteur spécifique. Par exemple, .category-news .entry-title { color: red; } colorera les titres uniquement dans la catégorie «News».
Classes d’articles: post_class() et formats de contenu
La fonction post_class() ajoute des classes à l’élément <article> (ou à la balise que votre thème utilise pour envelopper les articles). Les classes sont produites dans l’attribut class et dépendent du type de contenu.
1 .post-id {} 2 .post {} 3 .page {} 4 .attachment {} 5 .sticky {} 6 .hentry {} 7 .category-misc {} 8 .category-example {} 9 .tag-news {} 10 .tag-wordpress {} 11 .tag-markup {}
Un groupe distinct est constitué des classes de format d’article. WordPress prend en charge les formats de manière native: image, galerie, discussion, lien, citation, statut, vidéo. post_class() ajoute automatiquement .format-{type} à chaque article.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
En pratique, voici ce que cela donne: vous affichez une grille de trois colonnes sur la page d’accueil, mais vous voulez une seule colonne large pour le format vidéo. La solution tient en une ligne de CSS:
1 .format-video { grid-column: span 3; }
La classe .sticky marque les articles épinglés, et .hentry sert de marqueur de microformat (utilisé par les moteurs de recherche et les analyseurs). Le point essentiel: ne supprimez pas post_class() du template. Sans elle, le thème perd sa compatibilité avec les plugins qui s’appuient sur le balisage standard des articles.
Classes des menus de navigation: du conteneur aux éléments déroulants
Quand vous créez un menu dans l’administration WordPress, il est enveloppé dans un conteneur avec une classe que vous avez spécifiée lors de l’enregistrement du menu. Dans l’exemple ci-dessous, il s’agit de main-menu. À l’intérieur se trouve une imbrication standard de <ul> → <li> → <a>, et chaque niveau reçoit ses propres classes.
1 #header .main-menu {} /* menu container */ 2 #header .main-menu ul {} /* first-level list */ 3 #header .main-menu ul ul {} /* nested list (dropdown menu) */ 4 #header .main-menu li {} /* menu item */ 5 #header .main-menu li a {} /* item link */ 6 #header .main-menu li ul {} /* dropdown items list */ 7 #header .main-menu li li {} /* dropdown item */ 8 #header .main-menu li li a {} /* dropdown item link */ 9 10 .current_page_item {} /* current page */ 11 .current-cat {} /* current category */ 12 .current-menu-item {} /* any current item */ 13 .menu-item-type-taxonomy {} /* type: category */ 14 .menu-item-type-post_type {} /* type: page */ 15 .menu-item-type-custom {} /* type: custom link */ 16 .menu-item-home {} /* link to home */
Les classes .current_page_item, .current-cat et .current-menu-item sont les plus utiles. Elles permettent de mettre en surbrillance l’élément de menu actif automatiquement. Vous n’avez pas besoin d’écrire de conditions PHP: il suffit de définir un style pour .current-menu-item a, et le lien actif sera mis en évidence par une couleur ou un soulignement sur toutes les pages du site.
Classes de l’éditeur: images, galeries et légendes
L’éditeur WordPress (qu’il s’agisse du TinyMCE classique ou de l’éditeur par blocs Gutenberg) ajoute des classes standard aux balises <img>, aux galeries et aux légendes lors de l’insertion de fichiers média. En connaissant ces classes, vous pouvez contrôler l’alignement des images et le style des galeries via le CSS de votre thème.
1 .entry-content img {} 2 .alignleft, img.alignleft {} 3 .alignright, img.alignright {} 4 .aligncenter, img.aligncenter {} 5 .alignnone, img.alignnone {} 6 7 .wp-caption {} 8 .wp-caption img {} 9 .wp-caption p.wp-caption-text {} 10 11 .wp-smiley {} 12 13 blockquote.left {} 14 blockquote.right {} 15 16 .gallery dl {} 17 .gallery dt {} 18 .gallery dd {} 19 .gallery dl a {} 20 .gallery dl img {} 21 .gallery-caption {} 22 23 .size-full {} 24 .size-large {} 25 .size-medium {} 26 .size-thumbnail {}
Les classes .alignleft, .alignright et .aligncenter gèrent l’habillage du texte. WordPress les attache automatiquement à <img> lorsque l’utilisateur choisit un alignement dans l’éditeur. Les classes .size-full, .size-large, .size-medium et .size-thumbnail correspondent aux tailles de miniatures enregistrées dans le thème, et vous pouvez les utiliser pour définir une max-width ou un border-radius pour les images d’une taille spécifique.
.wp-caption et .wp-caption-text sont respectivement le conteneur et la légende d’une image. Dans la plupart des thèmes, la légende est stylisée de façon minimale: un texte gris en italique sous la photo. En connaissant la classe, vous pouvez la transformer en un badge superposé sur la photo avec une seule modification CSS, sans extension.
Classes des widgets: recherche, catégories, calendrier, nuage de tags
WordPress est livré avec un ensemble de widgets standard: Recherche, Catégories, Articles récents, Nuage de tags, Calendrier, Méta, Archives, Pages, Texte. Chacun possède son propre conteneur CSS avec des classes prévisibles. Si vous n’avez pas supprimé les widgets standard via unregister_widget(), ils sont présents dans la barre latérale.
1 .widget {} 2 3 .widget_search {} 4 #searchform {} 5 .screen-reader-text {} 6 7 .widget_meta {} 8 .widget_meta ul {} 9 .widget_meta ul li {} 10 .widget_meta ul li a {} 11 12 .widget_links {} 13 .widget_links ul {} 14 .widget_links ul li {} 15 .widget_links ul li a {} 16 17 .widget_archive {} 18 .widget_archive ul {} 19 .widget_archive ul li {} 20 .widget_archive ul li a {} 21 .widget_archive select {} 22 .widget_archive option {} 23 24 .widget_pages {} 25 .widget_pages ul {} 26 .widget_pages ul li {} 27 .widget_pages ul li a {} 28 29 .widget_tag_cloud {} 30 .widget_tag_cloud a {} 31 .widget_tag_cloud a:after {} 32 .widget_tag_cloud a:before {} 33 34 .widget_calendar {} 35 #calendar_wrap {} 36 #calendar_wrap th {} 37 #calendar_wrap td {} 38 #wp-calendar tr td {} 39 #wp-calendar caption {} 40 #wp-calendar a {} 41 #wp-calendar #today {} 42 #wp-calendar #prev {} 43 #wp-calendar #next {} 44 #wp-calendar #next a {} 45 #wp-calendar #prev a {} 46 47 .widget_categories {} 48 .widget_categories ul {} 49 .widget_categories ul li {} 50 .widget_categories ul ul.children {} 51 .widget_categories a {} 52 .widget_categories select {} 53 .widget_categories select#cat {} 54 .widget_categories select.postform {} 55 .widget_categories option {} 56 .widget_categories .level-0 {} 57 .widget_categories .level-1 {} 58 .widget_categories .level-2 {} 59 .widget_categories .level-3 {} 60 61 .widget_recent_comments {} 62 #recentcomments {} 63 #recentcomments li {} 64 #recentcomments li a {} 65 66 .widget_recent_entries {} 67 .widget_recent_entries ul {} 68 .widget_recent_entries ul li {} 69 .widget_recent_entries ul li a {} 70 71 .widget_text {} 72 .textwidget {} 73 .textwidget p {}
De nombreuses classes partagent la même structure: Catégories, Archives, Pages et Articles récents ont tous une imbrication identique de ul → li → a. En pratique, cela vous permet de regrouper les sélecteurs avec des virgules et de raccourcir votre feuille de style:
1 .widget_categories ul, 2 .widget_archive ul, 3 .widget_pages ul, 4 .widget_recent_entries ul { 5 list-style: none; 6 padding-left: 0; 7 }
Quatre widgets, une seule ligne de CSS. Sans connaître les classes standard, vous écririez des règles distinctes pour chaque widget manuellement.
Classes des commentaires: liste et formulaire
Les commentaires dans WordPress possèdent le système de classes le plus élaboré, surtout si le thème prend en charge les discussions en fils de discussion. Une liste plate ne nécessite que trois ou quatre sélecteurs, mais l’ensemble complet couvre l’imbrication, la parité paire/impaire, la paternité de l’article et la profondeur.
1 /* Comment list */ 2 .commentlist {} 3 .commentlist li {} 4 .commentlist li p {} 5 .commentlist li ul {} 6 .commentlist .reply {} 7 .commentlist .reply a {} 8 9 .commentlist .alt {} 10 .commentlist .odd {} 11 .commentlist .even {} 12 .commentlist .thread-alt {} 13 .commentlist .thread-odd {} 14 .commentlist .thread-even {} 15 16 .commentlist .vcard {} 17 .commentlist .vcard cite.fn {} 18 .commentlist .vcard span.says {} 19 .commentlist .vcard img.photo {} 20 .commentlist .vcard img.avatar {} 21 .commentlist .vcard cite.fn a.url {} 22 23 .commentlist .comment-meta {} 24 .commentlist .comment-meta a {} 25 .commentlist .commentmetadata {} 26 .commentlist .commentmetadata a {} 27 28 .commentlist .parent {} 29 .commentlist .comment {} 30 .commentlist .children {} 31 .commentlist .pingback {} 32 .commentlist .bypostauthor {} 33 .commentlist .comment-author {} 34 .commentlist .comment-author-admin {} 35 36 .commentlist li ul.children li {} 37 .commentlist li ul.children li.alt {} 38 .commentlist li ul.children li.byuser {} 39 .commentlist li ul.children li.comment {} 40 .commentlist li ul.children li.depth-{id} {} 41 .commentlist li ul.children li.bypostauthor {} 42 .commentlist li ul.children li.comment-author-admin {} 43 44 #cancel-comment-reply {} 45 #cancel-comment-reply a {} 46 47 /* Comment form */ 48 #respond {} 49 #reply-title {} 50 #cancel-comment-reply-link {} 51 #commentform {} 52 #author {} 53 #email {} 54 #url {} 55 #comment 56 #submit 57 .comment-notes {} 58 .required {} 59 .comment-form-author {} 60 .comment-form-email {} 61 .comment-form-url {} 62 .comment-form-comment {} 63 .form-allowed-tags {} 64 .form-submit
Les plus utiles en pratique sont .bypostauthor (qui met en évidence les commentaires de l’auteur de l’article avec un badge coloré) et .depth-{id} (pour le style par niveau d’imbrication). Les classes .odd et .even vous permettent d’alterner les couleurs des commentaires pour une meilleure lisibilité dans les longues discussions.
Vidéo: comment utiliser les classes WordPress standard lors de la création d’un thème
Une démonstration pratique est toujours plus claire qu’un simple aide-mémoire. Cette vidéo montre comment trouver et appliquer les classes WordPress standard lors de la personnalisation d’un thème existant: de l’inspecteur de code aux modifications dans style.css.
⁉️🤔 Foire aux questions
Est-il obligatoire d’utiliser body_class() et post_class() dans mon thème?
Oui, si vous développez un thème destiné à être distribué publiquement. C’est une exigence des standards de revue des thèmes WordPress: sans
body_class()etpost_class(), le thème ne passera pas la validation sur l’annuaire WordPress.org. Pour un thème sur mesure que vous créez pour vous-même, ce n’est pas obligatoire, mais ces fonctions vous feront gagner des heures de travail lorsque vous styliserez des pages et des types de contenu spécifiques.
Puis-je ajouter ma propre classe au body ou à un article?
Oui. Passez une chaîne de caractères contenant la classe à l’appel de la fonction:
body_class('my-theme-body')ajoutera.my-theme-bodyà la balise<body>. De la même manière,post_class('featured')fonctionne sur le même principe, et la classe.featuredapparaîtra sur les articles sélectionnés. Pour passer plusieurs classes, utilisez un tableau:post_class( array( 'featured', 'no-sidebar' ) ).
Les classes de cette antisèche sont-elles toujours valables avec Gutenberg?
Oui. Bien que Gutenberg ait modifié l’éditeur, le balisage HTML produit en front-end par WordPress reste le même.
body_class()etpost_class()fonctionnent quel que soit l’éditeur, et Gutenberg utilise également les classes.align*,.wp-captionet les classes de galerie. Les classes de widgets sont valables pour les widgets classiques; pour les blocs dans la barre latérale, la structure diffère, mais la classe de base.widgetest conservée.
Où dois-je ajouter mon CSS: dans le style.css du thème ou dans les réglages de l’outil de personnalisation**?**
Pour les modifications qui utilisent les classes standard de WordPress, l’endroit le plus sûr est le
style.cssd’un thème enfant. Le CSS additionnel dans l’outil de personnalisation (Apparence → Personnaliser → CSS additionnel) fonctionne également, mais il est lié au thème actif et stocké en base de données: si vous changez de thème, ces styles sont perdus. Si vous personnalisez le thème de quelqu’un d’autre, créez un thème enfant et effectuez vos modifications dedans.
Que faire si le thème ne génère pas les classes standard?
Vérifiez la présence de
body_class()dans la balise<body>du fichierheader.php. Si l’appel est absent, ajoutez-le. De même dans les templates de boucle:post_class()doit se trouver dans l’attributclassde l’élément conteneur des articles. Cela arrive rarement dans les thèmes commerciaux, mais c’est fréquent dans les thèmes plus anciens ou développés sur mesure.
Que retenir en priorité de cette antisèche
Si vous avez déjà créé un ou deux thèmes et que vous ne voulez pas mémoriser toutes les classes, retenez trois points essentiels.
Premièrement. body_class() est votre outil principal pour styliser des pages spécifiques. .home, .single, .category-slug, .logged-in couvrent la plupart des besoins de personnalisation sans avoir à modifier les templates.
Deuxièmement. post_class() avec les formats (.format-video, .format-gallery) vous permet de construire une grille d’articles où chaque format a un rendu différent, sans extensions ni conditions supplémentaires dans la boucle.
Troisièmement. Les classes standard de widgets (ul → li → a) sont identiques pour tous les widgets. Regroupez les sélecteurs avec des virgules, et votre style.css sera deux fois moins long.
Mettez cette antisèche en favori. La prochaine fois que vous ouvrirez l’inspecteur de code et verrez une classe inconnue sur <body>, vous saurez d’où elle vient et comment l’utiliser.
Une équipe professionnelle de rédacteurs et d'éditeurs spécialisés dans la création de contenu de qualité.