Clases CSS por defecto de WordPress

Clases CSS por defecto de WordPress:

Si quieres animarte a empezar a programar, o tocar, código en tu WordPress no estará de más conocer al menos los básicos, y esta entrada va de eso.

Lo que tienes a continuación es una relación de las clases CSS utilizadas por defecto por WordPress, que encontrarás en la inmensa mayoría de los temas WordPress que uses, así que toma nota y empieza a practicar. Si te animas a crear un tema WordPress luego me lo cuentas y lo promocionamos aquí.

Clases por defecto para el “body”

La etiqueta más importante en el contenido es body, y aquí hay ejemplos de las clases más comunes que WordPress suele añadir a este elemento:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Si quieres añadir estilo a la página de resultados de búsqueda, por ejemplo, puedes usar la clase “search-results” para añadir tu estilo ahí. WordPress solo añade esta clase a la etiqueta body cuando la página de resultados de búsqueda está activa, de modo que no afecta a otras páginas.

Estilos de entrada por defecto

Al igual que con el body, WordPress añade también clases dinámicas a los elementos de las entradas. En esta lista tienes los más utilizados:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

La idea es mostrar las entradas de manera dinámica, de acuerdo al formato que elijas. WordPress, de este modo, añade clases dinámicas usando la función post_class (), la cual te permite crear tus propios estilos para cada formato. Esta función añadirá una clase del tipo “.format-cosa” donde “cosa” es cualquier formato de entrada que hayas elegido, ya sea galería, minientrada, etc:

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Estilos por defecto para menús

De nuevo, podemos personalizar los estilos, en este caso para los menús de navegación:

#header .main-menu{} // clase del contenedor
#header .main-menu ul {} // clase del contender de la primera lista no ordenada (ul)
#header .main-menu ul ul {} //lista no ordenada (ul) dentro de una lista no ordenada (ul)
#header .main-menu li {} // cada elemento de navegación
#header .main-menu li a {} // cada texto de enlace de los elementos de navegación
#header .main-menu li ul {} // lista no ordenada si hay elementos desplegables
#header .main-menu li li {} // cada elemento de navegación desplegable
#header .main-menu li li a {} // cada texto de enlace de los elementos de navegación desplegables

.current_page_item{} // class para la página actual
.current-cat{} // class para la categoriá actual
.current-menu-item{} // class para cualquier otro elemento del menú
.menu-item-type-taxonomy{} // clase para una categoría
.menu-item-type-post_type{} // clase para las páginas
.menu-item-type-custom{} // clase para cualquier elemento personalizado que añadas
.menu-item-home{} // clase para el enlace a la portada

Observa que cuando creas un menú en WordPress automáticamente se envuelve en un div. Este div solo tiene un nombre de clase si lo especificas (por ejemplo main-menu). A partir de ahí ya puedes tu añadir estilo a cada elemento.

Estilos por defecto para el editor visual

El editor visual WYSIWYG es quizás uno de los elementos más utilizados de WordPress, y también de los más queridos. Así que no parece mala idea disponer de estilos por defecto para lo que añadimos en nuestro WordPress, como imágenes, citas, esas cosas. Las siguientes clases CSS son las que añade automáticamente WordPress a estos elementos y que, por supuesto, puedes identificar en tu hoja de estilos – normalmente style.css – y modificar a tu gusto:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Estilos por defecto de los widgets de WordPress

Otro elemento muy popular, y nunca suficientemente valorados, son los widgets. Normalmente se adaptan de maravilla al CSS de tu tema pero si no fuera así no está de más saber que clases CSS les afectan y poder cambiarlas. Las habituales son estas:

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Al aplicar estilos a los widges es probable que siempre necesites las mismas clases. Es por ello que es buena idea combinar clases en tu hoja de estilos usando comas. Por ejemplo, puedes combinar .widget_pages ul y .widget_archive ul haciendo algo así:

.widget_pages ul, .widget_archive ul {}

Estilos por defecto del formulario de comentarios

Una de las partes normalmente más feas en cualquier tema WordPress es el formulario de comentarios. Si quieres algo realmente chulo mejor que lo modifiques. Estas son las clases que encontrarás habitualmente en WordPress:

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Bueno, creo que esta lista es genial para empezar a perderle el miedo a programar, CSS en este caso. ¡Que lo pases bien!, y acuérdate de hacer las pruebas siempre en un WordPress destinado a tal efecto, no enredes en tu tema activo.

Este maravilloso resumen lo publicaron en WP beginner