Debugging - trying to add search box to menus

Question

I have already asked a similar question at stackoverflow (https://stackoverflow.com/questions/22492292/add-filter-in-wordpress-how-do-i-know-if-it-is-run), but maybe that was the wrong place?

As you can see there I am trying to add a search box in the way I have seen recommended:

add_filter('wp_nav_menu_items','menu_search');
function menu_search($items){
  $search = '<li class="search">';
  $search .= '<form method="get" id="searchform" action="/">';
  $search .= '<input type="text" class="field" name="s" id="s" placeholder="Search" />';
  $search .= '</form>';
  $search .= '</li>';
  return $items . $search;
}

However I see no trace of the search box in the menu. In fact it looks like the code added to add_filter is not even run.

There are a couple of things I do not know here. I am doing this in a new theme, based on the underscore theme (see http://underscores.me/) since I needed a really light weight theme. I am starting to wonder if the code for filtering is run in the underscore theme. What is the best way to check that? (I do not know php debugging at all. I just added Debug Bar etc.) And did I miss something in the underscore theme here? I mean should I have added anything for it to run the filtering?

Answer 1

wp_nav_menu_items aren't mentioned in the codex, so there are no concrete description on how to use it.

wp_nav_menu_items can be found on line 347 in

wp-includes/nav-menu-template.php

$items = apply_filters( 'wp_nav_menu_items', $items, $args );

within wp_nav_menu.

In the codex, it states the following

Displays a navigation menu created in the Appearance → Menus panel.

So this means that wp_nav_menu_items is only fired when a navigation menu is present that was created in the "menus" panel, and not on the default navigation menu. It is a design flaw in my opinion. wp_nav_menu_items should actually be included in the default menu as well. This is also one aspect that is not mentioned in any of the tutorials I've tested.

There is another filter that I've tested, wp_list_pages, that seems to work as expected.

There is a problem with your code though as well. When I add it to the default nav bar, any searches I do sents me to my db. Actually again. I could not get proper examples to work. I eventually found this code in a plugin called search-box-on-navigation-menu.

<?php
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li>' . $searchform . '</li>';

    return $items;
    }
?>

For this code to work on the default nav bar, just add the following line to the code add_filter('wp_list_pages','add_search_box', 10, 2);, so your end code will be

<?php
add_filter('wp_list_pages','add_search_box', 10, 2);
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li>' . $searchform . '</li>';

    return $items;
}    
?> 

Hope this help

Answer 2

You can also use this

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
    $items .= '<li>' . get_search_form( false ) . '</li>';
    return $items;
}

Answer 3

This is a much simpler solution - add the following to your functions.php file:

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

In this function, you will see that the IF statement is checking for a desired location - specifically, this example is checking for the Primary Menu:

if( $args->theme_location == 'primary' )

You could also use something like this to determine which menu:

$args->menu->slug == ‘the_menu_slug’

If there is a primary menu, it returns whatever you have in the "return $items" quotes:

return $items."<li class='menu-header-search'>".get_search_form(false)."</li>";

In this case, I created a list-item and concatenated the get_search_form() WP function.

Most importantly, for this to be displayed in your menu as a list-item, you need to set the get_search_form() to false:

get_search_form(false)

This is because of the follow argument in the get_search_form() function:

$echo (bool) (Optional) Default to echo and not return the form. Default value: true

• Source (https://developer.wordpress.org/reference/functions/get_search_form/)

This will successfully achieve the desired search form in any particular menu.