• 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 CSS al conjunto de entradas en Genesis

Aprende con este tutorial a introducir una clase CSS personalizada que envuelva al conjunto de entradas en Genesis Framework mediante código.

Si quieres jugar con la forma en que se muestran las entradas, la mejor solución es crear una clase CSS propia que las contenga a todas.

Al crear un contenedor (div) que las envuelva puedes aprovecharte de CSS flexbox o grid para personalizar por completo su diseño.

De hecho, ya has usado esta técnica si has ejecutado alguno de los siguientes tutoriales para mostrar en formato rejilla:

  • Los post en el blog.
  • Las páginas de archivo.
  • O los resultados de búsqueda.

¿Te interesa? Entonces, usa el siguiente código.

Snippet para insertar una clase CSS personalizada que envuelva las entradas de Genesis

Añade la siguiente línea en functions.php:

Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.

Este fragmento utilizas el filtro genesis_before_while de Genesis para introducir un div con la clase CSS «.entry-wrapper» . Esto te permite crear un «envoltorio» para maquetar de forma específica el conjunto de entradas.

Conclusiones

Agregar una clase CSS personalizada que incluya el conjunto de entradas puede resultar muy útil para maquetarlas tal y como deseas.

Y ahora ya sabes cómo hacerlo con un simple snippet de código. 😉

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales de Genesis Framework? Cuéntamela en los comentarios (opción exclusiva para suscriptores).

Tutoriales relacionados

  • https://codigogenesis.com/mostrar-posts-rejilla-pagina-blog-maker-pro/
  • https://codigogenesis.com/mostrar-paginas-archivo-rejilla-genesis-framework/
  • https://codigogenesis.com/mostrar-resultados-busqueda-en-rejilla-genesis-framework/

CSS Genesis Framework PHP

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 identificarte o suscribirte.

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

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

close-icon

¿Has olvidado tu contraseña?