How to Add a Search Bar in WordPress Menu Without Plugin

How to Add a Search Bar in WordPress Menu Without Plugin

Do you want to see a search bar in your menu? which users can search for anything belonging to your website. In this article, You will learn How to add a search bar in the WordPress menu.

A search bar is an input field where visitors can search for information on that website. Let’s add it to the WordPress menu.

Why You Should Add a Search Bar 

Improved navigation: A search bar in the menu allows users to quickly find specific content on your website, making it easier for them to navigate and find what they are looking for.

Better user experience: A search bar in the menu makes it easy for users to find what they are looking for, which can lead to a better overall user experience.

Better SEO: A search bar in the menu can increase the chances of users finding your website through organic search, which can lead to better SEO and higher search engine rankings.

How to Add a Search Bar in WordPress Menu

There are many ways to add a search bar to the WordPress menu. Like you can add via a plugin. But a plugin developer uses this opportunity to promote his other product. If you want to avoid their unnecessary options. You can solve it by using the little code below. 

Just copy the code below and paste it on your function.php

function wpk_add_search_form($items, $args) {
          $items .= '<li class="menu-item">'
                  . '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">'
                  . '<label>'
                  . '<span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>'
                  . '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
                  . '</label>'
                  . '<input type="submit" class="search-submit" value="'. esc_attr_x('Search', 'submit button') .'" />'
                  . '</form>'
                  . '</li>';
        return $items;
}
add_filter('wp_nav_menu_items', 'wpk_add_search_form', 10, 2);

I am using a WordPress official hook named “wp_nav_menu_items” for adding a search bar. You do not need to worry about how to add it. After adding this code to your function.php. It will automatically add a search bar to your menu.

Conclusion

Adding a search bar in the menu of your WordPress website without using a plugin. It is a simple process that can greatly benefit both users and website owners. By code in this article, you can add a search bar to your WordPress menu without the need for any additional plugins. 

This can improve navigation, increase engagement and conversions, provide a better user experience, and even improve SEO by increasing the chances of users finding your website through organic search. It’s a simple, easy and cost-effective way to enhance the functionality of your website. 

Leave a Reply

Your email address will not be published. Required fields are marked *