Include WordPress search in the navigation menu

This short tutorial shows how you can use a little code in a child theme to add the WordPress search to the navigation menu of your theme. All you need is a function to output the search field in the WordPress menu and some CSS and JavaScript.

The aim of this guide is to create a drop-down search box in the WordPress menu, similar to the dropdown menus for normal links in the menu. This allows the search to be placed in a prominent place in the theme.

WordPress search in the navigation menu

The starting point is a child theme for TwentySixteen. My step-by-step instructions for creating a child theme will help you create a child theme .

The code examples also work with other themes; however, the CSS classes and menu location must probably be adjusted.

1. Add WordPress search in the navigation menu

First, we create a function in the f unctions.php of Childthemes which provides for the issuance of a new menu item for the search in the navigation.

To do this, we apply the new function to the WordPress filter wp_nav_menu_items , which filters the HTML output of the WordPress menus.

There are two parameters available:

  • $ items - HTML output of the menu as a string
  • $ args - arguments of the menu as an object

The finished function looks like this:

 function theme_slug_add_search_menu_item( $items, $args ) { // Return early if menu is not primary menu. if ( 'primary' !== $args->theme_location ) { return $items; } // Add Search menu item. $search = '<li class="nav-search menu-item">'; $search .= ' <a class="nav-search-link">' . esc_html__( 'Search', 'theme-slug' ) . '</a>'; $search .= ' <div class="nav-search-form" style="display:none;">' . get_search_form( false ) . '</div>'; $search .= '</li>'; return $items . $search; } add_filter( 'wp_nav_menu_items', 'theme_slug_add_search_menu_item', 10, 2 );

What's happening?

Since the search function should not be displayed in all WordPress menus, we first check whether it is the primary menu of TwentySixteen. For this we use the variable theme_location from $ args .

Then we add our search function only for the primary menu.

WordPress menus are output as a list, which is why we add our new menu element as a list item with <li> . Next to the link, we add a div element with the WordPress search function, which is loaded with the get_search_form () function.

The specification of display: none is necessary so that the search field is not displayed by default. The search box should only be displayed when you click on the link. In the last step, we take care of this functionality with a little JavaScript.

Our HTML is then attached to the existing output ( $ items ), ie our new link for the search always appears as the last element in the menu.

2. Make styling for search field

In the style.css of the child theme we can now do the styling for our search function.

It is important to use position: absolute for positioning the search box. This removes the search from the normal flow of text and has no influence on other elements - this means that there are no shifts in the layout later when the search is displayed.

 .main-navigation .nav-search .nav-search-form { position: absolute; right: 0; margin: 0.25em 0 0; padding: 1em; background: #fff; border: 1px solid #ddd; min-width: 300px; }

We separate the search box from the rest of the design and background with a little space, a minimum width and a frame. The actual search form uses the Twenty Sixteen design and therefore does not require any extra styling.

Search field

In addition to the box for the search field, the menu link can also be designed, e.g. B. by adding a search icon. Twenty Sixteen integrates the Genericons Font by default, which we can use for this.

 .main-navigation .nav-search .nav-search-link::before { margin-right: 0.25em; font-family: "Genericons"; font-size: 22px; line-height: 1; vertical-align: middle; content: '\f400'; }

The menu now shows our search link as the last element:

Menu with search link

3. Implement search function with jQuery

What is missing now is the opening of the search box by clicking on the menu link.

For this we use some JavaScript and jQuery:

 $( '.main-navigation li.nav-search a.nav-search-link' ).on( 'click', function() { $( '.main-navigation .nav-search .nav-search-form' ).toggle(); });

A simple click event for our menu link and the jQuery function toggle () for displaying the search field are sufficient.

Further gimmicks are an automatic focus of the cursor on the input field and the automatic closing of the search box when a click outside of it is made.

My finished JavaScript file looks like this:

 /** * Menu Search JS */ ( function( $ ) { $( document ).ready( function() { /* Show Search Form when search link is clicked */ $( '.main-navigation li.nav-search a.nav-search-link' ).on( 'click', function() { $( '.main-navigation .nav-search .nav-search-form' ).toggle().find( '.search-form .search-field' ).focus(); }); /* Do not close search form if click is inside nav search element */ $( '.main-navigation li.nav-search' ).click( function(e) { e.stopPropagation(); }); /* Close search form if click is outside nav search element */ $( document ).click( function() { $( '.main-navigation .nav-search .nav-search-form' ).hide(); }); } ); } )( jQuery );

This can now be saved under /js/menu-search.js in the child theme.

Another PHP function in functions.php ensures that the JavaScript file is embedded in the footer of the theme.

 function theme_slug_search_menu_js() { wp_enqueue_script( 'theme-slug-menu-search', get_stylesheet_directory_uri() . '/js/menu-search.js', array( 'jquery' ), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_slug_search_menu_js' );

As a result we get the desired, foldable search function in the WordPress menu:

Expandable search in the WordPress menu

Alternative options

A few weeks ago I already presented two plugins, which can also expand any WordPress menu with a search function . The plugins integrate the search field directly in the menu or show the search field as a content overlay and thus offer two completely different approaches than this tutorial.