Skip to content

Tutto per WordPress, lo sviluppo web — e non solo

📋 Classi CSS predefinite di WordPress: un cheat sheet completo 2026
Temi WordPressWordPress
9 min1,744 parole

📋 Classi CSS predefinite di WordPress: un cheat sheet completo 2026

Apri l’ispettore del codice sul tuo sito e vedi decine di classi sul <body>: .home .logged-in .single-postid-432. Non le hai scritte tu, non ci sono plugin coinvolti. Da dove arrivano?

WordPress le ha aggiunte da solo. Il CMS associa automaticamente classi al <body>, avvolge gli articoli in post_class(), marca menu, widget e commenti, tutto nativamente, senza una sola riga di tuo codice. Il problema è che i principianti o non conoscono queste classi o non capiscono come usarle. Il risultato: chilometri di CSS extra dove basterebbe un singolo selettore standard.

Questa guida rapida è un elenco completo delle classi CSS che WordPress genera di default. Imparerai a targettizzare pagine specifiche tramite le classi del body, a stilizzare gli articoli per formato e a progettare menu e widget senza modificare l’HTML. Solo ciò che serve davvero quando costruisci un tema o personalizzi un tema esistente.

Codice HTML e CSS su uno schermo

💡 Panoramica rapida:

  • Apri l’ispettore del codice su una pagina qualsiasi del tuo sito, individua le classi .home .single .logged-in sul <body> e verifica che siano già presenti nel markup senza alcun tuo intervento.
  • Aggiungi la regola .search-results .sidebar { display: none; } al style.css: la sidebar sparirà solo nella pagina di ricerca, lasciando intatte le altre pagine.
  • Inserisci post_class() nel loop degli articoli e stilizza .format-video come una card larga mentre .format-image riceve un layout quadrato: una funzione, formati diversi, design diversi.
  • Raggruppa i selettori dei widget con le virgole: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, e quattro widget ricevono uno stile identico in una riga.

Come WordPress genera le classi CSS: body_class() e post_class()

WordPress aggiunge classi attraverso due funzioni chiave: body_class() e post_class(). Sono integrate nel core e chiamate dal tema durante il rendering della pagina. Non devi includere nulla: se il tema segue gli standard di WordPress, queste funzioni sono già operative.

body_class() restituisce un elenco di classi nell’attributo class del tag <body>. L’insieme delle classi dipende da quale pagina sta visualizzando il visitatore: home, categoria, ricerca, articolo singolo, archivio. Queste classi ti permettono di modificare selettivamente sfondo, font o nascondere blocchi su pagine specifiche senza creare template separati.

post_class() fa lo stesso per ogni articolo nel loop. Restituisce classi come .format-image o .sticky, che aiutano a distinguere un articolo in evidenza da una galleria e a cambiare il layout di conseguenza.

Entrambe le funzioni accettano un parametro personalizzato: puoi aggiungere la tua classe. Per esempio:

1<body <?php body_class( 'my-custom-class' ); ?>>

Questo aggiunge .my-custom-class a tutte le pagine. Utile quando includi un file CSS condiviso e vuoi un gancio univoco per il tuo stile.

Classi del tag body: elenco completo

Questo è l’insieme più ricco di classi in WordPress. Dietro le quinte, body_class() analizza l’URL corrente, il tipo di pagina e lo stato dell’utente, poi restituisce decine di selettori. Di seguito trovi l’elenco completo di ciò che puoi incontrare nel markup.

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) {}

Nella pratica, lo scenario più comune è stilizzare la pagina di ricerca. Supponi di voler nascondere la sidebar nei risultati di ricerca. Invece di modificare search.php, aggiungi questo al style.css:

1.search-results .sidebar { display: none; }

La classe .search-results è presente sul <body> solo quando la pagina di ricerca è attiva. Nelle altre pagine, la sidebar rimane al suo posto. Lo stesso principio vale per .error404 .archive .logged-in e qualsiasi altra classe della tabella.

Presta attenzione alle classi dinamiche con suffisso: .category-(slug) .tag-(slug) .author-(user_nicename). Ti permettono di stilizzare una pagina di categoria o un autore specifico. Per esempio, .category-news .entry-title { color: red; } colorerà i titoli solo nella categoria "News".

Classi degli articoli: post_class() e formati di contenuto

La funzione post_class() aggiunge classi all’elemento <article> (o qualunque tag il tuo tema usi per avvolgere gli articoli). Le classi vengono restituite nell’attributo class e dipendono dal tipo di contenuto.

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 gruppo a parte è costituito dalle classi dei formati di articolo. WordPress supporta i formati nativamente: image, gallery, chat, link, quote, status, video. post_class() aggiunge automaticamente .format-{type} a ciascun articolo.

1.format-image {}
2.format-gallery {}
3.format-chat {}
4.format-link {}
5.format-quote {}
6.format-status {}
7.format-video {}

Nella pratica, il risultato è questo: visualizzi una griglia a tre colonne nella home page, ma vuoi una singola colonna larga per il formato video. La soluzione è una riga di CSS:

1.format-video { grid-column: span 3; }

La classe .sticky contrassegna gli articoli in evidenza, e .hentry funge da marcatore di microformato (usato dai motori di ricerca e dai parser). Il punto principale: non rimuovere post_class() dal template. Senza di essa, il tema perde compatibilità con i plugin che si basano sul markup standard degli articoli.

Classi dei menu di navigazione: dal contenitore alle voci del dropdown

Quando crei un menu nell’amministrazione di WordPress, questo viene avvolto in un contenitore con una classe che hai specificato al momento della registrazione del menu. Nell’esempio qui sotto, questa è main-menu. All’interno c’è una nidificazione standard di <ul> → <li> → <a>, e ogni livello riceve le proprie classi.

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 */

Le classi .current_page_item .current-cat e .current-menu-item sono le più utili. Permettono di evidenziare automaticamente la voce di menu attiva. Non serve scrivere condizioni PHP: basta definire uno stile per .current-menu-item a e il link attivo verrà evidenziato con un colore o una sottolineatura in ogni pagina del sito.

Classi dell'editor: immagini, gallerie e didascalie

L'editor di WordPress (sia il classico TinyMCE che il block editor Gutenberg) aggiunge classi standard a <img>, gallerie e didascalie quando si inseriscono file media. Conoscendo queste classi, puoi controllare l'allineamento delle immagini e lo stile delle gallerie tramite il CSS del tuo tema.

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 
13blockquote.left {}
14blockquote.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 {}

Le classi .alignleft .alignright .aligncenter gestiscono il testo a capo. WordPress le assegna automaticamente a <img> quando l'utente seleziona l'allineamento nell'editor. Le classi .size-full .size-large .size-medium .size-thumbnail corrispondono alle dimensioni delle miniature registrate nel tema e puoi usarle per impostare max-width o il border-radius per immagini di una dimensione specifica.

.wp-caption e .wp-caption-text sono il contenitore e la didascalia di un'immagine. Nella maggior parte dei temi, la didascalia ha uno stile minimale: testo grigio in corsivo sotto la foto. Conoscendo la classe, puoi trasformarla in un badge in sovrimpressione ordinato sopra la foto con una sola modifica CSS, senza bisogno di plugin.

Classi dei widget: ricerca, categorie, calendario, tag cloud

WordPress include un set di widget standard: Ricerca, Categorie, Articoli recenti, Tag Cloud, Calendario, Meta, Archivi, Pagine, Testo. Ognuno ha il proprio wrapper CSS con classi prevedibili. Se non hai rimosso i widget standard tramite unregister_widget(), sono presenti nella sidebar.

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 {}

Molte classi condividono la stessa struttura: Categorie, Archivi, Pagine e Articoli recenti hanno tutte un annidamento identico di ul → li → a. In pratica, questo ti permette di raggruppare i selettori con le virgole e accorciare il foglio di stile:

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}

Quattro widget, una riga di CSS. Senza conoscere le classi standard, scriveresti regole separate manualmente per ogni widget.

Classi dei commenti: lista e modulo

I commenti in WordPress hanno il sistema di classi più elaborato, specialmente se il tema supporta le discussioni nidificate. Una lista piatta richiede solo tre o quattro selettori, ma il set completo copre annidamento, parità pari/dispari, paternità e profondità.

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

Le più utili nella pratica sono .bypostauthor (evidenzia i commenti dell'autore dell'articolo con un badge colorato) e .depth-{id} (stile per livello di annidamento). Le classi .odd/.even permettono di alternare i colori dei commenti per una migliore leggibilità nelle discussioni lunghe.

Video: come usare le classi standard di WordPress quando si sviluppa un tema

Una guida pratica è sempre più chiara di un arido cheat sheet. Questo video mostra come trovare e applicare le classi standard di WordPress quando si personalizza un tema esistente: dall'ispettore del codice alle modifiche in style.css.

⁉️🤔 Domande frequenti

È obbligatorio usare body_class() e post_class() nel mio tema?

Sì, se sviluppi un tema destinato alla distribuzione pubblica. È un requisito degli standard di revisione dei temi WordPress: senza body_class() e post_class(), il tema non supera la revisione nella directory WordPress.org. Per un tema personalizzato creato per te stesso, non è obbligatorio, ma queste funzioni fanno risparmiare ore di lavoro quando si stilizzano singole pagine e tipi di post.

Posso aggiungere una mia classe al body o a un post?

Sì. Passa una stringa con la classe alla chiamata della funzione: body_class('my-theme-body') aggiungerà .my-theme-body al tag <body>. Allo stesso modo, post_class('featured') funziona in modo analogo e la classe .featured apparirà sui post selezionati. Più classi vanno passate come array: post_class( array( 'featured', 'no-sidebar' ) ).

Le classi di questo cheat sheet sono ancora valide per Gutenberg?

Sì. Anche se Gutenberg ha cambiato l'editor, il markup front-end di WordPress è rimasto lo stesso. body_class() e post_class() funzionano indipendentemente dall'editor e anche Gutenberg utilizza le classi .align*, .wp-caption e quelle per le gallerie. Le classi dei widget sono valide per i widget classici; per i blocchi nella sidebar la struttura è diversa, ma la classe base .widget è mantenuta.

Dove devo aggiungere il mio CSS: nel file style.css del tema o nelle impostazioni del personalizzatore?

Per modifiche che usano le classi standard di WordPress, il posto più sicuro è il style.css di un tema child. Anche i CSS aggiuntivi nel personalizzatore (Aspetto → Personalizza → CSS aggiuntivo) funzionano, ma sono legati al tema attivo e salvati nel database: quando cambi tema, gli stili vanno persi. Se stai personalizzando un tema di terzi, crea un tema child e applica lì le modifiche.

Cosa fare se il tema non produce le classi standard?

Verifica in header.php la presenza di body_class() all'interno del tag <body>. Se la chiamata manca, aggiungila. Allo stesso modo nei template del loop: post_class() deve trovarsi nell'attributo class dell'elemento contenitore dei post. Capita raramente nei temi commerciali, ma è comune in temi più vecchi o sviluppati su misura.

Cosa portarsi via per primi da questo cheat sheet

Se hai costruito uno o due temi e non vuoi memorizzare tutte le classi, ricorda tre cose principali.

Primo. body_class() è il tuo strumento principale per stilizzare pagine specifiche. .home, .single, .category-slug, .logged-in coprono la maggior parte delle esigenze di personalizzazione senza modificare i template.

Secondo. post_class() con i formati (.format-video, .format-gallery) ti permette di costruire una griglia di post in cui ogni formato appare diverso, senza plugin o condizioni aggiuntive nel loop.

Terzo. Le classi standard dei widget (ul → li → a) sono identiche per tutti i widget. Raggruppa i selettori con le virgole e il tuo style.css sarà lungo la metà.

Aggiungi questo cheat sheet ai preferiti. La prossima volta che apri l'ispettore del codice e vedi una classe sconosciuta sul <body>, saprai da dove viene e come usarla.

Redazione
RedazioneTeam editoriale→ All publications

Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.