Agregar clases a un objeto HTML en Genesis

Empecemos por decir que podemos agregar clases y otros atributos a varios elementos HTML de nuestro Child Theme de Genesis. Lo haremos siempre a través de los filtros que nos brinda Genesis.

¿Que quiero decir con otros atributos? Los atributos declarados para los elementos HTML dentro de Genesis, no tienen porqué ser solamente clases. Se declaran también ID, role, itemscope y itemtype.

Los atributos itemscope y itemtype son parte de los atributos de los microdatos de Schema.org. Una comunidad colaborativa que se encarga de crear, mantener y promover esquemas de estructuras de datos en Internet. Puedes echar un vistazo a su web si quieres.

Tomemos como ejemplo los atributos declarados del área de widgets de la cabecera de Genesis Sample. A través del filtro genesis_attr_header-widget-area quedan declaradas las clases de este objeto HTML. Esto no quiere decir que no podamos modificarlas, o incluso eliminarlas. Al contrario.

 add_filter( 'genesis_attr_header-widget-area', 'genesis_attributes_header_widget_area' );
/**
 * Add attributes for header widget area element.
 *
 * @since 2.0.0
 *
 * @param array $attributes Existing attributes for header widget area element.
 * @return array Amended attributes for header widget area element.
 */
function genesis_attributes_header_widget_area( $attributes ) {

	$attributes['class'] = 'widget-area header-widget-area';

	return $attributes;

} 

Todas estas funciones están declaradas en el archivo:

genesis/lib/functions/markup.php

Agregamos nuevas clases

Esto para nada quiere decir que no podamos modificarlas, o incluso eliminarlas. Al contrario. Usando ese mismo filtro podemos agregar nuevas clases, sustituir las que ya existen o incluso añadir nuevos atributos como un ID.

Pongamos el ejemplo de agregar nuevas clases área de widgets de la cabecera para nuestro tema hijo. Por ejemplo, agregaremos widgets-cabecera y cabecera como nuevas clases. Para ello, crearemos una función y la asignaremos a ese mismo filtro.

add_filter( 'genesis_attr_header-widget-area', 'cabecera_add_class_attr' );
function cabecera_add_class_attr( $attributes ) {
 
 // añadimos nuevas clases además de las originales
 $attributes['class'] .= ' widgets-cabecera cabecera';
 
 // devolvemos los atributos
 return $attributes;
 
}

Esta función deberá ir en el archivo functions.php del tema hijo.

Fijate en esta última función que añade nuevos atributos, nuevas clases sin afectar a las originales. Esto lo conseguimos poniendo un punto simple justo antes del signo igual dentro de la función, donde declaramos los atributos a añadir. En caso de eliminar este punto, sustituiríamos los originales por los nuevos.

Agregamos nuevo atributo

Digamos por ejemplo que queremos agregar un atributo que no existe. Por ejemplo en esta misma área de widgets de la cabecera le vamos a añadir un ID para que tenga un identificador único. La función sería algo parecida a la anterior.

Usando el mismo filtro que en la anterior función, creamos el atributo ID y le damos un valor. Igualmente, esta función la pondremos en el archivo functions.php de tu tema hijo o del que quieras modificar.

add_filter( 'genesis_attr_header-widget-area', 'cabecera_add_id_attr' );
function cabecera_add_id_attr( $attributes ) {
 
 $attributes['id'] = 'cabecera';
 return $attributes;
}

Os dejo una tabla con la mayoría de los elementos HTML con atributos declarados, junto con sus correspondientes filtros. Con la debida función podemos agregar, modificar o eliminar los que necesitemos.

Context/HTMLGenesis Filter
site-containergenesis_attr_site-container
bodygenesis_attr_body
site-headergenesis_attr_site-header
site-titlegenesis_attr_site-title
site-descriptiongenesis_attr_site-description
header-widget-areagenesis_attr_header-widget-area
nav-primarygenesis_attr_nav-primary
nav-secondarygenesis_attr_nav-secondary
nav-headergenesis_attr_nav-header
structural-wrapgenesis_attr_structural-wrap
contentgenesis_attr_content
entrygenesis_attr_entry
entry-imagegenesis_attr_entry-image
entry-image-widgetgenesis_attr_entry-image-widget
entry-image-grid-loopgenesis_attr_entry-image-grid-loop
entry-authorgenesis_attr_entry-author
entry-author-linkgenesis_attr_entry-author-link
entry-author-namegenesis_attr_entry-author-name
entry-timegenesis_attr_entry-time
entry-modified-timegenesis_attr_entry-modified-time
entry-titlegenesis_attr_entry-title
entry-contentgenesis_attr_entry-content
entry-meta-before-contentgenesis_attr_entry-meta-before-content
entry-meta-after-contentgenesis_attr_entry-meta-after-content
archive-paginationgenesis_attr_archive-pagination
entry-paginationgenesis_attr_entry-pagination
adjacent-entry-paginationgenesis_attr_adjacent-entry-pagination
comments-paginationgenesis_attr_comments-pagination
entry-commentsgenesis_attr_entry-comments
commentgenesis_attr_comment
comment-authorgenesis_attr_comment-author
comment-author-linkgenesis_attr_comment-author-link
comment-timegenesis_attr_comment-time
comment-time-linkgenesis_attr_comment-time-link
comment-contentgenesis_attr_comment-content
author-boxgenesis_attr_author-box
sidebar-primarygenesis_attr_sidebar-primary
sidebar-secondarygenesis_attr_sidebar-secondary
site-footergenesis_attr_site-footer

Algunos de los elementos HTML referentes a las páginas de archivo los dejo en otra tabla por separado.

Context/HTMLGenesis Filter
archive-titlegenesis_attr_archive-title
taxonomy-archive-descriptiongenesis_attr_taxonomy-archive-description
author-archive-descriptiongenesis_attr_author-archive-description
cpt-archive-descriptiongenesis_attr_cpt-archive-description
date-archive-descriptiongenesis_attr_date-archive-description
blog-template-descriptiongenesis_attr_blog-template-description
posts-page-descriptiongenesis_attr_posts-page-description
  

Rara es la vez que he necesitado cambiar  o añadir nuevas clases, pero si que me ha sido de gran ayuda tener los conceptos claros y el poder recurrir a esta lista de filtros.

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. También me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues mensajes tendrán preferencia con respecto a los demás.

Fuente: WPbeaches

Interacciones con los lectores

Comentarios / Soporte

  1. Hola, buenas tardes.
    En primer lugar, enhorabuena por el artículo.
    Quería saber si me puedes orientar como copiar la class CSS de un widget a otro. Es decir: tengo el widget Id=»front-page-6 con la Class=»front-page-widget front-page-6″ y me gustaría que el Widget denominado «Before Footer» tuviera la Class que te he comentado anteriormente.
    Espero haberme explicado y que me puedas ayudar.
    Muchas gracias por adelantado.

    • Hola Alberto,

      Pues no es por eludir la pregunta, pero dependerá mucho de que Child Theme estés usando y de donde coja las clases.
      Pero, ¿Por qué quieres asignar esas clases? ¿Es por aplicar un determinado estilo a los widgets del área Before Footer?
      En ese caso igual te es más sencillo, ver que clase tienen los del área Before Footer y aplicarle el mismo estilo que a los de la clase front-page-6.

      La mayor parte de esas clases son asignadas a los widgets en función de donde los mostramos vía funciones PHP de nuestro child theme.
      Si aún así quieres aplicar esas clases, deberás revisar el theme para ver de donde le vienen esas clases al widget. Yo empezaría buscando en las funciones del archivo front-page.php, que probablemente tu child theme tenga.

      Si quieres dame más información, porque si he trabajado con ese theme en concreto igual lo conozco y puedo ayudarte.

      Espero haberte ayudado ;).

      Feliz finde!

Deja tu duda o comentario

Tu dirección de correo electrónico no será publicada.

¿Olvidaste tu contraseña?