How to add searchbox to wordpress websites

How to Add a Search Box in Wordpress Header in 5 minutes [ 3 ways ]

Rate this article

Share this article

Here are easy steps to add a search bar to a WordPress header. Using the search bar, your site visitors can find what they need in a moment. This post will help you create a search bar in your WordPress site

How to add searchbox to wordpress websites

In most of WordPress themes, a search box is included by default. But if any theme doesn’t have it or you want to make your own custom search box, you can easily do that too.

Importance of Search box for a website

Every website has a wealth of information for consumption. Hence it becomes very mandatory to have a search box accessible for every user to use. There are multiple ways to add a search box to a WordPress website.

  1. Add a Search box to WordPress website using WordPress widget
  2. Add Search box in WordPress using WordPress search plugin
  3. Search as a Service (aka SaaS Service that provides search feature or functionality)

 

Add a Search box to WordPress website using WordPress widget

It’s the easiest way of adding search functionality to a WordPress website.

  1. Login to your yourwebsite.com/wp-admin/ section of your website.
  2. Visit Appearance >> Widgets >> + ( Click on plus icon ) >> Search
  3. Choose Search widget or Modal Search widget

The image below is of WordPress 5.8.1 but the menu navigation is the same across all versions of WordPress.

Adding searchbox to wordpress using wordpress widget

Pros :

  • It’s the quickest, easiest way to add search functionality effortlessly.
  • It’s very handy if your website is relatively simple and you have very little information to search within.

Cons:

  • It’s the dumbest search. It does a very simple mundane search.
  • This search does not provide any kind of great useful information when you have lots of knowledgebase articles.
  • This search cannot be leveraged for extracting information retrieval.
  • When you use this kind of search, it basically does a SQL query of LIKE search. This forces every row to be read to fetch the result. Hence this search will become slow as the number of records increases.

Add Custom Search to your website

Add Search box in WordPress using WordPress search plugin

There is a multitude of free & paid search plugins. These search plugins are better than the default search widget I discussed previously.

You can install these plugins as you install any other wordpress plugins by visiting Plugins > Add New

Relevanssi

Relevanssi replaces the standard WordPress search with a better search engine, with lots of features and configurable options. You’ll get better results, better presentation of results – your users will thank you.

Do note that using Relevanssi may require large amounts (hundreds of megabytes) of database space (for a reasonable estimate, multiply the size of your wp_posts database table by three). If your hosting setup has a limited amount of space for database tables, using Relevanssi may cause problems. In those cases use of Relevanssi cannot be recommended.

Relevanssi – A Better Search

Ivory Search

Ivory Search is a simple to use advanced WordPress search plugin. It enhances the default WordPress search and also allows you to create new custom search forms.

With Ivory Search, you can create an unlimited number of search forms and configure each search form individually to customize WordPress search and perform different types of searches on-site content.

Display the custom search forms on-site header, footer, sidebar or widget area, navigation or menu, on pages, posts, custom post types, or anywhere on the site using its shortcodes.

Ivory Search – WordPress Search Plugin

AJAX SEARCH LITE

Ajax Search Lite is a live search plugin for WordPress. This responsive live search engine, which will boost your user experience by providing a user-friendly ajax powered search form – a live search bar. You can filter the results with the category and post-type filter boxes as well. Google autocomplete and keyword suggestions are also included.

Very smooth animations with mobile device support and regular updates. Use Ajax Search Lite as a replacement for the default WordPress search with a better-looking, more efficient search engine.
Fine-tune the user experience by providing a powerful ajax search plugin to your visitors. Supports custom post types and custom fields and more. Boost your site search engine with this custom-built live search engine.

Ajax Search Lite

ACF Better Search

This plugin adds to default WordPress search engine the ability to search by content from selected fields of Advanced Custom Fields plugin.

Everything works automatically, no need to add any additional code. The plugin does not create a search results page, but modifies the SQL database query to make your search engine work better.

Additionally you can search for whole phrases instead of each single word of phrase. As a result, search will be more accurate than before.

ACF: Better Search

Search as a Service (aka SaaS Service that provides search feature or functionality)

There are few in numbers who provides machine learning / artificial intelligence search

Google Custom Search

You can easily add a customizable search box to your web pages and show fast, relevant results powered by Google Search. it’s powered by Google’s core search technology that’s constantly improving, you always get fast, relevant results. You have the freedom to program your search engine, so you decide what content it searches for and how it looks and it can be easily integrated into your website quickly.

Read on to add Google Custom Search to WordPress

Algolia Site Search

Algolia logo

Algolia is a site search & discovery API for websites and mobile apps. They help create powerful, relevant, and scalable discovery experiences for their users. More than 6,000 companies rely on Algolia to manage 50 billion search queries a month.

Algolia Search Features

  • Unprecedented Search Speed – Results show up immediately as the user types and an instant search results page updates with products and categories in real-time. Instant results mean that search is a great experience, even on mobile.
  • Relevance and Synonyms – Ranking options enable you to prioritize results that send customers to your best-selling and most popular products. Advanced typo tolerance and synonym matching make sure you are always bringing users to exactly what they are searching for.
  • Reliability – 99.99% SLA: we make sure that your search is up and running at all times. Provide the same advanced Magento search performance to all your users, no matter which part of the world they’re in by replicating your data across any of the 52 data centers in our Distributed Search Network.
  • Filters and Facets – Customized filters and facets update as users search, turning your search bar into a powerful find as you type browsing tool.
  • Advanced Analytics – Easy insights on what your customers are searching for and the search queries they use — in one central dashboard.

Read More on adding Algolia Search to WordPress

Add Custom Search to your website

Elastic Search

Elasticsearch is a search engine based on Lucene. It has both open source and paid versions. You can use it to search a database of documents or your website. In this article, we will see what are the advantages and disadvantages of using a hosted version of elasticsearch. Elasticsearch also comes with an analytics platform Kibana and logstash (for collecting, parsing, and transforming logs).

Elasticpress: Wordpress Plugin for elastic search

Read More on adding Elastic Search to WordPress

How to add ExpertRec Site Search in WordPress

how to add search bar in wordpress header

  1. Login to your WordPress admin panel.
  2. Go to Appearance->editorhow to add search bar in wordpress header
  3. Add the following code to the header.php file.
    <?php get_search_form(); ?>

    how to add search bar in wordpress header

  4. This will bring in searchform.php if it is present in your theme.
  5. This will bring the default search that is built-in WordPress to appear in the header.  The quality of this search is not great.  Continue to read to build a better and faster search experience.
  6. Signup for a free search demo by entering your URL.
  7. This will build a search demo.
  8. Download and Install ExpertRec’s WordPress search plugin from here which will replace your default search form with that of Expertrec’s hosted search.
    https://wordpress.org/plugins/wp-fastest-site-search/
  9. Login to your wordpress admin panel. Click the add new plugins and upload the zip.how to add search bar in wordpress header
  10. OR you can directly install the plugin from your Wordpress admin panel . Search for the plugin name and install it . Dont forget to activate the plugin.how to add search bar in wordpress header
  11. After activating the plugin you willbe navigated to the signup page. It is a two step process.In the step1 you need to enter site url(by default it get filled automatically) and need to select indexing option(if woocommerce is not active).Then click the continue button for step2. how to add search bar in wordpress header
  12. In the step2 You will have 2 option to signup.Either signup through google or you can signup through otp . Choose any of the way and complete signup.how to add search bar in wordpress header
  13. Your new search engine is ready for use.
  14. If you like to change the ranking or the UI, you can do them easily in your control panel.
  15. For a detailed explaination regarding our plugin integration, features and how it will help in your search you can refer this blog  Wordpress fastest site search
  16. If the plugin method didn’t work, go to the code section inside your WordPress admin panel and add it to your WordPress PHP code. You could also email the code to your WordPress developer to get this added to your site. The <ci-search><ci-search> tag will add the search bar in WordPress header whereas the code within <script></script> adds the search functionality (autocomplete, spell correct, image search etc)custom search box wordpress
  17. You can edit the look and feel of your WordPress custom search box by going to https://cse.expertrec.com/csedashboard/looknfeel/inputbox and change the attributes without the need for coding.Custom search form wordpress plugin
  18. The custom search box for WordPress looks similar to the image belowcustom search box wordpress

Add Custom Search to your website

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like