WordPress 3.0 introduced a new menu system that is easier to use and maintain straight from the user interface. While this added a lot of customization, it is not very intuitive to add elements that are unique, like a search bar. You could get the search bar there with CSS with position absolute, z-index, and margins, but this has multiple problems, in particular with the responsive websites. To avoid this, we can hook into wp_nav_menu_items filters.

Using the build in WordPress search

Adding this filter in functions.php will the the search bar at the end of the menu.

Using your own custom WordPress search

Same as above, add the following filter to functions.php.

Leave a Reply