Search Form – Primary menu using JS

  • hebhansen

    (@hebhansen)


    6 years, 1 month ago

    I have found some code I want to add to my Snippets.

    Search Icon appears in primary menu, but Javascript drop down search field does not appear. Can anyone locate the error?

    //Add the Search Form and Javascript
//Set theme_location parameter by the menu locations theme offers - Is it in Primary menu? 
add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 
function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}
//Adding Javascript
add_action( 'wp_head', function () { ?>
	<script>

		add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 
function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}
	</script>

    It would be a great help thx 🙂

Viewing 1 replies (of 1 total)
  • uri

    (@icelayer)

    6 years ago

    I’m not sure exactly where the issue is but it seems to start here:

    //Adding Javascript
add_action( 'wp_head', function () { ?>
	<script>

    You can try the following, be sure to do this on the local machine or a staging environment or do a Back-Up beforehand

    //Add the Search Form and Javascript
//Set theme_location parameter by the menu locations theme offers - Is it in Primary menu? 
add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 
function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}
//Adding Javascript
add_action( 'wp_head', 'addjs_header_code');

// start php to add Javascript
function addjs_header_code(){ ?><script>
// Display fontawesome search icon in menus and toggle search form 
function add_search_form($items, $args) {
  if( $args->theme_location == 'primary' )
         $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
         return $items;
  }
    </script><?php 
} // end of php
Viewing 1 replies (of 1 total)

The topic ‘Search Form – Primary menu using JS’ is closed to new replies.