How to add a search box to your menu with WordPress

How to add a search box to your menu with WordPress. In this video we’re going to show you how to add a search box to your menu in WordPress. This method will work with any WordPress theme. We will be using the Divi 4 theme from elegant themes. First thing we need to do is actually go to a page that has the search box on it, such as the default look page with any new WordPress install. I am using the Google Chrome browser for this demonstration today. It has the great inspector tools. If you right click on the search box and select inspect. The Chrome inspector will open up. Under the elements tab of the inspector you will see the HTML code for the form. Highlight and copy this code, as we are going to copy it into our menu system.

Navigate to your WordPress dashboard, go down to appearance and then menus. If you have an existing menu select it. If not, create a new one. We need to use the custom links tab on the left-hand side. Click the down arrow to open up the tab, in the URL box simply put a #. In the link text box paste the code that we copied from the search box earlier. Finally hit the add to menu button, and it will be added to the menu in the last available space. You can left click and reposition any menu item by simply dragging it to where you want it. Once completed hit the save menu button. Now when you visit this site you will have a search box in the menu.

Now that we have a search box in the menu, we’re going to go ahead and customize it a little bit and make it our own with a bit of CSS. Most WordPress themes have an area that you can enter custom CSS code for your site. We are using the Divi 4 theme, so we are going to enter a code in the custom CSS box, in the Divi theme options. Of course, you will need to do the CSS code that works for you. That is how to add a search box to your menu with WordPress.