From lightning-fast search results to highly customizable search interfaces, Algolia offers various features designed to elevate your website’s search experience to new heights. Who better to guide you through this transformative journey than WebDevStudios? In this blog post, we address the benefits of Algolia search. We also explain how we improve the WordPress website search experience with Algolia. Our efforts ensure our clients’ websites stand out in a sea of mediocrity.

What Is Algolia?

Algolia is a robust and highly advanced search-as-a-service platform designed to revolutionize the search experience on websites, including WordPress. At its core, Algolia is a powerful search engine that utilizes cutting-edge technology to deliver lightning-fast and highly relevant search results to users. Unlike traditional search solutions, Algolia is built to handle large volumes of data with incredible speed and precision, making it ideal for websites and applications with extensive content libraries.

More Accurate Search Results

Compared to native WordPress search, Algolia search provides more accurate results, helping website visitors quickly find what they’re looking for. Algolia employs sophisticated ranking and relevance algorithms to analyze and prioritize search queries based on various factors such as user behavior, popularity, and context.

Real-Time Indexing

One of the key features of Algolia is its real-time indexing capability, which ensures that search results are always up-to-date with the latest content changes. This means that users can instantaneously find the most relevant information without waiting for indexing processes to catch up. Additionally, Algolia offers extensive customization options, allowing developers to tailor the search experience to meet their users’ specific needs and preferences.

Intuitive and User-Friendly Interface

Another standout feature of Algolia is its intuitive and user-friendly interface, making it easy for developers and end-users to interact with the search functionality. Algolia provides various tools and APIs that developers can use to seamlessly integrate search into their websites and applications, with minimal coding required. This allows developers to focus on building great user experiences rather than getting bogged down in the complexities of search implementation.

It’s the Game-Changing Solution You’ve Been Waiting For.

Overall, Algolia search is a game-changer for websites and applications looking to provide an exceptional search experience to their users. With its speed, relevance, and customization options, Algolia empowers developers to create fast, intuitive, and highly relevant search experiences that keep users returning for more.

The Problems with Native WordPress Search

When it comes to native WordPress search, the truth is that it’s often more of a headache than a helpful tool. While WordPress is undeniably a powerful platform for building websites, its default search functionality leaves much to be desired. Here’s why you should think twice before relying on WordPress search and consider Algolia instead.

Limited Relevance

WordPress search struggles to deliver relevant results, often returning outdated or irrelevant content to users. This lack of precision can frustrate visitors and drive them away from your site.

Poor Performance

Native WordPress search can be slow and inefficient, especially on websites with large volumes of content. Slow search results can lead to a poor user experience and discourage users from engaging with your site.

Lack of Customization

WordPress search offers limited customization options, making it challenging to tailor the search experience to meet your audience’s specific needs and preferences. Without the ability to customize search functionality, you’re stuck with a one-size-fits-all solution that may not align with your website’s goals.

Limited Search Features

Native WordPress search lacks advanced features such as faceted search, typo tolerance, and synonym support, which are essential for providing a modern and user-friendly search experience. Without these features, users may struggle to find the information they want, leading to frustration and dissatisfaction.

Relying on native WordPress search is like settling for mediocrity in a world of endless possibilities. You don’t want that, and neither do your website visitors.

The Benefits of Algolia Search

Switching from native WordPress search to Algolia brings many benefits that can transform the search experience on your website. Here are many reasons why WebDevStudios believes Algolia is the superior website search choice.

Multi-Faceted Search

Algolia’s multi-faceted search functionality enables users to narrow down their search results by applying various filters or facets. Users can easily refine their search queries from categories and date ranges to authors and ratings to find exactly what they’re looking for.

Fuzzy Logic Search

With Algolia’s fuzzy logic search, misspelled search terms are no longer problematic. Algolia’s advanced algorithms can identify and retrieve relevant results even when the search terms are spelled incorrectly or closely match the desired term, ensuring accurate and comprehensive search results every time.

Blazing-Fast Search Results

Speed is of the essence in today’s fast-paced digital world, and Algolia delivers. With its lightning-fast search capabilities, Algolia ensures that users receive search results in milliseconds, providing an instant and seamless search experience that keeps users engaged and satisfied.

Extensive Options for Customization

Algolia offers extensive options for customizing the search experience to meet your audience’s specific needs and preferences. From customizing search interfaces and result layouts to fine-tuning relevance and ranking algorithms, Algolia empowers you to create a search experience that aligns perfectly with your website’s goals and objectives.

Supports Multiple Data Sources

Algolia’s versatility extends beyond traditional text-based searches. It supports multiple data sources, including structured and unstructured data, allowing you to search various content types, such as products, articles, images, and more. This versatility ensures that Algolia can easily handle even the most complex search requirements.

Scalability and Reliability

Algolia is built to scale with your website’s growth, ensuring reliable performance even as your content library expands. Whether you’re serving a handful of users or millions of visitors, Algolia’s infrastructure is designed to deliver consistent and reliable search results without compromising on speed or accuracy.

In summary, Algolia offers a comprehensive and feature-rich search solution that outshines native WordPress search in every aspect. From its multi-faceted search capabilities and fuzzy logic search to its blazing-fast performance and extensive customization options, Algolia empowers you to create a search experience that impresses users and drives engagement on your website.

Improve Your WordPress Website Search Experience with Algolia Integration

Initially, Algolia developed, maintained, and supported its own branded WordPress plugin, but in 2017, that changed. Algolia announced that it would no longer support its plugin, and that’s when WebDevStudios decided to fork it; hence, WP Search with Algolia was created. Today, WebDevStudios continues to support and maintain the plugin and eventually released a premium extension called WP Search with Algolia Pro.

WP Search with Algolia

WP Search with Algolia is a powerful plugin created by the product development team at WebDevStudios that seamlessly integrates Algolia’s advanced search technology into your WordPress website. By indexing your website’s content, this plugin provides lightning-fast and accurate search results within minutes, offering an immediate upgrade to your website’s search functionality.

With WP Search with Algolia, you gain full control over the look, feel, and relevance of your users’ search experience. The plugin enables features such as Autocomplete and Instantsearch, enhancing the search experience for your visitors and impressing them with relevant and faceted search results. Keep reading to understand its key features.

• One-Click Indexing: Easily index all content in your WordPress website with just one click, ensuring that your search results are always up-to-date and comprehensive.
• Relevant and Faceted Search Results: Benefit from Algolia’s native typo tolerance and granular control over search content relevancy, providing users with highly relevant and accurately sorted search results in milliseconds.
• Customization Options: Take advantage of WordPress hooks and filters to easily customize indexed content, allowing you to tailor the search experience to match your website’s unique requirements.
• Autocomplete and Instantsearch: Enable Autocomplete and Instantsearch features to deliver a more robust search experience to your visitors, further improving their search journey on your website.

WP Search with Algolia addresses common issues with native WordPress search, such as slow search performance, irrelevant search results, and lack of admin control over the search experience. By leveraging Algolia’s powerful search technology, WP Search with Algolia transforms your website’s search functionality, providing super-fast search results with native typo-tolerance and impressively relevant and faceted search results.

WP Search with Algolia and WooCommerce

WebDevStudios has seamlessly integrated WP Search with Algolia’s settings and configurations tailored for WooCommerce. Furthermore, we’ve designated select attributes as searchable and enriched our product data within Algolia. Additionally, we’ve fine-tuned our setup to dictate the indexing of products based on catalog visibility and availability status.

The same benefits of Algolia search integration previously listed above can be applied in an eCommerce setting, including speedy and relevant search results, improved conversion rates due to an enhanced search experience, and customization options. Furthermore, Algolia’s real-time indexing ensures that search results are always up-to-date with the latest product information, providing customers with accurate and timely search results.

For assistance with settings and configurations, we recommend reading the following articles:

• Integrating WP Search with Algolia: Settings and Configurations for WooCommerce
• Integrating WP Search with Algolia: Autocomplete and Instantsearch Customization
• Integrating WP Search with Algolia: InstantSearch Widget and Facet Customization

WP Search with Algolia Pro and WooCommerce

WebDevStudios further advanced WP Search with Algolia’s eCommerce capabilities further by developing a premium extension—WP Search with Algolia Pro. WP Search with Algolia Pro offers more informative search results than WP Search with Algolia, including product SKUs and prices, for simple and variable products within WooCommerce.

• WordPress Multisite Indexing: Apply the power of Algolia in a complex WordPress Multisite environment by setting up a single searchable index for the global search of an entire network.
• Use a “noindex” Setting: Use the “noindex” setting to control indexing per content item or based on SEO.
• Index WooCommerce-specific Product Details: Index products by prices, ratings, sales, SKU, and short descriptions.
• Control Search Results: Automatically adjust relevance.

Algolia WordPress Integration Success Stories

Still not convinced that Algolia search is fast, efficient, and a vast improvement over WordPress native search? Review the following success stories. These client projects exemplify how WebDevStudios improves our clients’ WordPress website search experience with Algolia.

One Stop Wine Shop

Expect an exhilarating wine shopping experience at One Stop Wine Shop. The company is not just any online store; One Stop Wine Shop is the ultimate destination for an extensive array of reds, whites, rosés, and sparkling wines, all conveniently delivered to your doorstep.

When One Stop Wine Shop sought to elevate its search functionality, the eCommerce turned to WebDevStudios for help. Using the magic of our own WP Search with Algolia plugin, the WebDevStudios development team transformed One Stop Wine Shop’s search into a powerhouse by developing a custom eCommerce solution.

First, our team integrated the latest autocomplete interface to enable extra tools and autocomplete plugins, like query suggestions and trending searches. We also integrated Algolia indexes that were being populated by external tools such as Commerce7.

Additionally, our team customized the autocomplete result displays, extended and customized filters and facets to meet One Stop Wine Shop’s goals, and created a filter to exclude products that were not marked as available. Lastly, we integrated a customized sort option to improve the website visitors’ browsing experience based on their preferences, such as sorting by newest products or price.

Now, users can dive into a treasure trove of relevant pages and products with just a simple search term. Plus, One Stop Wine Shop’s content team wields full control over what users see, ensuring a tailored and seamless browsing experience.

Saxco

Saxco is the premier destination for wholesale packaging solutions. Customers who dive into the eCommerce shop’s extensive array of bottles, cans, jars, and more, will discover products that are meticulously crafted to meet the unique demands of the wine, beer, spirits, and food industries. Saxco is exciting to explore with its curated collection of custom packaging and specialty items, tailored to fulfill any distinctive requirement.

Previously, Saxco was a valued ongoing retainer WebDevStudios client. Eventually, the company sought to elevate its website’s search functionality to new heights. With precision and expertise, our team enhanced Saxco’s search experience using our WP Search with Algolia plugin.

We extended and customized filters and facets to include the client’s desired functionalities and goals, such as product attributes. Our team also created a functionality to customize the search results views to be tailored to visitors preferences and expectations, how they results are displayed, and the ability to add highlights and extra details regarding each product.

Additionally, WebDevStudios enabled WooCommerce product categories to be instantsearch powered with appropriate facets to further refine results. This innovative eCommerce customization grants Saxco’s admin and content team complete control over search outcomes, enhancing the browsing experience for frontend users and fostering seamless navigation through its expansive product offerings.

Improve Your WordPress Website Search Experience with the Power of Algolia

With nearly half of today’s websites built on WordPress, ranging from personal blogs to multi-million-dollar eCommerce platforms and online schools, one crucial requirement unites them all. That is the need for fast and relevant search functionality.

Are you ready to explore the power of Algolia? Watch the video below, featuring WebDevStudios CEO, Brad Williams. He demonstrates how we maintain one of the most utilized plugins and customize search to suit a diverse array of scenarios.

Contact WebDevStudios. We can work together to improve your WordPress search experience by utilizing the magic of Algolia.

The post How WebDevStudios Improves the WordPress Website Search Experience with Algolia appeared first on WebDevStudios.

Previously, this series covered WP Search with Algolia settings and index management (Part 1) and template customization (Part 2). If you haven’t read either, it’s worth going back to them since today’s blog post builds on the code provided in those.

Let’s begin.

Facet(s) configuration

Algolia comes with many useful widgets and facets for integrating InstantSearch with your business or website, allowing you to create robust UI for your users. Find quick demos of all of them over at their Algolia Showcase.

By default, WP Search with Algolia (WPSwA) makes use of the following widgets:

• Searchbox: The user types in a query
• Stats: General statistics regarding the current query
• Hits: The results for the current query
• Pagination: Navigation to move through any paged results
• Menu: General list menu
• Hierarchical menu: Menu that will nest items based on parent/child hierarchy
• Refinement list: List of content types that can further refine results
• poweredBy: A touch of branding when applicable

You could also add some extra useful widgets like a “sort by” dropdown, a “clear all” toggle to clear currently applied refinements, numeric menus, range inputs or sliders if you have some number-based attributes, a rating menu, and various other types. There is plenty to work with to fit your needs.

For the purposes of our integration with WooCommerce, we will focus primarily on the refinement list widget for finding just the products we want.

One of the WooCommerce attribute types I have in my demo site is “color.” This has resulted in a product attribute of pa_color and right now it has three terms in it.

To get this added as a widget we can further refine results with, we need to get some markup in our instantsearch.php file to render the widget. To start, we will add this below the Users section of the sidebar area. For our example, we’re using facet-color for our ID which we will need in a moment. You can use whatever ID value you want though.

<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Users', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-users"></section>
</div>
<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-color"></section>
</div>

Next, we need to configure the widget itself. This will go in the search.addWidgets([ ... ]) block of our template file.

search.addWidgets([

	...
	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),
	
	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

Here we will need the ID that you used with the widget above. We want to specify it in the container property, so that Algolia can find the div and render the refinement list widget.

Next, we need to tell the widget which indexed attribute we want to reference here. That is where taxonomies.pa_color comes in. Specifying this attribute informs Algolia to fetch all the indexed terms from the pa_color attribute, that match the determined results for a given search.

By default, WPSwA will include WooCommerce’s product_cat, product_tag, and various created attributes assigned to your products, so these should be available as soon as you index the product WooCommerce post type.

The operator property can be used to indicate which attributes should be associated with an item to be listed when refining. In this case, we use “or” to say “the product must have this attribute OR this attribute,” meaning any of the checked attributes.

If you set this value to “and,” then it turns to “the product must have this attribute AND this attribute” to be shown, meaning all of the checked attributes.

The sortBy tells in which order the refinement list items should be listed. By default, WPSwA puts “isRefined” items first, which would be if an item is checked, that item moves to the top of the list.

Next, it orders them by item with the most results available first, and then any with matching amounts shown alphabetically. Toy around with the sort order and see which display type you prefer most.

Lastly is the limit and showMore properties. If you specify a limit without showMore or showMore set to false, then Algolia will only return the amount specified by limit.

However, if you set showMore to be true, then the limit will be how many it shows before offering a button to select to show the rest of the found attribute items. You can read about all the refinementList properties in the refinementList documentation.

With these settings in place for the widget, we should see something like this below.

Most of the default widget sections in the WPSwA template and instantsearch.php don’t make sense for our purposes. You can keep them if you want, but I’m going to remove them for the rest of this article.

This will result in our facets <aside> looking like this below (about lines 27 through 32), ready for more additions as needed for widgets that make sense.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>
</aside>

This will also result in a reduction of our search.addWidgets([ ... ]) section as below. I have concatenated some parts within longer widget sections for brevity.

search.addWidgets([
	/* Search box widget */
	instantsearch.widgets.searchBox({
		container: '#algolia-search-box',
		placeholder: 'Search for...',
		showReset: false,
		showSubmit: false,
		showLoadingIndicator: false,
	}),

	/* Stats widget */
	instantsearch.widgets.stats({
		container: '#algolia-stats'
	}),

	/* Hits widget */
	instantsearch.widgets.hits({
		container: '#algolia-hits',
		hitsPerPage: 10,
		templates: {
			empty: 'No results were found for "<strong>{{query}}</strong>".',
			item: wp.template('instantsearch-hit')
		},
		transformData: {
			item: function (hit) {
				...
			}
		}
	}),

	/* Pagination widget */
	instantsearch.widgets.pagination({
		container: '#algolia-pagination'
	}),

	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),

	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

You can add as few or as many extra widgets as you want to be based on the needs of your store. Just make sure to remember to create the container markup so that Algolia can render the widget, and accurately specify the attribute to use for the given facet.

For a quick extra attribute demo, I’m going to add one more named “Size,” using the same steps above, resulting in these two additions. This time though, I have changed the sortBy to have just “isRefined” first, followed by the name in ascending order. I have removed the sort by count.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>

	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Size', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-size"></section>
	</div>
</aside>

instantsearch.widgets.refinementList({
	container : '#facet-color',
	attribute : 'taxonomies.pa_color',
	operator  : 'or',
	limit     : 5,
	sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
	showMore  : true,
}),

instantsearch.widgets.refinementList({
	container: '#facet-size',
	attribute: 'taxonomies.pa_size',
	operator : 'or',
	limit    : 5,
	sortBy   : ['isRefined:desc', 'name:asc'],
	showMore : true,
}),

Replacing Shop and Product Category Archives with Algolia

This section of this tutorial on WP Search with Algolia InstantSearch widget and facet customization may be our greatest trick! Ready?

We are going to replace both the shop page as well as product category archives, i.e. /product-category/inflatable-toys/, with our overall Algolia Instantsearch UI.

With the shop landing page, we will present everything as if no specific query has been made yet, while with the product category archive will be limited to the products that would be originally listed there.

Loading Necessary Scripts and Styles

To accomplish this, we must first create a couple of template files and also enqueue some assets. First, we will get our assets loaded. This will help make sure we have the scripts and styles needed.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

Here we’re checking if we’re on a product category or the shop page, and if not, just return early. If we are, then we enqueue our InstantSearch JavaScript and CSS, as well as our autocomplete CSS.

Template Overrides

Next, we need to create the following files in our theme:

• archive-product.php
• taxonomy-product-cat.php

Since these file names follow the WordPress template hierarchy, they can be dropped directly into the theme folder.

For my example, they will be twentytwenty/archive-product.php and twentytwenty/taxonomy-product-cat.php. Inside both files, we just need to load our instantsearch.php file instead of what would be loaded by WooCommerce.

Below should be the complete template files needed to work for both.

<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

require_once Algolia_Template_Utils::locate_template( 'instantsearch.php' );

If all went well, then visiting your shop landing page and any product category should now be showing Algolia-based listings.

Product category customization.

Before we can call ourselves done, we need to configure the product categories just a little bit. We want these to be limited to just products within that category.

To accomplish this part, we need to get some WordPress query details added to our inline scripts. We are going to add to our woo_product_cat_algolia_assets callback function and determine the current product category.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
	
	global $wp_query;
	
	if ( empty( $wp_query->query['product_cat'] ) ) {
		return;
	}

	$term_parts = explode( '/', $wp_query->query['product_cat'] );
	$results['terms'] = [];
	foreach( $term_parts as $part ) {
		$term = get_term_by( 'slug', $part, 'product_cat' );
		$results['terms'][] = $term->name;
	}
	wp_add_inline_script( 'algolia-instantsearch', 'const woo_algolia_queried_terms = '' . json_encode( $results ) . ''; ' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

With this added code, we are grabbing the current global $wp_query object and using PHP’s explode function on the product_cat portion of the query arguments.

This will get us an array of product categories for the current query. We then iterate over those categories and get term objects for each, before storing the term name values as part of our $results array.

Finally, we store that $results variable as JSON on a JavaScript constant to be used in a moment. This way we can access the product category information in our InstantSearch configuration code.

Back in our instantsearch.php file, we need to add this alongside our widgets configuration. We are grabbing that available woo_algolia_queried_terms constant that we just created, and parsing it as JSON data.

Once we have the identified terms from the current query, we add it to the Algolia configured widget and specify it as a default for the filters. This way it’s only showing items from the chosen category.

<?php if ( is_product_category() ) { ?>
	let woo_term_data = JSON.parse( woo_algolia_queried_terms );
	let item_parts = [];
	for (const item of woo_term_data.terms) {
		item_parts.push('taxonomies.product_cat:"' + item + '"');
	}
	
	let woo_query = item_parts.join(' AND ');
	search.addWidgets([
		instantsearch.widgets.configure({
			filters: woo_query,
		}),
	]);
<?php } ?>

You can read more about the configure widget over at Algolia Configure widget documentation.

Conclusion

This completes this tutorial on WP Search with Algolia InstantSearch widget and facet customization. We’ve covered a lot over these past few posts.

Hopefully, these tutorials give you a good idea of what is capable with WP Search with Algolia and WooCommerce, out of the box and with a touch of configuration and customization.

This is definitely not the end-all-be-all of the capabilities, and there is plenty of room for more. It’s all a matter of what data you put in your Algolia indexes, and how you want to make use of it.

When you need a team to integrate the power of Algolia search with your WordPress website, contact WebDevStudios.

Complete Code

As promised, below you can download a zip file that has the final code for our WP Search with Algolia InstantSearch widget and facet customizations, as well as all the topics covered in the previous posts. These are ready to install as a plugin.

You will need to copy the two template files into your active theme and place them in a folder named “algolia” for those to be detected. The rest of the code will work as a plugin named “WooCommerce Algolia.”

WooCommerce-Algolia.zip

The post Integrating WP Search with Algolia: InstantSearch Widget and Facet Customization appeared first on WebDevStudios.

• wp-config.php – ‘DOMAIN_CURRENT_SITE‘
• wp_blogs table – domain column
• wp_site table – domain column
• wp_options and wp_*_options tables – ‘siteurl‘ and ‘home‘ option values

That should get you to where the site will load and you can log in. You’ll still need to search and replace urls in the post content using a tool like Search Replace DB 2 or the Search Regex plugin.

The post Migrating WordPress Multisite from a Development URL to Staging or Production URL appeared first on WebDevStudios.