Yogesh Chauhan's Blog

WordPress: How to add a Search Icon in Menus with toggle effect using jQuery?

in jQuery & WordPress on February 21, 2021

We learned how to use add_filter to hook a function or a method to a specific filter action.

We also learned to use applt_filters to call the functions that have been added to the filter hook.

Finally, we learned to modify navigation menus. In this post, we are going to use the same hook function to modify the menu and create the toggle effect.

Let’s use the same examples code to add the search icon in the menus.

WordPress function.php code



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

function add_search_in_menu($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search-icon"></a><div class="search-form">'. get_search_form(false) .'</div></li>';
       return $items;
}


You can change the menu id and replace it with your WP menu id.

Style the form and icon

Note: This style is based on other elements in the menus as well as above and below the menus. Style your elements accordingly.


.search-form{
  display: none;
  width: 100%;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 9999;
  background: #fff;
}

.search-form input[type="search"] {
  width: 90%;
  height: 35px;
  padding-left: 3%;
  background: #d41242;
  border: none;
  border-left: 3px solid white;
  color: rgb(231, 230, 230);
}

.search-form input[type="submit"] {
  border: 1px solid white;
  padding: 11px 12px;
  border-radius: 0px !important;
}

.search-icon{
  background-image: url('your-icon-path');
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: 15px;
}

As you have noticed in the style above, we have the form display property set as none to hide the form initially. We will use jQuery to toggle the form.

jQuery

jQuery has .slideToggle() function. We are going to use it to show and hide Read more about it here.


jQuery(document).ready(function($) {
  $(".search-icon").click(function() {
    $(".search-form").slideToggle();
  });
});

Go through this post to learn how hide a DIV on clicks outside of it using jQuery.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
When you don’t want to @forward every member in SCSS (Sass)SCSS3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow to create a full screen loader using CSS and JavaScript?CSSHow to create two segues with two UIButtons on a single page (Swift 5.0)?SwiftHow to define variables in SCSS (Sass)?SCSSaddcslashes() and addslashes() String Functions in PHPPHP