Extend WordPress menus with search function

In this post, I'll show you two plugins that you can use to expand the navigation of your website with WordPress search. Both plugins allow you to add the search function to an existing WordPress menu, but have different approaches.

Depending on the website and its content, a search function is more or less important for visitors. A search field in a prominent and easy-to-find place is particularly useful if the search is to be sought relatively frequently.

Basically, the WordPress search can be displayed as a widget in every sidebar. Some themes also allow a search form in the header of the website - either as a separate theme feature or via a widget area in the header.

If you lack these options, you can add the WordPress search to the navigation with additional plugins by expanding a selected WordPress menu with a search field.

In this post I present two plugins with different approaches for this.

Expand WordPress menu with search field

The first plugin I tested is Bop Search Box Item Type For Nav Menus:

Adds search box as a choice of item in navigation menus admin area.

By: The Bop

( 23 )
Last updated: 4 years ago
3,000+ active installations
Compatible up to: 4.8.15

In addition to the menu elements such as static pages or categories, the plugin adds a new menu element Search Box to display the search function in the admin area:

This means that the search can be inserted in any number of menus. The labeling of the menu item will be used later in the search submit button.

The plugin now shows the normal WordPress search form with input field and button in the menu.

Very often the styling of the theme is not based on a search field in the navigation. Whether the plugin harmonizes with the theme can only be determined by trying and testing. The plugin may have to be adapted a little with your own CSS code.

For TwentySeventeen I used the search field with this CSS snippet in my tests:

 .main-navigation li.bop-nav-search { float: right; margin: 0.5em 0; } form.bop-nav-search div #s { display: inline-block; max-width: 180px; padding: 0.2em 0.6em 0.4em; }

The result:

Add WordPress search with content overlay

The second plugin, TB Search in Menu, has a slightly different approach.

Instead of a search field, it shows a normal menu link for the search function in the navigation. Clicking on it opens an overlay over the entire screen and the search term can be entered.

The plugin is also available for download in the WordPress plugin directory:

This plugin adds a search item in the nav menu of your choice

From: theme.blue

( 6 )
Last updated: 5 years ago
600+ active installations
Compatible up to: 4.4.24

Unfortunately, the information on the plugin page is a bit sparse.

That's why it took me a while to find the plugin's settings. These are located in a new section in the Customizer:

In the options, a menu must first be selected in which the search function is to be added. In addition, the labeling and colors of the search can be defined.

Due to the design of the plugin, the search can only be added in a single navigation. The link for the search is also always attached as the last menu item.

The search function is a normal link in the menu and should therefore work without any problems with any theme, without having to make your own adjustments with CSS.

After clicking on search, the overlay opens and the visitor can enter the search term:

The overlay for the search can be closed with a close button or with the escape key.

Conclusion

Both plugins are suitable for adding the WordPress search function to a navigation menu. Which approach is more promising depends on your own preferences and the interaction of the plugins with the theme used.

I recommend just trying out both plugins.