Agregar búsqueda en un menú de WordPress

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);
}