Mostrar la caja de búsqueda en el menú de WordPress con Genesis

Si en tu web el blog es una parte muy importante o tienes mucho contenido y tus usuarios acostumbran a utilizar el buscador para encontrar lo que necesitan, es vital tener la caja de búsqueda en un lugar relevante de la web y siempre visible.

Además de en la cabecera o la sidebar, otra opción muy utilizada y apropiada es incorporarla al menú principal de tu web.

Aunque muchos de los themes para WordPress incorporan ya esa opción en sus configuradores, en el caso de Genesis Framework no es así, pero puedes hacerlo fácilmente a través de algo de código y un poco de CSS:

Código en functions.php:

add_filter( 'wp_nav_menu_items', 'search_in_menu', 10, 2 );
function search_in_menu( $menu, $args ) {
 
 if ( 'primary' !== $args->theme_location ) */Modifica 'primary' por 'secundary' si lo quieres añadir en el menú secundario de tu web.
 return $menu;
 ob_start();
 get_search_form();
 $search = ob_get_clean();
 $menu .= '<li class="right search">' . $search . '</li>';
 
 return $menu;
}

Este código añadirá la caja de búsqueda en el menú con los estilos predefinidos que lleve tu tema.  Para darle un aspecto más acorde con su situación en el menú, podrás hacerlo desde el archivo styles.css del child theme.

Te dejo como ejemplo los estilos que utilizo yo en mi child theme:

.genesis-nav-menu .search-form input {
   border: 0;
   border-bottom: solid 1px #ccc;
   margin:0 0 0 20px;
   padding-top: 0px;
}
.genesis-nav-menu li.search { vertical-align:middle; }
.genesis-nav-menu li.search:before {
  font-family: 'Ionicons';
  content:'\f2f5';
  display: inline-block;
  float: right;
  color: #ccc;
  font-size: 1.6em;
}

Para el icono de la lupa, yo utilizo Ionicons porque ya lo tengo cargado en el tema para otros iconos.

Para poder utilizarlo, debes cargarlo desde el archivo functions.php:

wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );

Pero ojo, si en tu tema utilizas otra fuente de iconos, busca el código correspondiente al símbolo de buscar que quieras y utilízalo. No cargues innecesariamente otra fuente de iconos a tu web sólo por un símbolo.