How to Add Header Navigation Search in WordPress?

Nowadays, it needs a huge effort to bring organic users to a website. After users land on your site, it is important to offer links to other relevant pages. Though you can add related posts in WordPress, it is good idea to use a site wide search box on the header navigation menu area. This will allow uses to search and get the required information if they are not finding on the current page. It will be also useful on mobile devices where sidebar will go below the content area.

Adding Header Search Box in WordPress

WordPress offers a “Search” block which you can insert anywhere on the site. This is useful to add search box in header section if you are using full site editing with block-based theme. If you are not using  block-based themes, then your theme should provide an option to add search icon or box in the navigation. Otherwise, you should use a third-party plugin to add the feature.

1. Add Search Block in Header Template of Block Themes

Block themes offer template parts which you can edit and add any available Gutenberg blocks.

• Go to “Appearance > Editor” section in your admin panel. If you are not seeing this menu item, then you are not using block theme and go to method 2 or 3 explained in the below sections.
• Directly click on the top navigation menu area in the preview to start editing the header. Otherwise, select “Template Parts” under “Design” section from left sidebar.

• After that, select “Header” option and then finally click the pencil icon to edit the header area.

• Select the full navigation menu section and then click the + icon to add a new block.
• Type “search” in the box to filter Search block and insert it in the header.

• Customize the Search block to remove the label, enter placeholder text, change the button with lens icon and select the button position inside / outside.

• You can also change text size, colors and border of Search block from the “Settings” sidebar.

• When you are done, click the “Save” button and then again click “Save” button to save the changes to header template.

• Now, click the WordPress icon showing on top right corner to close the editor and go back to admin panel.
• Open the site in a new browser tab and you will find the search box in the header navigation area.

2. Insert Search Box in Header with Non-Block Themes

Most premium and free WordPress themes are non-block based and allow you to add the search icon in the navigation. Here are some examples with Astra and GeneratePress themes:

• Astra Theme – go to “Appearance > Customize > Header Builder” and click the + icon to add “Search” box to the required position in header. You can also customize the visibility on desktop, mobile and tablets to show or hide the icon.

• GeneratePress Theme – go to “Appearance > Customize > Layout > Primary Navigation” section and select “Enable” from dropdown for “Navigation Search” option.

Since this is theme specific setting, you should navigate through your theme panel or in customizer to find the option.

3. Insert Header Search with Plugin in Non-Block Themes

Make sure to first check whether your theme has an option to enable the search before you install a plugin for this purpose. If your theme does not support, then you can use SearchWP Modal Search Form plugin for this purpose. Go to “Plugins > Add New” section to install and activate SearchWP Modal Search Form plugin.

By default, the plugin will enable search form on your site. You can check this by going to “SearchWP” menu and customize other available settings.

• Enable Modal Form – make sure this option is checked.

• Include Styling – select “Positioning and visual styling” option to use the styles from the plugin. If you have any problem in alignment of search box on the published site, then you can try “Positioning styling only” or “No styling” options.
• Full Screen Mode – enable or disable as per you need. This will open the search form in full screen covering all background portion.
• Disable Scroll – enable to turn off background scrolling when the search modal form opens.
• Hide Announcements – enable this to turn off plugin announcements.

Click the “Save Settings” button showing on the bottom of the page to apply the changes you have made.

3.1. Adding Search in Header Menu

After customizing the plugin settings, go to “Appearance > Menu” section and select your primary menu. Under “Add menu items” section, expand “SearchWP Modal Search Forms” option. Select “Native WordPress” engine and click the “Add to menu” button.

This will add “Search” option in the menu. Change “Navigation Label” to “Search” and click on “Save Menu” button. If your theme supports, you can add simply add a lens icon without any navigation label.

Open your site in a new browser tab and check that your header navigation will have a search item added by the plugin. Click that “Search” menu and you will see a modal form appears. Type your query and click the lens icon to get the search results.

Remember, this plugin will work only on non-block based themes as “Appearance > Menus” section will not be available on block themes. You can also add AJAX Live Search feature using another SearchWP Live Ajax Search plugin.

Final Words

Adding search box in header navigation menu is easier in WordPress sites using block themes. If your non-block based theme does not support header search, then use SearchWP plugin to add the feature.