📋 Clases CSS predeterminadas de WordPress: una chuleta completa para 2026
Abre el inspector de código en su sitio y ve docenas de clases en <body>: .home .logged-in .single-postid-432. Usted no las escribió, no hay plugins involucrados. ¿De dónde salen?
WordPress las agregó por sí mismo. El CMS adjunta clases automáticamente al <body>, envuelve las entradas con post_class(), marca menús, widgets y comentarios, todo listo para usar, sin una sola línea de su código. El problema es que los principiantes o no conocen estas clases o no entienden cómo utilizarlas. El resultado: kilómetros de CSS extra donde un solo selector estándar bastaría.
Esta guía de referencia es una lista completa de las clases CSS que WordPress genera por defecto. Aprenderá a apuntar a páginas específicas mediante las clases del body, a dar estilo a las entradas según su formato y a diseñar menús y widgets sin editar el HTML. Solo lo que realmente resulta útil al construir un tema o personalizar uno existente.
💡 Resumen rápido:
- Abra el inspector de código en cualquier página de su sitio, busque las clases
.home.single.logged-inen<body>y confirme que ya están en el marcado sin intervención suya. - Agregue la regla
.search-results .sidebar { display: none; }astyle.css: la barra lateral desaparecerá solo en la página de búsqueda, dejando intactas las demás páginas. - Imprima
post_class()en el bucle de entradas y dé estilo a.format-videocomo una tarjeta ancha mientras que.format-imagerecibe un diseño cuadrado: una función, distintos formatos, distintos diseños. - Agrupe los selectores de widgets con comas:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, y cuatro widgets obtienen un estilo idéntico en una línea.
Cómo genera WordPress las clases CSS: body_class() y post_class()
WordPress agrega clases mediante dos funciones clave: body_class() y post_class(). Están integradas en el núcleo y las llama el tema al renderizar la página. Usted no necesita incluir nada: si el tema sigue los estándares de WordPress, estas funciones ya están funcionando.
body_class() imprime una lista de clases en el atributo class de la etiqueta <body>. El conjunto de clases depende de qué página está viendo el visitante: inicio, categoría, búsqueda, entrada individual, archivo. Estas clases le permiten cambiar selectivamente el fondo, la tipografía u ocultar bloques en páginas específicas sin crear plantillas separadas.
post_class() hace lo mismo para cada entrada dentro del bucle. Devuelve clases como .format-image o .sticky, que ayudan a distinguir una entrada fija de una galería y a cambiar el diseño en consecuencia.
Ambas funciones aceptan un parámetro personalizado: usted puede agregar su propia clase. Por ejemplo:
1 <body <?php body_class( 'my-custom-class' ); ?>>
Esto añade .my-custom-class a todas las páginas. Resulta útil cuando incluye un archivo CSS compartido y quiere un gancho único para su estilo.
Clases de la etiqueta body: lista completa
Este es el conjunto de clases más rico en WordPress. Internamente, body_class() analiza la URL actual, el tipo de página y el estado del usuario, y luego imprime docenas de selectores. A continuación, la lista completa de lo que puede encontrar en el marcado.
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 la práctica, el escenario más común es dar estilo a la página de búsqueda. Suponga que quiere ocultar la barra lateral en los resultados de búsqueda. En lugar de editar search.php, agregue esto a style.css:
1 .search-results .sidebar { display: none; }
La clase .search-results solo está presente en <body> cuando la página de búsqueda está activa. En otras páginas, la barra lateral permanece en su lugar. El mismo principio funciona para .error404 .archive .logged-in y cualquier otra clase de la tabla.
Preste atención a las clases dinámicas con sufijos: .category-(slug) .tag-(slug) .author-(user_nicename). Le permiten dar estilo a una página de categoría o de autor específica. Por ejemplo, .category-news .entry-title { color: red; } coloreará los títulos solo en la categoría «News».
Clases de entrada: post_class() y formatos de contenido
La función post_class() añade clases al elemento <article> (o a la etiqueta que su tema use para envolver las entradas). Las clases se imprimen en el atributo class y dependen del tipo de contenido.
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 grupo aparte lo constituyen las clases de formato de entrada. WordPress admite formatos listos para usar: imagen, galería, chat, enlace, cita, estado, video. post_class() añade automáticamente .format-{type} a cada entrada.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
En la práctica, esto se ve así: usted muestra una cuadrícula de tres columnas en la página de inicio, pero quiere una sola columna ancha para el formato de video. La solución es una línea de CSS:
1 .format-video { grid-column: span 3; }
La clase .sticky marca las entradas fijas, y .hentry sirve como marcador de microformato (utilizado por motores de búsqueda y analizadores). El punto principal: no elimine post_class() de la plantilla. Sin ella, el tema pierde compatibilidad con los plugins que dependen del marcado estándar de entradas.
Clases del menú de navegación: del contenedor a los elementos del desplegable
Cuando usted crea un menú en el administrador de WordPress, este se envuelve en un contenedor con una clase que usted especificó al registrar el menú. En el ejemplo siguiente, esta es main-menu. Dentro hay un anidamiento estándar de <ul> → <li> → <a>, y cada nivel recibe sus propias clases.
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 */
Las clases .current_page_item, .current-cat y .current-menu-item son las más útiles. Resaltan automáticamente el elemento activo del menú. Usted no necesita escribir condiciones en PHP: simplemente defina un estilo para .current-menu-item a y el enlace activo se destacará con color o subrayado en cualquier página del sitio.
Clases del editor: imágenes, galerías y leyendas
El editor de WordPress (tanto el clásico TinyMCE como el editor de bloques Gutenberg) añade clases estándar a <img>, galerías y leyendas al insertar archivos multimedia. Conociendo estas clases, usted puede controlar la alineación de imágenes y el estilo de las galerías mediante el CSS de su 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 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 {}
Las clases .alignleft, .alignright y .aligncenter controlan el ajuste del texto. WordPress las asigna a <img> automáticamente cuando el usuario selecciona la alineación en el editor. Las clases .size-full, .size-large, .size-medium y .size-thumbnail corresponden a los tamaños de miniatura registrados en el tema, y usted puede usarlas para establecer max-width o border-radius para imágenes de un tamaño específico.
.wp-caption y .wp-caption-text son el contenedor y la leyenda de una imagen. En la mayoría de los temas, la leyenda tiene un estilo mínimo: texto gris en cursiva debajo de la foto. Conociendo la clase, usted puede convertirla en una elegante insignia superpuesta sobre la foto con una sola edición de CSS, sin necesidad de plugins.
Clases de widgets: búsqueda, categorías, calendario, nube de etiquetas
WordPress incluye un conjunto de widgets estándar: Buscar, Categorías, Entradas recientes, Nube de etiquetas, Calendario, Meta, Archivos, Páginas, Texto. Cada uno tiene su propio envoltorio CSS con clases predecibles. Si usted no ha eliminado los widgets estándar mediante unregister_widget(), estarán presentes en la barra lateral.
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 {}
Muchas clases comparten la misma estructura: Categorías, Archivos, Páginas y Entradas recientes tienen todas un anidamiento idéntico de ul → li → a. En la práctica, esto le permite agrupar selectores con comas y acortar su hoja de estilos:
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 }
Cuatro widgets, una línea de CSS. Sin conocer las clases estándar, usted escribiría reglas separadas para cada widget manualmente.
Clases de comentarios: lista y formulario
Los comentarios en WordPress tienen el sistema de clases más elaborado, especialmente si el tema admite discusiones en hilos. Una lista plana requiere solo tres o cuatro selectores, pero el conjunto completo cubre el anidamiento, la paridad par/impar, la autoría y la profundidad.
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
Las más útiles en la práctica son .bypostauthor (resalta los comentarios del autor de la entrada con una insignia de color) y .depth-{id} (para aplicar estilos por nivel de anidamiento). Las clases .odd/.even le permiten alternar colores en los comentarios para mejorar la legibilidad en discusiones largas.
Video: cómo usar las clases estándar de WordPress al construir un tema
Un recorrido práctico siempre es más claro que una árida hoja de referencia. Este video muestra cómo encontrar y aplicar las clases estándar de WordPress al personalizar un tema existente: desde el inspector de código hasta las ediciones en style.css.
⁉️🤔 Preguntas frecuentes
¿Es obligatorio usar body_class() y post_class() en mi tema?
Sí, si está desarrollando un tema para distribución pública. Es un requisito de los estándares de revisión de temas de WordPress: sin
body_class()ypost_class(), el tema no pasará la revisión en el directorio de WordPress.org. Para un tema personalizado hecho para usted mismo, no es obligatorio, pero estas funciones le ahorran horas de trabajo al dar estilo a páginas y tipos de contenido individuales.
¿Puedo añadir mi propia clase al body o a un post?
Sí. Pase una cadena con la clase a la llamada de la función:
body_class('my-theme-body')añadirá.my-theme-bodya la etiqueta<body>. De manera similar,post_class('featured')funciona igual, y la clase.featuredaparecerá en los posts seleccionados. Varias clases se pasan como un array:post_class( array( 'featured', 'no-sidebar' ) ).
¿Las clases de esta guía siguen siendo válidas para Gutenberg?
Sí. Aunque Gutenberg cambió el editor, el marcado del front-end de WordPress sigue siendo el mismo.
body_class()ypost_class()funcionan independientemente del editor, y Gutenberg también usa las clases.align*,.wp-captiony las de galería. Las clases de widgets son válidas para widgets clásicos; para bloques en la barra lateral, la estructura difiere, pero la clase base.widgetse conserva.
¿Dónde debo añadir mi CSS: en el style.css del tema o en los ajustes del personalizador?
Para ediciones que usan clases estándar de WordPress, el lugar más seguro es el
style.cssde un tema hijo. El CSS adicional en el personalizador (Apariencia → Personalizar → CSS adicional) también funciona, pero está vinculado al tema activo y se almacena en la base de datos: cuando cambia de tema, los estilos se pierden. Si está personalizando un tema de terceros, cree un tema hijo y haga los cambios allí.
¿Qué debo hacer si el tema no genera las clases estándar?
Revise
header.phppara verificar la presencia debody_class()dentro de la etiqueta<body>. Si la llamada no está, añádala. De igual manera en las plantillas del loop:post_class()debe estar en el atributoclassdel elemento contenedor de los posts. Esto rara vez ocurre en temas comerciales, pero es común en temas antiguos o hechos a medida.
Qué llevarse primero de esta guía de referencia
Si ha construido uno o dos temas y no quiere memorizar todas las clases, recuerde tres cosas principales.
Primero. body_class() es su herramienta principal para dar estilo a páginas específicas. .home, .single, .category-slug, .logged-in cubren la mayoría de las tareas de personalización sin editar plantillas.
Segundo. post_class() con formatos (.format-video, .format-gallery) le permite construir una cuadrícula de posts donde cada formato se ve diferente, sin plugins ni condiciones adicionales en el loop.
Tercero. Las clases estándar de widgets (ul → li → a) son idénticas en todos los widgets. Agrupe los selectores con comas y su style.css tendrá la mitad de extensión.
Marque esta guía como favorita. La próxima vez que abra el inspector de código y vea una clase desconocida en <body>, sabrá de dónde viene y cómo usarla.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.