Add Search to WordPress Menu

In this tutorial, we are going to add search to the WordPress Menu.

This is not as easy as you might think!

There is no easy way in the WordPress admin area to add the search bar. But fear not, I will show you two ways you can add the search bar yourself.

One option will have you installing an off-the-shelf plugin. The second option is adding some code to your site.

If you are feeling adventurous you could always take this code and create your plugin. We will look at how to do this later.

Let's get started.

How to Create a Custom Menu in WordPress

Let us start by getting a shared understanding of WordPress menus. You can create a WordPress menu by using the admin area.

To access your menus visit Appearance->Menus from the side menu.

It depends on your theme where and when the menus will appear on your site.

For many themes, the menus are not shown by default. You have to enable them. If that is the case then you will see an empty menu section like this:

Let's start by creating a menu that will list the categories on your blog. To do this make sure you are in the Appearance->Menus section and give the new menu a name.

For this example let's call it “Categories” and click the “Create Menu” button.

Underneath the menu settings, there will be a list of locations where the menu can appear on your site. This will change depending on what theme you have installed. Here, I am using the “Twenty Seventeen” theme so I will choose the “Top Menu” option.

This will add a menu to the top of the page under the banner.

Next, to add your categories to the menu click the “categories” button. This is underneath the “Add menu items” section.

Click “select all” and then the “Add to menu” button. If you only want to show some of your categories then you can select them here. Once added your menu settings will look like this:

The menu will be on the site like this:

We now have a WordPress menu set up, step 1 is complete. Next, we can add a search bar to this menu.

How to Add a Search Bar to the Menu

Once you have your menu setup you can now add the search bar to the menu.

There are two ways you can do this:

1. Add code to your site via the functions.php file or by creating your plugin
2. Install a pre-made off-the-shelf plugin from the Wordpress plugins area

I always recommend that WordPress owners install as few off-the-shelf plugins as possible. Many of these off-the-shelf plugins will slow down your site. So, to start we are going to look at adding the code to the site. This code will add the search bar to the menu we created earlier.

It does mean that you have to get comfortable with editing PHP code. For some, this is a step too far and that is fine. Jump to the plugin section below to see how you can do the same with the Ivory Search plugin. Yet, as a site owner, it is worth the investment to learn how the basics of the code work, which we will cover next.

The code to add a search bar to your menu is quite simple. In fact, it is only 4 lines long:

  function pagedart_search_menu( $items, $args ) {
    return "<li class='menu-header-search'>".get_search_form(false)."</li>".$items;
  }
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);

Here we create a new function called pagedart_search_menu. This returns the search bar by calling the function get_search_form(false).

The last line adds the filer to the wp_nav_menu_items menu call. This filter will run our function when the menu is about to display and add the search bar. These filters are how in WordPress you can hook into the parts of your site and change the look and feel.

You can take these four lines of code and add them to the end of your functions.php file. You can find this file in the Appearance->Theme editor section of your WordPress admin area.

You can then add the lines to the end of the file and click “Update file”:

Although this works I always recommend that you create a WordPress plugin. This is because as soon as you change themes you will lose any custom code in your functions.php.

To create a plugin follow our guide and use the below code for the plugin:

<?php
  /*
   Plugin Name: PageDart - Search Menu 
   Plugin URI: https://pagedart.com
   Description: Add a search bar to the menu on your WordPress site
   Version: 1.0
   Author: Steve
   Author URI: https://pagedart.com
   License: MIT
  */

  function pagedart_search_menu( $items, $args ) {
    return "<li class='menu-header-search'>".get_search_form(false)."</li>".$items;
  }
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);
?>

The code and function are the same as earlier. The only change is that we add the code to a .php file and add some metadata to the top of the file. The other advantage of creating your plugin is that you can enable and disable it as needed. This is from the plugins list in the admin area.

Once you have added the code you will see the search box on your site like this:

If this seems like too much and you are not happy making these changes that is ok.

Next, let's look at using an off-the-shelf plugin next.

WordPress Plugin to add Search to WordPress Menu

If you are not happy editing code in your functions.php then you can still add a search bar to your menu. The plugin that I recommend for this is the Ivory Search plugin.

This plugin does a lot more than adding a search bar to your menu. It is a fully-featured search plugin that allows you to make any change to how search works on your site.

For this reason, it can be a bit tricky to find the setting for adding the search bar to the menu. We will look at this next.

Remember, before you install any plugin make sure that you have a backup.

To install Ivory Search go to your WordPress Admin area and select Plugins->Add New.

Then search for “Ivory Search” in the search box.

To Install it click “Install”.

Once the installation is complete, click activate and you will see the plugin in the list.

Next, click on settings and you will see a security setup box. If you are trying this out then choose “skip”.

Now the plugin is setup you need to change the menu settings. Go to the side menu and click on Ivory Search->Settings:

To enable the search bar in the menu you will need to click on the “Menu Search” button.

Then you will see a list of all the menus on your site. Select the menus that you want the search bar to appear on:

Then click “Save”.

Congratulations! Visit your site and you will see that you have a search bar in the menu.

Wrapping Up, Add Search to WordPress Menu

In this tutorial, we have covered how you can add search to WordPress menu on your site.

We looked at what a WordPress Menu is and how your site can have more than one.

When installing a search bar to the menu you have a few options:

1. Add code to the functions.php file
2. Create your plugin using the same code
3. Install an off-the-shelf plugin such as Ivory Search

I always recommend that you try to keep the number of plugins installed on your site to a minimum. This is because having many plugins can slow down your site.

If you can create your plugin this is the best option as you won't lose the changes when you change the theme.

We looked at installing Ivory Search which has many settings to enhance search in many ways. You can use it to enable search in the menu by going to the settings. Then select the menu that you want the search bar to appear in.