---
title: "Zerif Lite: ¿Cómo añadir una barra de búsqueda en el menú superior?"
url: https://caribdis.net/2016/01/17/zerif-lite-como-anadir-una-barra-de-busqueda-en-el-menu-superior/
date: 2016-01-17
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 253
---

# Zerif Lite: ¿Cómo añadir una barra de búsqueda en el menú superior?

Continuamos con el tutorial número ocho para personalizar el tema **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/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](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

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ú](//caribdis.net/wp-content/uploads/2016/01/zerif-search-1024x134.jpg)](https://caribdis.net/wp-content/uploads/2016/01/zerif-search.jpg)

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](//caribdis.net/wp-content/uploads/2016/01/zerif-search-menu.jpg)

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](//caribdis.net/wp-content/uploads/2016/01/zerif-search-2-1024x134.jpg)](https://caribdis.net/wp-content/uploads/2016/01/zerif-search-2.jpg)

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

![Cuadro de búsqueda en móviles](//caribdis.net/wp-content/uploads/2016/01/zerif-search-phone.jpg)

**Tutorial original en inglés: [How to add a search bar in the top menu in Zerif](http://docs.themeisle.com/article/78-zerif-adding-a-search-bar-in-the-top-menu)**