{"id":1102,"date":"2018-03-14T18:01:19","date_gmt":"2018-03-14T12:31:19","guid":{"rendered":"http:\/\/holithemes.com\/blog\/?p=1102"},"modified":"2018-03-14T18:01:19","modified_gmt":"2018-03-14T12:31:19","slug":"add-search-box-in-wordpress-menu","status":"publish","type":"post","link":"https:\/\/holithemes.com\/blog\/add-search-box-in-wordpress-menu\/","title":{"rendered":"Add Search box in WordPress Menu"},"content":{"rendered":"\n<p>Add Search box in WordPress Menu with, With out using plugin.<\/p>\n\n\n\n<p>By default WordPress Initially check for the search form from searchform.php<\/p>\n\n\n\n<p>And this search form can call using &#8220;get_search_form()&#8221; function<\/p>\n\n\n\n<p>get_search_form() will display the search form<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"768\" height=\"429\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/04\/search_box_in_menu-1-1-768x429-1-1-1-1.png\" alt=\"\" class=\"wp-image-2283\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/04\/search_box_in_menu-1-1-768x429-1-1-1-1.png 768w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/04\/search_box_in_menu-1-1-768x429-1-1-1-1-300x168.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add Search box in Menu<\/h2>\n\n\n\n<p>To add the search box in menu, we need to add get_search_form() in the menu.<\/p>\n\n\n\n<p>To make changes in menu items &#8211; can use &#8220;wp_nav_menu_items&#8221; filter<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_search_form( $items, $args ) {\n    $items .= '&lt;li class=\"ht_menu_search_bar\">' . get_search_form( false ) . '&lt;\/li>';\n    return $items;\n}\n\nadd_filter( 'wp_nav_menu_items','add_search_form', 10, 2 );<\/code><\/pre>\n\n\n\n<p>( if plan to use different search form then the default one using get_search_form, here is an <a rel=\"nofollow noopener\" href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_items\/#user-contributed-notes\">example form wordpress developers<\/a><\/p>\n\n\n\n<p>Add this code in functions.php or in a any file and include that file in functions.php or add using plugin.<\/p>\n\n\n\n<p>Its better to create a child theme and create functions.php in child theme and add. by this way you code wont replace when theme updates.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS<\/h4>\n\n\n\n<p>A sample CSS for an idea<\/p>\n\n\n\n<p>make the menu to float right side of the menu, on medium, large screen<\/p>\n\n\n\n<p>mostly you theme will collapse menu in small screen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (min-width: 767px ) { \n\t.ht_menu_search_bar {\n\t\tfloat: right;\n\t}\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">plugins to add Search box in header menu<\/h4>\n\n\n\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/wordpress.org\/plugins\/bop-search-box-item-type-for-nav-menus\/\">Bop Search Box Item Type For Nav Menus<\/a><\/p>\n\n\n\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/wordpress.org\/plugins\/search-box-on-navigation-menu\/\">Search box on Navigation Menu<\/a><\/p>\n\n\n\n<p>( We did&#8217;t test any this plugin to add menu )<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add Search box in WordPress Menu with, With out using plugin. By default WordPress Initially check for the search form from searchform.php And this search form can call using &#8220;get_search_form()&#8221; function get_search_form() will display the search form Add Search box in Menu To add the search box in menu, we need to add get_search_form() in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[17],"class_list":["post-1102","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-search-box"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts\/1102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}