Descubre en este tutorial cómo añadir una clase CSS personalizada a un listado creado con al función wp_list_pages de WordPress mediante código.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes hacer sugerencias para futuros tutoriales.
A raíz del tutorial sobre cómo mostrar un listado de lecciones de un curso en WordPress mediante un shortcode, Jonathan me preguntaba lo siguiente:
Vuelvo con este asunto: ¿cómo agrego una class o selector en el array de php para luego darle formato con css?
Tal y como le comenté, el array de la función wp_list_pages no admite añadirle una clase de CSS personalizada. Pero lo que si hace es añadir las clases: page_item y page-item-xxxx (donde xxxx es el ID de la página).
¿Con eso no tienes suficiente?
Entonces puedes agregar una clase personalizada usando un filtro de WordPress así:
Código para asignar una clase de CSS personalizada a un listado creado con la función wp_list_pages
Añade el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 1203 snippets de esta web,
identifícate o suscríbete aquí.
En este bloque usas el filtro wp_list_pages para agregar la clase de CSS «clase-personalizada»., pero puedes sustituirla por la clase que tú quieras.
Ahora, si inspeccionas el código del listado, verás que la nueva clase se ha añadido:
Conclusión
Gracias a los hooks puedes añadir una clase personalizada a un listado creado con la función wp_list_pages de WordPress.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
