Add The WordPress Search Field into Your Primary Menu Bar

I was asked to add a search field into the menu bar for a recent project so in this tutorial I’m going to show you how I did  it. Having the search field in the menu bar gives your site’s visitors a quick and easy way to search your site. This tutorial is really easy, there’s no php, just a little HTML and some CSS to make it look pretty.

The Example

The site I used this on was for a small bookstore and part of the design brief was a search field in the primary menu bar. This is what it looks like:

Step 1: Get the HTML from the Existing WordPress Search Field

The first step in this process is to get the HTML of your site’s existing search field. I’ve placed the HTML below but for the curious I will explain where it came from. The easiest way to get this HTML is to use Chrome’s Inspector Tool. Begin by finding the search field on your site. Navigate to http://yourdomainname.com/?s= and you’ll be presented with the stock search field together with search results. Once you’ve found the field, right click on it and select Inspect. Chrome will then present you with the following:

Now, right click on the line the starts with <form role=”search” and then choose Edit as HTML. Now copy that HTML. It should look like this:

If you’d like the add placeholder text into the search field you need to remove the line <label class=“screen-reader-text“ for=“s“>Search for:</label> and add placeholder=”Find what you’re looking for:” into the first input field as in the example below:

Please remember that if you’re using the HTML I’ve provided, you’ll need to change the domain name in the action field in the first line.

Step 2: Add The Menu Item

Okay, you’ve got the HTML, now it’s time to add this thing to your menu bar. It couldn’t be easier… just head on over to your WordPress Dashboard, and find the WordPress Menus page (Appearance > Menus). Now add a custom menu which includes the HTML you’ve just copied. Here are the three steps you’ll need to take:

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

Once you’ve done all that, click the Add to Menu button. Now all that’s left to do is to remove the URL and save your menu. You would remove the link by clicking on Custom Link and then deleting the contents of the URL field.

Step 3: Making it Look Pretty

Okay, you’re nearly done. Out of the box, the search field doesn’t look so pretty so let’s put some lipstick on this thing. Add the following CSS to your child theme’s style sheet or add it to the Divi Custom CSS field in the Theme Options tab (Divi > Theme Options > Custom CSS).

At this point you’ll probably want to play around a little and get the button to match the color scheme of your site. I’ll leave that up to you to play around with.

The End

Now wasn’t that easy? Now you have a cool little search field in your primary menu bar. 

The inspiration for this tutorial came from a video by System 22 I.T. Solutions called Divi – Add a Search Box to the Divi Theme Menu or Any WordPress Theme Menu.

Photo by Sylwia Bartyzel on Unsplash