• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir una clase de CSS personalizada a un listado creado con la función wp_list_pages

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).

Clases de CSS añadidas por defecto en la lista creada por wp_list_pages en WordPress.

¿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 1805 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:

Clase personalizada de CSS añadida al listado creada por la función wp_list_pages.

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. 😉

PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?