How to Add a Search Bar to WordPress Menu

You have set up your new site with your WordPress theme and would like to add a search option to your navigation menu?

With WordPress, you have the possibility to add a search feature on your website sidebar, footer, and other widget ready areas, but unfortunately you can not add one in your menu.

In this article, we will show you how to easily add a search bar to your WordPress menu using a single plugin and without having to code anything.

Adding the Search Bar to the Main Navigation

First, you will need to install and activate the Ivory Search plugin.

Go to Plugins > Add new, then from the search bar, search for Ivory Search plugin, install and activate it.

install activate ivory search plugin

After activating the plugin, go to Ivory Search > Settings page to configure the search bar to your WordPress menu.

Click on the “Select Menu” tab, then simply toggle the menu where you want to add the search bar.

Then from the “Form Style” tab, select the style of the search form. If you just want a search icon next to your menu select the dropdown style.

Edit the search function ( Optional )

Go to Ivory Search > Search Forms page to create or edit the search option.

You don’t need to create a new form since the plugin automatically adds the default search form.

The plugin search settings allow you to select which content of your website should be included in the search results.

The ‘Includes’ section lets you select which content should be included in the search query. You need to review the options and click the Save Form button.

Next, the opposite, the ‘Excludes’ section lets you define the content that you don’t want to show in search results. Once done, click the Save Form button again to save your settings.

If you want a instant search feature, then click on the AJAX section, there you can enable the AJAX search ( Instant search ).

The ‘Options’ section lets you define how many results to show per search page, the order of the results and highlight feature.

Better Design.

Unfortunately this plugin may not give you good result depending the theme you are using.

If you have CSS and HTML knowledge, then you should be able to modify the form to get better result.

If you don’t know how to code then you might want to opt for a premium theme.

Most of the premium themes give you the possibility to add a “Search” option to your theme menus.

The following theme Cesis & TheFox have a powerful theme options panel that let you choose where you want to add a search form in one-click and easily let you edit the search form visual.

Conclusion

You should be able to add the search form to your menu if you followed this tutorial but you may need to modify the css / theme to get a design that fits your current theme.

If you need help to integrate or add a more complex search form to your site contact our team.

If you liked this article you can follow us on Twitter and Facebook.

Add Comment