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.

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

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