WordPress: inserire la search box nel menu principale

Premessa

La search box fornita come widget standard nel tema di default di WordPress è senza dubbio un utile strumento per ricercare un determinato argomento all’interno del sito.

La naturale collocazione della search box è all’interno di una “plugin area”, tipicamente nella barra laterale destra. Esigenze di design potrebbero però portare alla necessità di eliminare la barra laterale e di conseguenza anche la search box. In questo caso, una possibile soluzione può essere quella di collocare la search box all’interno del menu di navigazione di WordPress. In questo modo, la search box rimane sempre a disposizione, senza occupare lo spazio della pagina.

Ecco quindi cosa bisogna fare per inserire la search box nel menu principale di WordPress.

Creare un tema “child”

La guida ufficiale di WordPress per gli sviluppatori (il “Codex”) contiene una pagina in lingua italiana che descrive come creare un tema child . Al termine di questa procedura nella cartella principale del tema personalizzato saranno disponibili i file functions.php e style.css.

Modificare il file functions.php

Modificare il file functions.php del tema child inserendo le seguenti istruzioni:

/***************************************************************************
* Inserisco la search-box nel menu
**************************************************************************/
function add_search_box( $items, $args ) {
  if ( $args->menu->name === 'Main menu' ) {
    $items .= "<li class='searchbox-position'>" . get_search_form( false ) . '</li>';
  }
  return $items;
}
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );

Come si vede, la search box viene inserita nel menu dal nome “Main menu”. Questo è il nome attribuito, al momento della sua creazione,  al menu in cui si vuole inserire la search box:

Modificare il file style.css

La search box è stata collocata in un elemento html <li> a cui è stata associata la classe class='searchbox-position'. E’ possibile fare riferimento a questa classe (oltre a quelle native) per impostare lo stile della search box.

Tutte le modifiche allo stile della search box vanno inserite nel file style.css del tema child. Ecco un possibile esempio di formattazione:

.searchbox-position {
  float: right;
  margin-right: 2em;
}
input[type="search"].search-field {
  padding: 0.2em;
}
.search-form .search-submit .icon {
  height:16px;
  width:16px;
  top: -9px;
}

Plugin WordPress

Se non si desidera creare un tema child, è possibile utilizzare uno dei plugin gratuiti di WordPress che ottengono lo stesso effetto.
Tra questi, il plugin Search box on Navigation Menu