En el tutorial de hoy vamos a configurar la barra de búsqueda en la cabecera de Altitude Pro Theme. Lo haremos con código y una buena porción de CSS.
Publiqué hace unos días un tutorial de como implementar esta barra de búsqueda en Genesis Sample. En esta ocasión lo haremos en Altitude Pro. Algo más complejo, pero el proceso es el mismo.
Pero antes de pasar al desarrollo os dejo unas capturas para que veáis los resultados.
Un par de capturas más. Esta vez de las versiones móviles.
Y con la barra activa.
Añadir el icono y el formulario de búsqueda
Al igual que en el otro tutorial, crearemos primero un archivo llamado custom-header-search.php. Lo incluiremos, con el siguiente código en la carpeta /lib de Altitude Pro Theme.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Con esto hemos implementado el formulario, que quedará oculto y el botón de buscar en la cabecera. Junto al menú principal.
Damos efectos y funcionalidad con JS
El siguiente paso será añadir el archivo JS para darle funcionalidad al formulario y lo efectos necesarios. Crearemos un archivo llamado custom-header-search.js y lo alojaremos en la carpeta /js de Altitude Pro Theme con el siguiente código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Editamos el functions.php
Maravilloso. Tenemos los archivos con su código correspondiente en sus carpetas. Ahora editaremos el archivo functions.php para llamar a estos archivos. Añade este código al final del archivo.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y ahora viene la parte mas compleja. No por la implementación, sino por el código en si mismo.
Estilos y maquetación
He tenido que maquetar la cabecera del theme de nuevo para que el icono de buscar no se quedase descolgado, ni el menú descuadrado.
Ahora la cabecera de Altitude Pro se quedará más compacta y recogida. En línea y no en columna como es la original.
A continuación el código CSS que deberás añadir al final del archivo style.css de Altitude Pro Theme.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusión
Al final no sólo hemos ganado la barra de búsqueda con ancho completo integrada en la cabecera, sino que ahora la cabecera queda más limpia y recogida.
En el tutorial de la barra de búsqueda en la cabecera de Genesis Sample, mencionaba que con variaciones se podría aplicar a cualquier otro Genesis Child Theme. Es a esto a lo que me refería.
¿Te gustaría verlo en otro Genesis Child Theme? Déjamelo dicho abajo en los comentarios o escríbeme un mensaje a través del formulario de contacto.
Para dudas con el código, deja tu pregunta abajo en los comentarios. 🙂 feliz día!