Continuamos con el tutorial número ocho para personalizar el tema Zerif Lite, de ThemeIsle.

Depende del tipo de contenidos que se ofrezcan en el sitio, puede ser bastante útil incluir un pequeño formulario de búsqueda en la parte superior de todas las páginas: siempre a mano y siempre visible, ya que el menú de Zerif Lite queda fijo en la pantalla en todo momento. Con este breve código, estaremos en condiciones de incluir ese campo de búsqueda en pocos pasos.

Como recomendamos cada vez que necesitamos modificar los archivos del tema, debemos asegurarnos de que estamos usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

En el archivo functions.php del tema hijo, entonces, añada el siguiente código (antes del cierre de la etiqueta php, si lo hubiere):

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
    if( $args->theme_location == 'primary' )
    return $items.'<li class="widget widget_search">' . get_search_form( false ) . '</li>';
    return $items;
}

El resultado será el siguiente:

Campo de búsqueda en el menú

Vemos que el campo ha quedado un poco desalineado respecto del resto de los elementos del menú. Esto es porque está tomando los estilos del widget de la barra lateral.

Corregir márgenes

Para corregir esto, simplemente tendremos que añadir el siguiente código CSS (en el archivo custom.css o en el recuadro CSS adicional del Personalizador):

#site-navigation .widget_search .search-submit {
    top: -6px;
    right: -8px;
}

#site-navigation .widget_search input {
    padding: 6px 15% 6px 2%;
}

De esta manera, tendremos el campo de búsqueda integrado perfectamente en el menú:

Cuadro de búsqueda en el menú, con estilo

Mientras que en los teléfonos móviles aparecerá dentro del menú desplegable:

Cuadro de búsqueda en móviles

Tutorial original en inglés: How to add a search bar in the top menu in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web