In this edition of our company news blog post, we’re focusing on the freshest updates from WordPress. Discover how two of our team members contributed to the latest major release.

We’ll also preview upcoming WordCamps, where you can catch up with us and learn more about our initiatives. Plus, we have news of tutorials featuring our own plugins. So, grab an ice-cold drink, soak in the summer vibes, and let’s explore all the latest news from WebDevStudios and beyond.

WordPress 6.6 Released

On July 16, 2024, the WordPress community celebrated the release of WordPress 6.6, affectionately named “Dorsey” in honor of the legendary big band leader Tommy Dorsey. This release brings a host of new features and improvements designed to enhance the user experience and expand the creative possibilities for site builders. Among the standout features are:

• Expanded design options for block themes, allowing for greater customization and creativity
• A streamlined Site Editor workflow, making it easier and faster to design and manage your site
• Plugin auto-updates, complete with a safety net that includes rollbacks to ensure stability if any issues arise
• Synced patterns for consistent styling across multiple instances
• A whopping 58 accessibility fixes and enhancements to make WordPress more inclusive and user-friendly
• And so much more!

Contributor Credits

The release of WordPress 6.6 exemplifies the power of open-source collaboration. A remarkable 630 contributors from at least 51 countries united to make this update possible. We are especially proud of our own team members, Frontend Engineer Aslam Doctor and Principal Engineer Sal Ferrarello, whose efforts were instrumental in this release.

Sal discovered a bug that prevented global JavaScript code from loading on the login page using the `wp_localize_script` method. He promptly submitted a ticket to address the issue. Aslam took the lead in developing a fix, pushing the patch to the WordPress repository for review.

After rigorous testing and updates, the patch was approved. Sal and Aslam also created PHP test cases to ensure the fix’s robustness. Their collaboration exemplifies the spirit of teamwork and innovation that drives WordPress forward. Congratulations to Aslam, Sal, and all the contributors to WordPress 6.6!

Reap the Rewards of WordPress 6.6

WordPress 6.6 truly delivers on the promise of a better web, offering style, finesse, and a suite of creative possibilities for your site-building experience. This version empowers users to do more with ease, providing enhanced tools and unprecedented power behind the scenes.

Additionally, “Dorsey” continues to deliver the performance and accessibility improvements that users have come to expect from every WordPress release. These enhancements make it easier than ever to create beautiful, functional, and accessible websites.

Following the major release, WordPress 6.6.1, a maintenance release, has also been made available. This update includes important bug fixes and improvements, ensuring that your WordPress site remains in top shape. Be sure to update your WordPress to the latest version today and take full advantage of all the new features and enhancements!

Explore what WordPress 6.6 offers and elevate your site-building experience with this powerful new release. Happy updating!

WordCamps

“I hate WordCamps,” said no one ever! With 23 WordCamp events planned around the world for the remainder of the year, WordPress users, developers, and community members will have the opportunity to network, learn, expand their skills, and make memories. Here are the upcoming WordCamps, where you’ll find team members from WebDevStudios (WDS).

WordCamp Minneapolis / St. Paul (WCMSP)

Taking place at the world-famous Mall of America on August 16th, WordCamp MSP is a one-day event of learning and connecting. This conference unites WordPress enthusiasts from diverse backgrounds to discuss, share, and explore the endless possibilities of the beloved content management system.

WCMSP’s schedule features multiple talks on accessibility and AI, but one talk our team is particularly excited about is titled “WordPress at a Galactic Scale.” Former WDS team member Gary Kovar, a Principal Software Engineer who has worked on projects for NASA and Disney, is the presenter. Additionally, WordCamp organizer and agency owner E Daniel Swain will deliver the keynote speech, discussing the importance of community.

WDS Co-Founder and COO Lisa Sabin-Wilson, Engineering Manager John Heimkes, and Marketing Manager Laura Coronado will attend WCMSP.

WordCamp US (WCUS)

While WCUS is still a couple of months out, we want to let people know well in advance that WebDevStudios will be there. WordCamp US is probably the most popular WordCamp in the United States, but people from all over the world attend. In fact, Senior Frontend Engineer Alfredo Navas is flying in from Costa Rica to attend WCUS.

Other WDS teammates attending WCUS are Co-Founder and CEO Brad Williams, Director of Accounts Jen Miller, Accounts Manager Laura Byrne, and Senior Frontend Engineer Marty O’Connor. At every WordCamp they attend, Brad, Jen, and Laura always make themselves available to meet with and talk to company representatives in need of WordPress design and development. If you want to connect with WebDevStudios while at WCUS, don’t hesitate to reach out!

Plugins News

It all started with creating our most popular WordPress plugin, Custom Post Type UI, launched in February 2010. Since then, the WebDevStudios team has developed a diverse array of plugins that have been downloaded and utilized by millions of WordPress users. Explore them all at our plugin shop, Pluginize. Here’s the latest news about our plugins.

Best Practices for WP Search with Algolia Index Management

More and more people are replacing WordPress native search with the power of Algolia search by installing our WP Search with Algolia plugin. Backend Engineer Michael Beckwith published a blog post that walks users through WP Search with Algolia index management and site launch. Read it on the Pluginize blog.

Learn How to Import Your YouTube Channel as Posts

Get ready to have your mind blown when you watch this video tutorial from The Cre8tive Diva. Using our plugin, Automatic Featured Images from Videos, and WP All Import, The Cre8tive Diva shows viewers how to import a YouTube channel to WordPress as blog posts. Watch her video below or on YouTube.

The post Company News – July appeared first on WebDevStudios.

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.

Because we often use the WP Search with Algolia plugin on client projects, we make it a continuing education priority for all of our engineers. That includes me! Here’s what I want you to know about WP Search with Algolia.

First, what is Algolia?

Algolia is a site search platform that gives your website visitors a fast and useful search experience. It allows your site’s visitors to find information through search suggestions and to refine their search using facets, which are filters that allow users to narrow down their search results quickly.

Example facets of an eCommerce store might be brand, price, color, etc. It uses a powerful and fast algorithm that returns results quickly. Algolia’s analytics make it easy for site owners to refine search rankings and see how people are using search.

Algolia’s technology allows developers to interact with its API to build robust search functionality. It also provides tools for building and customizing search experiences, through analytics, search ranking, and personalization. 

Why should my site use Algolia instead of the native WordPress search?

WordPress’s out-of-the-box search is a simple keyword search across all content on your site, output into a single, long list with no way to filter or prioritize results. On larger sites with a lot of content, it can be slow.

Algolia improves your website’s search functionality in a number of ways:

1. Speed: Algolia’s search is faster and more accurate than WordPress’s built-in search, which can be slow and return irrelevant results.
2. Customization: Algolia allows for more customization of the search experience, with the ability to sort, filter, and display results in various ways. Content can also be weighted, so specific types of content are always shown first. For example, events can be displayed on an event-focused website before pages or blog posts.
3. Scalability: Algolia can handle large numbers of search queries and a large amount of data, which is good for websites with a large amount of content.
4. Analytics: Algolia provides analytics and search insights that can help website owners understand how users interact with their search and website more generally.

WP Search with Algolia

Now that you know why Algolia should replace your WordPress website’s default search engine, how do you integrate Algolia into your WordPress website? WebDevStudios’ WP Search for Algolia plugin is the best plugin to integrate Algolia search engine into your website.

Originally developed by Algolia, we forked the plugin once they ceased development, and have been developing and maintaining it since. It allows you to index your WordPress content and use Algolia’s powerful search engine to provide your users a fast and accurate search experience.

WP Search with Algolia is easy to set up and manage in any theme without having to touch your theme’s files or know how to use the API. To get started, all you need is an Algolia account and API key.

Key features of the WP Search for Algolia plugin include:

• Indexing of posts, pages, and custom post types
• Automatic syncing of the index with your website’s content
• Customizable search results template
• Typo-tolerance and synonyms support
• Faceted search
• Search analytics and insights

Customizing WP Search with Algolia

Out of the box, WP Search with Algolia works great to improve your website’s search performance. The ability to customize search using Algolia’s API makes the plugin more powerful.

WebDevStudios used Algolia to implement an eCommerce search for a recent client that bridged the gap between two data sources. The client pushed a lot of product data into Algolia from a non-WordPress source. Rather than forcing the data to flow through WordPress, our website design and development team adapted and customized the search on the WordPress side and we were able to provide a seamless search experience for their customers.

On another client site, we used WP Search with Algolia to improve the search results page by separating content types—products and pages—into two separate pages. Separating the two types of content allows users to drill down their product searches by filtering via facets, which isn’t needed for on-page search results.

Try the plugin and let us know how your WordPress website search improved!

The post WP Search with Algolia WordPress Plugin Benefits appeared first on WebDevStudios.

In November, WDS kept busy, focusing on big website projects for big brands, while also giving back to WordPress via Five for the Future. Here are some other activities our teammates were involved with.

WordCamp San José, Costa Rica

WordCamp San José (WCSJ) took place November 5-6, 2022 in Costa Rica. WDS Senior Frontend Engineer, Alfredo Navas, was there. Alfredo presented a talk titled, “Full Site Editing – Temas Badados en Bloques, Patrones Y El Theme.JSON.”

This talk addressed the transition of WordPress development to a no-code solution with block-based themes, pattern creation, and full-site editing. For more on this in-person WordCamp event, read Green Geek’s recap.

WordCamp Asia 2023

Happening in February of next year, WordCamp Asia is sold out! As the first flagship WordCamp in Asia, this event is bringing true value to the community.

WDS Backend Engineer, Lax Mariappan, took time to chat with Go with WP. about the importance of WordCamp Asia and WordPress technology. Watch the video below.

Updates

From plugin versions to event rescheduling, some important announcements were made this month. Here’s what you need to know.

Pluginize Plugins

Did you know WebDevStudios is the developer behind some of the most popular WordPress plugins? We offer our free and premium plugins at our online store Pluginize. The following is the latest news and updates on our products.

Custom Post Type UI (CPTUI) Extended
CPTUI Extended released Version 1.11.1 this month. This update includes a focus on user experience in our Gutenberg block.

WP Search with Algolia
Version 2.3.1 of WP Search with Algolia has been released. This is just a minor update to fix an immediate bug that was introduced in the previous release.

WordPress

At the beginning of the month, WordPress released Version 6.1, aka “Misha.” As such, we updated our WordPress Spotify playlist by adding a song from jazz artist, Mikhail “Misha” Alperin, to it.

Since then, Version 6.1.1 launched. Be sure you’re running the latest version of WordPress.

Events

WordFest Live has rescheduled its event to December 16, 2022. You can read the announcement of this change on the blog for Big Orange Heart.

WebDevStudios Is Hiring!

WDS is actively recruiting frontend engineers with all levels of experience, including junior, senior, and lead. If you’re interested in ending your year with a new job (and, who can blame you?), please view the job description for the position and apply online today.

The post Company News – November 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.

I also covered the results to be shown for both autocomplete suggestions and instant search, among some other elements. It’s worth reading if you haven’t yet.

Today, however, we are going to focus on template customization for WooCommerce. Specifically, I am referring to the display of your Algolia data on your WordPress website and how to customize the display of returned results.

We will be using the product data discussed in part one of this series.

WP Search with Algolia: Autocomplete and Instantsearch Template Files

When you download WP Search with Algolia, it comes with a couple of template files for both autocomplete and instantsearch. These make for solid defaults with minimal display, but we need to make them more robust and fit our needs.

In order to customize these files safely, we need to copy the autocomplete.php and instantsearch.php files out of /plugins/wp-search-with-algolia/templates/ and into a folder named algolia in your currently active theme.

The plugin will automatically detect their existence from the theme and use those copies instead of the prepackaged versions. This allows you to customize and still update the plugin without losing customization.

Autocomplete

Below is a screenshot of the default autocomplete search when using the TwentyTwenty theme. Here, we can see a heading mentioning the content types being shown, followed by five different products matching our search term.

Each result includes a thumbnail for their product image, product name, and product description.

We are going to change the listings to include both the price and SKU number next to the product name, and use the short description if available, or else the current description.

For this, we need to edit the autocomplete.php template file, specifically, the section found at Autocomplete.php line 21-33.

Here, we will have a JavaScript variable data that will hold information for each suggestion hit, meaning an individual product. Now, we start making use of all that information we indexed.

The bundled template files make use of the wp.template functionality that ships with WordPress. It uses underscore.js for its templating, and has a mustache-like syntax. Luke Woodward has a great general tutorial for making use of this on your own.

<div class="suggestion-post-attributes">
	<span class="suggestion-post-title">{{{ data._highlightResult.post_title.value }}} - {{ data.sku }} - {{ data.price }}</span>
	<# if ( data.short_desc ) { #>
		<span class="suggestion-post-content">{{ data.short_desc }}</span>
	<# } else if ( data._snippetResult['content'] ) { #>
		<span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
	<# } #>
</div>

In the snippet above, I have amended the markup for the “suggestion-post-attributes” wrapper div, starting on line 26, to include a few more things. These values are all on the top level of your product index when looking at the item in the Algolia dashboard.

First, we output the SKU property, followed by the price property. Both are included in the span wrapping of the original post title value, which is getting some extra highlighting from Algolia.

Next, we can use some standard “if statement” logic on the properties to check if we have a value before acting. Here, I have checked to see if we have a short description to show, otherwise it falls back to the original snippet version coming from the full product description.

Below is a screenshot of the final result.

Other areas of the autocomplete.php template file has spots for customizing details like the autocomplete header, term suggestions, user suggestions, autocomplete footer, and no results template. We are not going to worry about those at the moment.

Towards the very bottom is the JavaScript that is powering everything. For the sake of this post, I won’t be going into details there. What we’ve been concerned about is the display of data coming back from a given query.

Instantsearch

Now that we’ve added some content to the autocomplete suggestions, we will add the same information to our Algolia hits output before we click into a specific result.

For this portion, we need to edit the instantsearch.php template file.

The section for this one can be found at Instantsearch.php line 48-68. We are going to insert a new paragraph tag above the excerpt, to conditionally show both the SKU and the current price if we have a value.

<h2><a class="ais-hits--title-link" title="{{ data.post_title }}" href="{{ data.permalink }}">{{{ data._highlightResult.post_title.value }}}</a></h2>
<# if ( data.sku || data.price ) { #>
	<# if ( data.sku ) { #>
		<span class="is-hit-sku">SKU: {{data.sku}}</span> |
	<# } #>

	<# if ( data.price ) { #>
		<span class="is-hit-price">Price: {{data.price}}</span>
	<# } #>
<# } #>

<# if ( data.taxonomies.product_cat ) { #>
	{{{data.taxonomies.product_cat}}}
<# } #>
<div class="excerpt">

To help keep our markup clean, we are only going to output anything if we have either a SKU or a price value. Once we know we have something, we output some span markup for each data item we have.

For easier styling, we have included some custom classes. To top off our instantsearch customizations, we’re going to output the product category for each.

Template Summary

These template edit examples are definitely minor but show how to take a given Algolia hit and modify the output for each. The data object variable is going to be the key here.

As a reminder, when viewing your index in the Algolia Dashboard and index explorer, each part of a given object is available via that data variable. Some parts may be top level like data.post_title, while others may be a bit more nested like you see in the images. For example, data.images.thumbnail found in use in the template files, but not as part of our code examples above.

Our journey through integrating WP Search with Algolia is not complete. Coming up next in this series, I’ll discuss facet widget customization. Be sure to come back to this blog.

The post Integrating WP Search with Algolia: Autocomplete and Instantsearch Customization appeared first on WebDevStudios.

However, our stance has been that due to complexities with WooCommerce, we are not planning to add any official support to the free plugin WP Search with Algolia. That does not mean there is zero ability for the plugins to work together; it’s just that integration is up to individual site owners to adjust to their own needs.

This has left a proverbial hole in our free Algolia support. Going into the end of 2021 and the beginning of 2022, I was assigned tasks regarding integrating WPSwA with a WooCommerce-based website.

At the time, I was still saying, “We don’t have official support for WooCommerce.” Yet, I was chomping at the bit for this opportunity and hands-on experience.

There were definitely hiccups and interesting challenges along the way, but I feel the gained knowledge has proved invaluable. I want to discuss with you here how I handled various parts of what I learned, including WP Search with Algolia’s settings and configurations for WooCommerce.

At the time of this writing, we are using version 2.2.0 of the plugin, available on both WordPress.org and GitHub. Also, for these examples, we are focused on simple products in WooCommerce. Other product types will need more exploration and work.

I am covering our overall setup in three parts:

1. Settings and index management with WPSwA
2. Template customization
3. Facet widget customization

Today’s post covers part one only—WP Search with Algolia settings and configurations with WooCommerce.

After all three parts are addressed, we will provide a plugin version holding all the code presented in these blog posts. We encourage modifying this plugin version to meet your own fine-tuned needs For the sake of brevity, I assume you already have an Algolia account and WPSwA setup, including Application IDs and various API keys.

WP Search with Algolia Settings and Index Management for WooCommerce

Settings Management

It is definitely possible to control and manage indices configuration in the Algolia.com dashboard. Those settings are reflected on your website when using search.

WPSwA, on the other hand, is also set up to manage these settings. This is done via code rather than UI, using WordPress’ extensive hooks API. Whenever you see UI or instructions to “Push Settings,” the settings provided via custom code are pushed to your Algolia instance.

Controlling the settings via custom code may sound odd, but it is actually extremely handy. It allows not only version control of the configurations, but also allows for consistently deploying those settings across various indices and between development sites. All you need to do is trigger some UI and everything is configured for you.

We are providing configuration code to help with WooCommerce integration, but if you prefer managing it via the dashboard, remove that code and avoid the “Push Settings” UI.

Index Management

When I say index management, what I mean is managing what information gets pushed when a given product object is updated or removed. Some parts are already handled for you, while others will need manually added and a re-index run.

Not every change around index management requires settings deployment, but does need a re-index of the content. We let you know when each is needed.

For index management, we’re focusing on two indexes specifically. The first one is the posts_product index and the second is the searchable_posts index.

When you enable individual content types on the Autocomplete settings page and click to index that content type, a corresponding table is added to your Algolia instance. In the case of our WooCommerce intent, we want the “Products” row which creates the index of “posts_product.”

The searchable_posts index is a bit more encompassing with less to click. It indexes all of the content types that are considered searchable by WordPress.

If you have registered your own post type before, you may recall the “Show In Search” option. This is the same.

Any time that we’re adding information to the products in our indexes, we use the following two filters available to us in the WPSwA plugin:

algolia_post_product_shared_attributes
algolia_searchable_post_product_shared_attributes

Meanwhile, whenever we’re modifying the settings for the related indices, we use the following filters (also available in the WPSwA plugin):

algolia_posts_product_index_settings
algolia_searchable_posts_index_settings

Note: the final version of supplied code is different compared to isolated snippets, but should have all parts covered by the post in the end.

SKUs

We’re starting with one of the most common questions I’ve seen regarding WooCommerce integration. How do we get a product’s SKU value indexed?

function add_product_data_to_autocomplete_and_instantsearch( $shared_attributes, $post ) {
	$product = wc_get_product( $post );

	if ( ! $product ) {
		return $shared_attributes;
	}

	// We need to make sure the SKU is a part of each index, in order to search by it.
	$shared_attributes['sku'] = $product->get_sku();

	return $shared_attributes;
}
add_filter( 'algolia_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );
add_filter( 'algolia_searchable_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );

First, we hook into the shared attributes data where the attributes to be indexed are set and data included. This hooks in before the final data is sent to Algolia, and is a perfect spot for us to include extra information.

In the code above, we are utilizing the passed-in $post object to retrieve a WooCommerce product object. If we have a found product, we use the get_sku() method to retrieve and set the value in a new “sku” index. Once done, we return the updated $shared_attributes array.

Since we changed what gets indexed on product objects, we need to run a sync on both the Autocomplete and Search pages. Having the SKU on both will be important in a moment.

Adding the Ability to Search by SKU

Next, we need to amend the settings for our posts_product and searchable_posts configurations.

function amend_posts_products_and_searchable_settings( $settings ) {

	$settings['searchableAttributes'] = 'unordered(sku)';

	$settings['disableTypoToleranceOnAttributes'][] = 'sku';
	$settings['disablePrefixOnAttributes'][] = 'sku';

	return $settings;
}
add_filter( 'algolia_posts_product_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );
add_filter( 'algolia_searchable_posts_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );

Here, we are adding the “sku” attribute into our list of attributes considered searchable, and telling Algolia they should be unordered.

We are also disabling typo tolerance for the “sku” attribute. This means that a sku of “40025” won’t be included when you typed “40026.”

Lastly, we are also adding the “sku” attribute to the list to disable prefix searching on. That means if you were to type “400,” neither “40025” nor “40026” are considered as a result.

All of this helps ensure that SKUs can be searched exactly, both when showing suggestions in the search bar, as well as with the final results themselves.

Product visibility and availability

Product visibility

Let’s say you’ve gone through the effort to manage your merchandise. Sometimes, you want to remove a product’s catalog visibility on the frontend.

For this, we’re going to mark the product as should NOT be indexed, if its WooCommerce visibility is marked as “hidden” or “catalog” only. We will be making use of these available filters to achieve this.

The filters are passed a boolean value for the current determined status of if it should be indexed or not, and then a post object itself.

algolia_should_index_post
algolia_should_index_searchable_post

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

	if ( false === $should_index ) {
		return $should_index;
	}

	$product = wc_get_product( $post->ID );
	if ( ! $product ) {
		return $should_index;
	}

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	return $should_index;
}

Here, we return early if it’s already been determined elsewhere that it should not be indexed. Why do extra work?

If the product is still considered indexable, we move to retrieve a product object and check its current visibility value. If that visibility is “hidden” or “catalog,” then we set $should_index to false and return our filtered value.

This post would not be indexed and WPSwA would move on to the next item.

Product Availability

Perhaps you don’t want to show products that are presently out of stock or are on backorder. Users should only see what they can buy now. Using the same function above, we can add a few more checks to potentially prevent the indexing of a given product.

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

...

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	$stock_status = $product->get_stock_status();
	$statuses_to_retain_indexability = [ 'instock' ];
	if ( ! in_array( $stock_status, $statuses_to_retain_indexability ) ) {
		$should_index = false;
	}

	return $should_index;
}

In this amended code, we are utilizing the $product object to get the stock status. By default, WooCommerce stores either “in stock,” “outofstock,” or “onbackorder.”

For our purposes here, we only want to show items in stock. If the found status is not in our array, set $should_index to false and return the final value.

Bonus points: How could this information be used in conjunction with Yoast SEO content settings?

Extra product information

When it comes to your products, the SKUs don’t have to be the only thing you index. Any detail about the product that you can fetch can be included as part of it’s indexed object.

For the sake of the rest of this post, I’m going to add both the price (with currency symbol) and short description to my products. Don’t forget to re-index!

$product = wc_get_product( $post );

if ( ! $product ) {
return $shared_attributes;
}

...

$currency_symbol = html_entity_decode( get_woocommerce_currency_symbol() );
$shared_attributes['price'] = $currency_symbol . $product->get_price();
$shared_attributes['short_desc'] = $product->get_short_description();

return $shared_attributes;

Conclusion

Whew, we have accomplished a fair amount here. We have successfully integrated WP Search with Algolia’s settings and configurations for WooCommerce. Additionally, we marked some of our attributes as being searchable and added a fair bit of product information to our products in Algolia.

Lastly, we also configured our install to control whether or not a product should even get indexed, based on catalog visibility or current availability. Next time, we will get into how to make use of this information when performing a search and how to customize the display of everything.

If you’re ready to have WP Search with Algolia integrated with specialized settings on your WooCommerce website, contact WebDevStudios.

The post Integrating WP Search with Algolia: Settings and Configurations for WooCommerce appeared first on WebDevStudios.

The WP Search with Algolia plugin for WordPress allows you to almost instantly improve the quality of search results by sending the content of your WordPress site to Algolia for indexing. Algolia provides configuration options for things like custom rankings, sorting, fuzzy matching, and personalization of search results, which greatly improves the overall quality of search results.

WP Search with Algolia handles the indexing of all WordPress content, images, and custom fields by sending data directly to Algolia. It fully replaces the default WordPress search algorithm and can also integrate Algolia’s InstantSearch feature.

Benefits of Using Algolia Over Native WordPress Search

• Speed – The Algolia API returns relevant search results in milliseconds.
• Typo Tolerance – Typo tolerance allows users to make mistakes while typing and still find the records they seek.
• Custom Ranking – Define custom rankings based on popularity, customer behavior, and other business metrics.
• Analytics – Analyze queries to get a deeper understanding of top search terms, locations, conversion rates of queries, etc.
• Facets – Build a faceted experience with refinements that help avoid “no results” screens.

Tips and Tricks

To get the most out of Algolia and WP Search with Algolia, I’m going to highlight some powerful Filter Hooks and Constants of the plugin that allow developers to alter or modify the way data is sent to Algolia for indexing.

• Image Sizes
• Indexing Custom Fields
• Index Prefix for Multiple Environments
• Excluding by Post Type
• Excluding Individual Posts

Image Sizes

By default, WP Search with Algolia sends image data for the default thumbnail image size only. The thumbnail image size is used as the preview image within the autocomplete and instantsearch components provided by the plugin.

Using the algolia_post_images_sizes filter, we can extend or modify the images sizes indexed and returned by the Algolia search. This filter is really useful when customizing the look and feel of the autocomplete or instantsearch plugin templates.

// functions.php
function wds_algolia_set_image_sizes( $sizes ) {
	// 'thumbnail' will already be coming in with the $sizes array.
	foreach( [ 'cta', 'medium', 'hero' ] as $size ) {
		$sizes[] = $size;
	}
	return $sizes;
}
add_filter( 'algolia_post_images_sizes', 'wds_algolia_set_image_sizes', 10, 2 );

The code sample above adds three other registered image sizes to the Algolia index using the algolia_post_images_sizes filter.

Indexing Custom Fields

In WordPress, custom fields (or post meta) are fields in the database that are used to store additional information about a post or a page. By default, custom fields are not searchable by Algolia, unless the fields have been added to the index.

Popular plugins such as Advanced Custom Fields and Meta Box have made working with custom fields second nature to WordPress developers. Having the ability to index custom fields can improve overall search quality and search relevance for users.

One benefit of using WP Search with Algolia over native WordPress search is you can push custom field data to Algolia and ensure these fields are indexed as searchable attributes.

// functions.php
function wds_algolia_custom_fields( array $attributes, WP_Post $post ) {

	// Eligible post meta fields.
	$fields = [
		'display_date',
		'duration',
		'file_type',
		'transcript',
	];

	// Loop over each field...
	foreach ( $fields as $field ) {

		// Standard WordPress Post Meta.
		$data = get_post_meta( $post->ID, $field );

		// Advanced Custom Fields.
		// @see https://www.advancedcustomfields.com/resources/get_field/
		$data = get_field( $field, $post->ID );

		// Only index when a field has content.
		if ( ! empty( $data )  ) {
			$attributes[ $field ] = $data;
		}
	}

	return $attributes;
}
add_filter( 'algolia_post_shared_attributes', 'wds_algolia_custom_fields', 10, 2 );
add_filter( 'algolia_searchable_post_shared_attributes', 'wds_algolia_custom_fields', 10, 2 );

The code sample above uses the algolia_post_shared_attributes and algolia_searchable_post_shared_attributes filters to add four custom fields and their corresponding data to the two Algolia indexes.

Index Prefix for Multiple Environments

You’re likely to have multiple environments for your WordPress site: local, development, staging, and production. In a perfect world, each environment would each have their own unique Algolia index, or you could run the risk indexing search results from a non-production environment.

By default, WP Search with Algolia prefixes the index name with wp_. This prefix is stored in the WP Options table and is updatable by visiting Algolia Search > Settings in your WordPress admin.

This works perfectly fine if you are running a single environment; however, if you are pushing and pulling content across multiple environments, this can be problematic as you need to update the index name each time content is synced.

To solve this issue, you can use the ALGOLIA_INDEX_NAME_PREFIX constant. This constant can be used to define the prefix outside of the WordPress database by adding it directly to the wp-config.php file of each environment.

// wp-config.php.
define( 'ALGOLIA_INDEX_NAME_PREFIX', 'dev_' ); // dev_searchable_posts

// wp-config.php.
define( 'ALGOLIA_INDEX_NAME_PREFIX', 'prod_' ); // prod_searchable_posts

Creating a unique index for each WordPress environment will reduce the risk of issues arising in production and allow for more thorough testing by indexing the content of each specific environment.

WordPress 5.5 introduced a new function, wp_get_environment_type, that retrieves the current environment type (local, development, staging, or production). Once managed hosts begin adopting and supporting environment type variables, you could define index prefixes at the theme level in functions.php.

// functions.php
switch ( wp_get_environment_type() ) {
	case 'production':
		define( 'ALGOLIA_INDEX_NAME_PREFIX', 'prod_' );
		break;

	case 'staging':
		define( 'ALGOLIA_INDEX_NAME_PREFIX', 'staging_' );
		break;

	case 'local':
	case 'development':
		define( 'ALGOLIA_INDEX_NAME_PREFIX', 'dev_' );
		break;
}

Excluding by Post Types

WP Search with Algolia does not index post types that have exclude_from_search set to true. This works in most cases; however, there may be situations where a third-party plugin or another system has registered a post type without exclude_from_search and you want to exclude it from being indexed.

For these cases, you can use the algolia_searchable_post_types filter to manually exclude the post type.

// functions.php
function wds_algolia_exclude_post_types( $post_types ) {

	// Ignore these post types.
	unset( $post_types['acf-field_group'] );
	unset( $post_types['testimonials'] );
	unset( $post_types['forms'] );

	return $post_types;
}
add_filter( 'algolia_searchable_post_types', 'wds_algolia_exclude_post_types' );

Excluding Individual Posts

If you don’t want to code this part yourself, or want greater control over not indexing content based on “No index” settings from plugins like Yoast, All In One SEO, Rank Math, or SEOPress, please consider checking out our premium WP Search with Algolia Pro addon.

There may be times where, for whatever reason, you need to exclude a specific post or posts from being indexed by Algolia. To do this, create a checkbox field using Advanced Custom Fields and attach the field group to each post type you require indexing control.

On the posts or pages you wish to exclude from the search, check the checkbox to mark the content as non-indexable.

In functions.php, use the algolia_should_index_searchable_post and algolia_should_index_post filters to evaluate the custom field; and if checked, return a false value to the should_index filters.

// functions.php
function wds_algolia_exclude_post( $should_index, WP_Post $post ) {
 
  // If a page has been marked not searchable
  // by some other means, don't index the post.
  if ( false === $should_index ) {
     return false;
  }


  // ACF Field.
  // Check if a page is searchable.
  $excluded = get_field( 'exclude_from_search', $post->ID );
 
  // If not, don't index the post.
  if ( 1 === $excluded ) {
     return false;
  }
 
  // If all else fails, index the post.
  return true;
}
add_filter( 'algolia_should_index_searchable_post', 'wds_algolia_exclude_post', 10, 2 );
add_filter( 'algolia_should_index_post', 'wds_algolia_exclude_post', 10, 2 );

Wrapping Up

WP Search with Algolia provides an all-in-one solution for improving the overall quality of your WordPress search results. Not only does the plugin provide functionality for searching and displaying search results on standard WordPress themes, it can also be used for content indexing purposes only for Headless WordPress projects.

Editor’s Note: This blog post was updated on February 20, 2024 by WebDevStudios Backend Engineer Michael Beckwith.

The post WP Search with Algolia Tips and Tricks appeared first on WebDevStudios.