Anteriormente habíamos visto, Cómo agregar enlaces de login y logout al menú de WordPress, usando un código similar podemos agregar cualquier elemento HTML como parte del menú, en este artículo veremos cómo agregar un formulario de búsqueda en un menú de WordPress
Resultado Final
El formulario de búsqueda será parte de los ítems del menú principal, al final obtendremos algo similar a la siguiente imagen:

Veremos dos maneras de lograr esto, las cuales se detallan a continuación.
Opción 1 – Código de formulario insertado en menú
Este primero caso nos ofrece mayor flexibilidad, ya que insertaremos directamente el código HTML y PHP del formulario como parte del ítem de menú.
add_filter( 'wp_nav_menu_items', 'dcms_item_search', 10, 2);
function dcms_item_search( $items, $args ) {
if ($args->theme_location == 'primary') {
$items .= '<li class="menu-item item-search">'
. '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">'
. '<label>'
. '<span class="screen-reader-text">' . _x( 'Buscar:', 'label' ) . '</span>'
. '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Buscar …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
. '</label>'
. '<input type="submit" class="search-submit" value="" />'
. '</form>'
. '</li>';
}
return $items;
}
En el código anterior
- Usamos el filtro wp_nav_menu_items , con este filtro se usa la función dcms_item_search, la cual tiene dos parámetros y se ejecutará con la prioridad 10 por defecto
- Dentro de la función dcms_item_search comprobamos si estamos trabajando en el menú principal, esto se logra a través de la comprobación del registro de menú, en nuestro caso ‘primary’
- Luego agregamos el nuevo código HTML, en nuestro caso será un formulario de búsqueda, este código lo concatenamos en el parámetro $item que posteriormente se retornará.
Opción 2 – Código de formulario reutilizado del theme
En este caso reusamos el código del formulario que tiene el theme, usualmente el código estará en el archivo searchform.php, llamamos al código del formulario a tráves de la función get_search_form()
add_filter( 'wp_nav_menu_items', 'dcms_item_search', 10, 2);
function dcms_item_search( $items, $args ) {
if ($args->theme_location == 'primary') {
$items .= '<li class="menu-item">'.get_search_form( false ).'</li>';
}
return $items;
}
Código CSS
Finalmente para darle un aspecto más adecuado al formulario de búsqueda que se mostrará en el menú, podemos usar el siguiente código CSS:
.menu-item .search-form input{
width: 80%;
padding: 0;
height: 32px;
padding: 8px;
border-radius: 6px;
}
.menu-item .search-form input::-moz-placeholder {
color: #ccc;
font-weight: normal;
}
.item-search{
float: right;
margin-top: 20px;
}
.menu-item .search-form input[type="submit"]{
width: 32px;
height: 32px;
padding: 0;
margin:0;
margin-left: 10px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 18px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Feedbin-Icon-home-search.svg/36px-Feedbin-Icon-home-search.svg.png);
}
¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores
Gracias por el buen artículo, escribo porque necesito tu ayuda. Estoy probando un tema en una web de prueba, aquí está la url http://money.pcriot.com/. Me gustaría agregar el buscador en el menu pero no puedo lograrlo. Explico mejor, el buscador aparece pero no cumple su funcion cuando esta entre los items del menu. Si aquí le pongo get_search_form( true ) funciona perfectamente, pero de hecho no esta en el menu. Espero tu respuesta y sigues así
Es por el z-index, hay una capa por encima y no te deja trabajar con el formulario, en el código HTML de la etiqueta form agrega algo como : style=”z-index:9999;position:relative;”