• 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 un campo de búsqueda en la página de blog de Genesis Sample

Aprende con este tutorial cómo colocar un campo de búsqueda en la página de blog en del child theme Genesis Sample mediante código.

Por defecto, el child theme de Genesis Sample no muestra ningún buscador en la página de blog. Sin embargo, disponer de una forma para buscar desde esta página puede ser muy interesante, especialmente si hay mucho contenido en ella, ¿no te parece?

De hecho, en el blog de mi página personal utilizo esta estrategia para facilitar la navegación a los visitantes:

Página de blog con formulario de búsqueda.

Voy a mostrarte cómo lo puse en práctica en mi propio Genesis Sample customizado, pero puedes usar el código siguiente para aplicarlo a cualquier otro child theme de Genesis.

Pasos para agregar una búsqueda al blog de Genesis Sample

1. Introduce el campo de búsqueda

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

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

Con este fragmento aprovechas el filtro genesis_before_loop y la etiqueta condicional is_home para colocar el campo de búsqueda justo antes de los artículos del blog.

Ya tienes la parte estructural resuelta, ahora vamos a por el diseño. 😉

2. Personaliza los estilos del campo de búsqueda

Una vez añadido, necesitas editar el CSS para que el nuevo campo se muestre de forma correcta en todos los dispositivos.

Para ello, añade el siguiente snippet al final del fichero style.css:

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

Con este bloque de código consigues que el campo de búsqueda y el botón se muestren en la misma línea y tengan un máximo de anchura de 700 píxeles.

Página de blog con formulario de búsqueda.

Además, este diseño también se mostrará correctamente en dispositivos móviles, en este caso ocupando el 100% del ancho.

Visualización del resultado en dispositivos móviles.

A pesar de que el tutorial está basado en Genesis, conseguir este resultado con cualquier child theme de Genesis.

Por cierto, si también quieres personalizar el texto que aparece en el cajetín de búsqueda puedes hacerlo siguiendo este otro tutorial.

Conclusiones

Si quieres añadir un campo de búsqueda en la página de blog en Genesis Sample o cualquier child theme de Genesis ahora ya sabes cómo hacerlo con un poco de código.

¿Prefieres que lo adapte a alguno de ellos en particular? Envíame la propuesta a través del formulario de contacto y prepararé un tutorial a medida.

Ventajas de ser suscriptor. 😉

Búsqueda CSS Genesis Framework Genesis Sample 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

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

¿Has olvidado tu contraseña?