How to Add Instant Search in WordPress with Algolia

Have you ever wanted to add an instant search feature in your WordPress site? The default WordPress search feature is quite limited which is why a lot of probloggers replace it with third-party tools and plugins. In this article, we will show you how to… Read More »

The post How to Add Instant Search in WordPress with Algolia appeared first on WPBeginner.

Have you ever wanted to add an instant search feature in your WordPress site? The default WordPress search feature is quite limited which is why a lot of probloggers replace it with third-party tools and plugins. In this article, we will show you how to add instant search in WordPress with Algolia.

Instant Search for WordPress

Why Add an Instant Search Feature in WordPress?

The default WordPress search is plain and often not relevant. This is why many WordPress users replace it with third-party search tools like Google Search, or WordPress plugins like SearchWP. See our list of 12 WordPress search plugins to improve your site search.

A search feature on your website can significantly improve user experience. It helps users find content, which increases your pageviews and the time users spend on your website.

Instant search feature helps users find content as quickly as they start typing. This helps users get to their desired content much quickly. Think of it as MacOS’s spotlight feature for your WordPress site.

Having said that, let’s take a look at how to add instant search to your WordPress site with Algolia.

What is Algolia?

Algolia is a cloud based search platform that allows you to build beautiful search experiences for your websites and applications.

Once activated, Algolia will index all content on your website and replace the default WordPress search with a more powerful cloud based search.

It comes with a built-in instant search feature which means your users can get to the content faster without even seeing a search results page.

Algolia offers a free plan with 10,000 records and 100,000 queries per month. Their paid plans start from $49 per month and come with a 14 day free trial.

Adding Instant Search in WordPress with Algolia

First, you need to visit Algolia website and sign up for an account.

Sign up for Algolia

Next, you need to install and activate the Search by Algolia plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Algolia to your WordPress menu. Clicking on it will take you to the plugin’s settings page.

Algolia plugin settings page

You will be asked to provide application ID and API keys. You can obtain this information from your Algolia account dashboard.

API Keys

Copy and paste the required keys in the plugin’s settings page and then click on the save changes button to store your settings.

Next, you will be asked to index your content. Indexing allows Algolia to crawl and create an index of your content, so that it can be searched quickly without slowing down your website.

You can begin indexing by visiting Algolia » Indexing page and select the content types you want to be indexed. Don’t forget to click on the save changes button.

Begin indexing

Algolia will now start indexing your content. It may take a while depending on how much content you have on your website.

Next, you need to enable the autocomplete feature. Go to Algolia » Autocomplete and check the box next to ‘Enable autocomplete’ option. After that you need to scroll down and select the content types to include in your autocomplete results.

Autocomplete

Don’t forget to click on the save changes button to store your settings.

Lastly, you need to replace the default WordPress search with the Algolia instant search. You can do this by going to Algolia » Search Page and select ‘Use Algolia in the backend’ option.

Search page

Selecting Algolia in the backend replaces your WordPress search with Algolia search.

Click on the save changes button to store your settings.

Adding Instant Search Box in WordPress

Now that you have successfully setup Algolia, let’s go ahead and add an instant search box on your website.

Algolia automatically replaces the default WordPress search form with an Algolia powered search.

If you have already added the search form to your WordPress site, then it will start showing results using Algolia automatically.

If you haven’t added a search form, then go to Appearance » Widgets page. Drag and drop the search widget to your sidebar. See our guide on how to add and use widgets in WordPress.

Search widget

Please make sure to click on the save button to store your widget settings.

That’s all, you can now visit your website to see the instant search in action. Start by typing in the search box, and Algolia will start showing results as you type.

Preview of instant search in WordPress with Algolia

We hope this article helped you add instant search in WordPress with Algolia. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Instant Search in WordPress with Algolia appeared first on WPBeginner.

How to Add a Full Screen Search Overlay in WordPress

Recently, one of our readers asked if we could write a tutorial on how to add a full screen search overlay in WordPress. You have probably seen this on popular sites like Wired. When a user clicks on the search icon, the search box opens… Read More »

The post How to Add a Full Screen Search Overlay in WordPress appeared first on WPBeginner.

Recently, one of our readers asked if we could write a tutorial on how to add a full screen search overlay in WordPress. You have probably seen this on popular sites like Wired. When a user clicks on the search icon, the search box opens up and covers the whole screen which can improve user experience on mobile devices. In this article, we will show you how to add a full screen search overlay in WordPress.

Adding a full screen search in WordPress

The full screen search is slowly becoming a trend because it drastically improves the search experience for mobile users. Since mobile screens are very small, by offering a full screen overlay, you make it easy for users to type and search on your website.

When we first got this tutorial request, we knew it would require some code. Our goal at WPBeginner is to make things as simple as possible.

Once we had finished writing the tutorial, we realized that it was too complicated of a process, and it should rather be wrapped into a simple plugin.

Adding Full Screen Search Overlay in WordPress

First thing you need to do is install and activate the WordPress Full Screen Search Overlay plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WordPress Full Screen Overlay Search plugin works out of the box, and there are no settings for you to configure.

You can simply visit your website and click on the search box to see the plugin in action.

Full screen search

Please note, that the plugin works with the default WordPress search feature. It also works great with SearchWP, which is a premium plugin that greatly improves the default WordPress search.

Unfortunately, this plugin does not work with Google Custom Search.

Customizing Full Screen Search Overlay

The WordPress Full Screen Search Overlay plugin comes with its own stylesheet. In order to change the appearance of the search overlay, you will have to edit the plugin’s CSS file or use !important in CSS.

First you will need to connect to your website using an FTP client. If you are new to using FTP, then take a look at our guide on how to upload files to WordPress using FTP.

Once you are connected, you need to locate the plugin’s CSS folder. You will find it under the following path:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

You will find a file full-screen-search.css inside css folder. You need to download this file to your computer.

Open the file, you just downloaded in a plain text editor like Notepad. You can make any changes to this file. For example, we wanted to change the background and font color to match our demo website.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

In this code, we have only changed background color at line 62, and added font color at line 150. If you are good with CSS, then feel free to change other style rules as well.

Once you are done, you can upload this file back to plugin’s CSS folder using FTP. You can now see your changes by visiting your website.

A WordPress site with Full screen search overlay

Important Note:

If you are using this in your own theme, then it’s better to use !important tags so the plugin updates wouldn’t override any changes.

For developers and consultants, you can also just rename the plugin and bundle it as part of your theme or services.

We only created this plugin because all other ways of writing this tutorial would’ve been too complicated for beginner users.

We hope this article helped you add full screen search overlay to your WordPress site. You may also want to see our guide on how to add a search toggle effect in WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Full Screen Search Overlay in WordPress appeared first on WPBeginner.

12 WordPress Search Plugins to Improve Your Site Search

Do you want to improve your WordPress site search? We all know that the default WordPress search feature is fairly limiting. However, there are several WordPress search plugins that can help you improve the default search experience. In this article, we will highlight the best… Read More »

To leave a comment please visit 12 WordPress Search Plugins to Improve Your Site Search on WPBeginner.

Do you want to improve your WordPress site search? We all know that the default WordPress search feature is fairly limiting. However, there are several WordPress search plugins that can help you improve the default search experience. In this article, we will highlight the best WordPress search plugins and tutorials to customize and improve your site search.

1. SearchWP

SearchWP

SearchWP is a powerful custom search plugin for WordPress. It is very easy to use and the search results are relatively more accurate.

It allows searches for your keyword in post/page title, content, slug, categories, tags, taxonomies, excerpt and even comments. You can control the algorithm by assigning weight to each content type from 1 to 10 where 10 being the highest.

Upon activation, the plugin automatically indexes your content and replaces the default search feature in WordPress. See our article on how to improve WordPress search with SearchWP for more detailed instructions.

2. Adding a Taxonomy Filter to WordPress Search

Ajax based WordPress Search Plugin

If you are using categories, tags, or any other custom taxonomy to sort content, then adding a taxonomy filter to search can greatly help users narrow down the results.

Ajax WP Query Search Filter allows you to create custom WordPress search forms with checkboxes for taxonomies, post types and custom fields.

It uses Ajax to load results, so it works really fast and provides a better experience for users. Take a look at our tutorial on how to add ajax taxonomy filter in WordPress search to learn more.

3. Swiftype Search

Swiftype Search Engine for WordPress

Switype is a site search service that comes with a free and paid version. Their WordPress plugin replaces your default WordPress search with Swiftype.

Swiftype will index your documents, and it works way faster than default WordPress search. Results are extremely relevant. Swiftype will also store user searches and will show you what users searched for, what they clicked on, and other cool analytics.

See our guide on how to improve WordPress search With Swfitype search for step by step instructions.

4. Google Custom Search for WordPress

Google Custom Search for WordPress Sites

When it comes to search, Google is undoubtedly the king. The good thing is that you can create a custom Google search engine for your site and integrate it into WordPress.

The downside is that it comes with Google’s personal branding, which may not be so bad because users already trust this brand.

We have a step by step tutorial on how to add Google search in a WordPress site.

5. Search by Category

Search by category plugin for WordPress

Category Wise Search plugin allows you to add a category drop down to WordPress search. Users can limit their search to a specific category to narrow down the results. The plugin also allows you to exclude categories from the search, and you can easily add it using a widget for your sidebar.

Take a look at our article on how to search by category in WordPress.

6. Highlight Search Terms

Highlighting search terms in WordPress search results

Highlighting search terms in the results page can help improve the user experience. It also increases the chances of them finding what they are looking.

If you are using the default WordPress search, then you can easily implement this by editing the search results template in your child theme. For detailed instructions see our article on how to highlight search terms in WordPress search results.

7. Display Search Term and Result Count in WordPress

Displaying search term and result count in WordPress search

There are several things you can do by editing your theme or child theme’s search.php template. One of these things is to show users the search term and the number of results. Simply add this code to your search.php template.

<h1 class="page-title">Search Result for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">'); echo $key; _e('</span>'); _e(' &mdash; '); echo $count . ' '; _e('articles'); wp_reset_query(); ?></h1>

This code will simply display search term and the number of results found. You can use .search-terms CSS class to highlight the search terms using CSS.

8. Create an Advanced Search Form For Custom Post Types

Advanced custom WordPress search form for post types

Custom Post Types allow you to add different content types to your WordPress site. For example, at WPBeginner we use custom post types for Glossary and Deals sections.

Many WordPress sites have custom post types for products, reviews, recipes, etc. However, the default WordPress search is not very good at handling post types. Wouldn’t it be nice if you had a search form where users can just check what post type they want to search and narrow down their results?

We have a detailed tutorial on how to create an advanced search form in WordPress for Custom Post Types.

9. Simply Exclude

Exclude specific content from custom WordPress search

Sometimes you may want to exclude specific content from search results. Simply Exclude is a WordPress plugin that allows you to exclude content based on your selected criteria.

For example, you can exclude all posts tagged featured, or all posts in category showcase, etc. Take a look at our tutorial on how to exclude specific pages, authors, and more from WordPress search.

10. Using Multiple Search Forms in WordPress

The default WordPress search may be useless, but with little tweaks it can be improved quite a lot.

Earlier we mentioned creating a search form for custom post types. But what if you wanted to show different search forms on different pages? How about showing more than one search form in WordPress?

This can be easily achieved by creating different search forms and search results templates with different queries. Take a look at our tutorial on how to use multiple search forms in WordPress for detailed instructions.

11. Adding Search Form in a WordPress Post

Sometimes you may want to add a search form inside a post or page to encourage users to search for content on your site. The default WordPress search form is a plain HTML form. However, if you wanted to add the search form inside your posts or pages, the HTML will be stripped by WordPress.

This can be resolved by creating a simple shortcode that displays the search form and then using the shortcode inside your post or page. Simply add this code to your theme’s functions.php file or a site-specific plugin.

add_shortcode('wpbsearch', 'get_search_form');

Use shortcode [wpbsearch] to display search form inside your post/pages. For more detailed instructions take a look at our tutorial on how to add search form in your post with a WordPress search shortcode. You can also add a custom WordPress search form using this method.

12. Add Voice Search in WordPress

Preview of voice search in WordPress

If you have a smartphone, then you are probably familiar with voice search using Siri, Google Now, or Cortana. Wouldn’t it be nice if you can bring voice search functionality to your WordPress site? Well now you can.

WordPress Voice Search plugin allows you to add voice search capabilities to your WordPress search form.

See our article on how to add voice search in WordPress.

We hope this article helped you improve your WordPress search. You may also want to check out the best WordPress tools and plugins for affiliate marketers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit 12 WordPress Search Plugins to Improve Your Site Search on WPBeginner.

How to Add Voice Search Capability to your WordPress

If you have a smartphone, then you are probably familiar with voice search using Siri, Google Now, or Cortana. Wouldn’t it be nice if you can bring voice search functionality to your WordPress site? In this article, we will show you how to add voice… Read More »

To leave a comment please visit How to Add Voice Search Capability to your WordPress on WPBeginner.

If you have a smartphone, then you are probably familiar with voice search using Siri, Google Now, or Cortana. Wouldn’t it be nice if you can bring voice search functionality to your WordPress site? In this article, we will show you how to add voice search in WordPress.

First thing you need to do is install and activate the Voice Search plugin.

Upon activation, this plugin works out of the box, and there are no special settings for you to configure.

All you need to do is go to the Appearance » Widgets section in your admin area. Next, add the default WordPress search widget to a sidebar.

If you already have a search widget added to your sidebar, then you don’t need to do anything.

Simply visit your website, and you will be able to see a microphone icon in the WordPress search box. When a user click on the microphone icon, it will display the text ‘Start Talking’ and users can say the words they want to search for.

Preview of voice search in WordPress

How Does Voice Search Plugin Work in WordPress?

The Voice Search plugin uses the web speech API to take the voice input. Currently the plugin only works on Safari and Chrome web browsers for mobile and desktop.

*Firefox is expected to have web speech implemented soon.

The plugin modifies the default WordPress search form and hooks up the voice input javascript into default search. This means if you are using a custom search solution like Google search for WordPress or SearchWP, then this plugin will not work with your search form.

We hope this article helped you add voice search to your WordPress site. You may also want to check out our guide on how to add WordPress widgets in accessibility mode.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit How to Add Voice Search Capability to your WordPress on WPBeginner.