How to add WordPress search field in primary menu bar without using a plugin.

A search bar in the top navigation menu is very important and most themes support this feature. However if you are developing your own theme or if the theme you are using does not have a search field in the primary menu then am going to show you how you can add the search field without using any plugins.

First you need to get the HTML for the search field for your theme. This is done using Chrome DevTools. Using Chrome go to the URL http://yourdomainname.com/?s= This will open the search results page of your theme where you can see the stock search field and search results.

Right click on the search field and select Inspect to to open Chrome DevTools highlighting the form element.

Look for the line that starts with <form role=”search” and then choose Edit as HTML.

This will bring up the html code for the form element as shown below;

You can now copy and paste this code to a code editor and make changes if you like.

This code will be different depending on the theme you are using but in case you decide to use the same HTML code like mine above, you’ll need to change the domain name in the action field in the first line.

Adding search field to WordPress Menu Items.

Open the WordPress Dashboard and and go to Appearances>Menus to access the WordPress Menus page and add the HTML code above to the primary menu by following these steps;

  • Click on Custom Links
  • Add a hash to the URL
  • Paste the HTML into the Link Text field.

Click Add to Menu button and you’ll see the HTML code added as one of the items in the menu and will appear as shown below.

Before saving the menu you need to first remove the link URL.

Click on Custom Link and then delete the contents of the URL field.

You can make changes to the HTML code in the Navigation Label field, for example, in my case I replaced the Search label with the font awesome search icon.

Changing the appearance of search field using CSS.

When you access your navigation bar now you should be able to see the search field there but most probably not looking the way you would like it to be. You need to add some CSS styles to your child theme’s style sheet or add it to the Custom CSS field in the Theme Options tab.

I used the CSS style below to improve on the appearance of my search bar.


.wp-block-search__label { 
  width: 100%;
  display: none; /*Remove Search label*/
}
.wp-block-search__button-outside{
  width: 250px;
}
.wp-block-search__button{
  border-radius: 50%;
  border: none;
  background: #fff;
  margin-left: 5px;
  padding: 0;
}
.wp-block-search__button i{
  font-size: 25px;
  color: #ccc;
}

input[type="search"]{
  border-radius: 30px;
}

After adding my custom CSS then my final navigation bar appeared as shown below.

You also need to add some media queries to cater for mobile devices which makes this method of adding search field to the primary navigation menu better with custom made themes because for already made themes it may be a challenge coming up with the right media queries to fit in the theme structure.