[Resolved] Search Bar Customization

[Jatin]

I want to customize the search bar. Is there any native way of doing the same.

Customization required but not limited to:

1) Customization of the Search bar
2) Include a click button for search instead of typing query and pressing enter on the keyboard.
3) shows the posts in the drop down while someone is trying to search from the search box. There is a theme call KnowAll provides a search box on which while someone is typing it searches and displays it in drop down.

Please try to search in the Example Search box i have provided in the Private box. It searches within my posts instantly and displays the results in drop down. How to achieve similar using GP Premium.

Thanks,

[David]

Hi there,

you would need an Ajax Search plugin like this one:

https://en-gb.wordpress.org/plugins/ajax-search-lite/

[Jatin]

Is this the best coded plugin. I do not want to slow down the site but some best coded ones if you can suggest?

[David]

Unfortunately i cannot say – i have never used an Ajax search for anything other than a Woocommerce site … but any Ajax plugin is going to add overhead as they have to search the database on keystroke for matching posts, and then render that output.

[Jatin]

Thanks, In that case i will stick to the Native Search. The search which GP uses, is it WP Search. If yes, then can you please advise how to style it. I will stay away from Ajax plugin for now as i do not want to compromise with speed.

[David]

Yes, the GP Navigation search just uses the WP search form.
How do you want to style it?

[Jatin]

Ok I have added Ajax Search on my site now. Is it possible to replace the header search button with Ajax search. I am using the plugin you suggested.

Please check on my site, Currently its in the sidebar.

[Leo]

So you would like to place the Ajax search field in the header/navigation?

Where would you like to place it?

The same place as the navigation search icon?

[Jatin]

Yes, how to swap?

[Elvin]

Hi there,

Try Tom’s code here:
https://generatepress.com/forums/topic/replace-gp-search/#post-1272331

Replace [your-shortcode] with the shortcode for Ajax search.

[Jatin]

It worked by replacing the search with Ajax but then search didn’t work properly so i had to remove the navigation search completely.

Is it possible to have search box for Ajax place after the social icon. Not search Icon but search box as we normally can have in the sidebar, it will be good if ajax search box can be placed in the header itself.

[Jatin]

Second thought is to ignore my last comment. I have placed the search in my side bar. No further action needed for now. Thanks.

[Elvin]

No problem. Glad you got it sorted out. 😀

[Author]

Posts